WebSocket 接收二進位資料的正確處理方式

WebSocket 預設以文字幀（UTF-8）傳輸資料。若伺服器發送二進位幀，前端必須明確設定 binaryType 屬性，並在 onmessage 中正確處理 Blob 或 ArrayBuffer 物件，否則 event.data 可能為空或無法解析。

前端關鍵設定

var ws = new WebSocket("ws://example.com/socket");
ws.binaryType = "arraybuffer"; // 或 "blob"

// 接收處理
ws.onmessage = function(event) {
    if (event.data instanceof ArrayBuffer) {
        var bytes = new Uint8Array(event.data);
        // 處理位元組陣列，例如解析協定封包
        console.log("收到二進位資料，長度：" + bytes.length);
    } else if (typeof event.data === "string") {
        console.log("收到文字資料：" + event.data);
    }
};

常見誤區

• 未設定 binaryType，預設為 "blob"，若直接 alert(event.data) 會顯示 [object Blob]，誤以為沒收到資料。
• 嘗試用 JSON.parse 解析二進位資料，會拋錯。
• 伺服器端發送時未正確標記幀型別（需發送二進位幀而非文字幀）。

伺服器端注意事項

• Java (Netty/Jetty/Tomcat)：使用 WebSocketSession.sendMessage(new BinaryMessage(byteBuffer))。
• Node.js (ws 函式庫)：ws.send(buffer, { binary: true })。
• Go (gorilla/websocket)：conn.WriteMessage(websocket.BinaryMessage, data)。

除錯建議

1. Chrome DevTools → Network → WS 幀檢視，確認幀 opcode：0x1=文字，0x2=二進位。
2. 前端 console.log(event.data, event.data.constructor.name) 觀察實際型別。
3. 若只需傳輸結構化資料，建議統一用 JSON 文字幀，避免二進位解析複雜度；僅在傳輸圖片、檔案、高頻感測器資料時使用二進位幀。

正確設定 binaryType 並區分幀型別處理，是 WebSocket 穩定收發二進位資料的關鍵。