Python Asyncio WebSocket服务端向JS客户端发送整数的解码问题

核心问题原因 #

当Python端发送UTF-8编码的字节流时，JS WebSocket客户端会默认将其识别为Blob类型数据，而非文本，因此需要额外处理才能解析为整数。

两种解决方案 #

方案1：修改Python端发送文本（推荐） #

直接将整数转为字符串发送，websockets库会自动完成UTF-8编码，JS端可直接接收文本并解析为整数。

Python服务端代码

import asyncio
import websockets

async def handle_client(websocket):
    target_num = 12345
    # 直接发送字符串形式的整数，无需手动encode
    await websocket.send(str(target_num))

async def main():
    async with websockets.serve(handle_client, "localhost", 8765):
        await asyncio.Future()  # 保持服务运行

asyncio.run(main())

JS客户端代码

const ws = new WebSocket('ws://localhost:8765');

ws.onmessage = (event) => {
    // event.data直接是字符串，转为整数
    const receivedNum = parseInt(event.data, 10);
    console.log('解析后的整数:', receivedNum);
};

ws.onerror = (err) => console.error('WebSocket错误:', err);

方案2：JS端处理Blob类型数据 #

如果必须保留Python端发送UTF-8编码字节的逻辑，可在JS端通过FileReader读取Blob并解码为文本，再转为整数。

Python服务端代码（保留原编码逻辑）

import asyncio
import websockets

async def handle_client(websocket):
    target_num = 12345
    # 手动将字符串转为UTF-8字节发送
    await websocket.send(str(target_num).encode('utf-8'))

async def main():
    async with websockets.serve(handle_client, "localhost", 8765):
        await asyncio.Future()

asyncio.run(main())

JS客户端代码

const ws = new WebSocket('ws://localhost:8765');

ws.onmessage = (event) => {
    if (event.data instanceof Blob) {
        const reader = new FileReader();
        reader.onload = () => {
            // 读取为UTF-8文本后转整数
            const receivedNum = parseInt(reader.result, 10);
            console.log('解析后的整数:', receivedNum);
        };
        reader.readAsText(event.data, 'utf-8');
    } else {
        // 兼容文本类型的 fallback
        const receivedNum = parseInt(event.data, 10);
        console.log('解析后的整数:', receivedNum);
    }
};

内容的提问来源于stack exchange，提问作者prasanth hustles