使用 Golang-WebSocket 實現按鍵記錄

在 Web 開發和安全研究中，監聽用戶輸入是一項重要的功能，比如在在線代碼編輯器、遊戲按鍵綁定或快捷鍵管理中，我們可能需要記錄用戶的按鍵輸入。本文將介紹如何使用 Golang + WebSocket 實現一個簡單的按鍵記錄系統。

按鍵監聽的原理

在 Web 端，我們可以使用 JavaScript 的事件監聽器來捕獲用戶的鍵盤輸入事件。JavaScript 提供了 keydown、keypress 和 keyup 三種事件來監聽按鍵：

keydown：用戶按下某個鍵時觸發（推薦使用）。
keypress：類似 keydown，但不適用於所有鍵（例如 Shift、Control）。
keyup：用戶鬆開某個鍵時觸發。

其中，keydown 是最常用的，因爲它可以捕獲所有鍵，包括 Ctrl、Alt、Shift 等特殊按鍵。在後端，我們可以使用 WebSocket 來實現一個持久化的雙向通信通道，使前端可以實時發送按鍵數據，而後端負責接收並存儲這些數據。

例子總覽

本例子包含**前端（HTML + JavaScript）和後端（Golang WebSocket 服務器）**兩部分：

前端：

監聽用戶的 keydown 事件，捕獲按鍵信息（如鍵值、鍵碼、時間戳）。
通過 WebSocket 發送數據到後端。

後端：

監聽 WebSocket 連接，並接收來自前端的按鍵數據。

後端實現（Golang WebSocket 服務器）

按照慣例我們先創建一個 go 項目，操作如下所示:

mkdir weboscket-demo
cd websocket-demo/ go mod init github.com/xxx/websocket-demo
go get github.com/gorilla/websocket

新建 index.go 文件，並寫入以下代碼：

package main
import (
	"log"
	"net/http"
	"github.com/gorilla/websocket"
)
// WebSocket升級器
var upgrader = websocket.Upgrader{
	CheckOrigin: func(r *http.Request) bool {
		return true // 允許所有跨域請求（可根據需要調整）
	},
}
// 處理WebSocket連接
func handleConnections(w http.ResponseWriter, r *http.Request) {
	// 升級HTTP連接爲WebSocket 連接
	conn, err := upgrader.Upgrade(w, r, nil)
	if err != nil {
		log.Println("WebSocket 連接升級失敗:", err)
		return
	}
	defer conn.Close()
	log.Println("客戶端已連接")
	// 監聽WebSocket消息
	for {
		_, msg, err := conn.ReadMessage()
		if err != nil {
			log.Println("讀取消息失敗:", err)
			break
		}
		log.Printf("收到按鍵: %s\n", msg) // 這裏可以存入數據庫
	}
}
func main() {
	http.HandleFunc("/ws", handleConnections)
	log.Println("WebSocket 服務器啓動: ws://localhost:9527/ws")
	err := http.ListenAndServe(":9527", nil)
	if err != nil {
		log.Fatal("服務器啓動失敗:", err)
	}
}

代碼解析

upgrader：用於將 HTTP 連接升級爲 WebSocket 連接。
handleConnections：
監聽 WebSocket 連接。
讀取前端發送的按鍵數據。
解析後打印（或存入數據庫）。
運行 WebSocket 服務器，監聽 9527 端口。

前端實現（JavaScript 監聽按鍵）

新建 demo.html，並寫入以下代碼：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta >
    <title>按鍵記錄</title>
</head>
<body>
    <h2>按鍵記錄示例</h2>
    <p>請在頁面中按任意鍵，按鍵數據將發送到 WebSocket 服務器。</p>
    <script>
        // 連接 WebSocket 服務器
        const ws = new WebSocket("ws://localhost:9527/ws");
        ws.onopen = function() {
            console.log("已連接到 WebSocket 服務器");
        };
        ws.onmessage = function(event) {
            console.log("收到服務器消息:", event.data);
        };
        ws.onerror = function(error) {
            console.error("WebSocket 錯誤:", error);
        };
        ws.onclose = function() {
            console.log("WebSocket 連接已關閉");
        };
        // 監聽鍵盤按鍵事件
        document.addEventListener("keydown", function(event) {
            const keyData = {
                key: event.key,        // 按鍵字符（如 "a"、"Enter"）
                code: event.code,      // 按鍵代碼（如 "KeyA"、"Enter"）
                timestamp: new Date().toISOString() // 記錄時間
            };
            console.log("發送按鍵數據:", keyData);
            ws.send(JSON.stringify(keyData));
        });
    </script>
</body>
</html>

代碼解析

WebSocket("ws://localhost:9527/ws")：連接 Golang WebSocket 服務器。
document.addEventListener("keydown", function(event) {...})：
監聽 keydown 事件，獲取 event.key 和 event.code。
發送 JSON 數據到 WebSocket 服務器。

運行示例

運行效果如下圖所示:

總結

本文介紹了：

按鍵監聽的基本原理
使用 Golang 搭建 WebSocket 服務器
使用 JavaScript 監聽併發送按鍵數據

請在微信客戶端打開

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Dm0VKpHvRlco5IU96rKohw

猜你喜歡