Python Socket客户端转JS WebSocket后open事件不触发排查求助

1. 核心协议不兼容问题（最根本原因） #

• 你现有服务端是普通TCP Socket服务，仅支持裸TCP协议通信，完全不支持WebSocket协议
• WebSocket不是裸TCP协议，它需要先通过HTTP/1.1完成Upgrade: websocket握手流程，握手通过后才会触发客户端的open事件。你的服务端没有处理这个WebSocket握手逻辑，收到请求后没有返回合法握手响应，浏览器等待超时就会报连接失败，自然不会触发open事件

2. 架构选型调整方案 #

方案1：改造服务端支持WebSocket #

将原有裸TCP服务端替换为WebSocket服务端，Python生态可以直接用websockets、FastAPI、Flask-SocketIO等库实现，自带WebSocket握手处理逻辑，无需自己实现协议解析。

方案2：调整前端实现逻辑 #

浏览器端原生JS不支持裸TCP通信，如果不想改服务端，只能改用以下方案：

• 切换到Electron等支持原生TCP API的环境，使用net模块对接现有TCP服务
• 新增一层后端代理，代理前端的WebSocket请求，转为TCP请求和原有服务端通信

3. 客户端逻辑修复（协议兼容后再排查） #

你当前JS代码的头部构造逻辑存在问题，会导致服务端解析失败：

• 不应该用encodeURI处理用户名和头部，encodeURI会对特殊字符做转义，导致实际字节长度和你计算的长度不匹配，应该直接用TextEncoder处理二进制数据，修正示例如下：

const HEADER_LENGTH = 10;
const encoder = new TextEncoder('utf-8');

(function(){
    const ws = new WebSocket("ws://" + SERVER_IP + ":8080");
    ws.binaryType = 'arraybuffer'; // 指定接收二进制类型
    ws.addEventListener('open', function(e){
        console.log('open', e);
        // 构造符合服务端要求的头+用户名结构
        const usernameBytes = encoder.encode("user");
        const headerStr = `${usernameBytes.length}`.padEnd(HEADER_LENGTH, ' ');
        const headerBytes = encoder.encode(headerStr);
        // 合并二进制数据后发送
        const sendData = new Uint8Array(headerBytes.length + usernameBytes.length);
        sendData.set(headerBytes, 0);
        sendData.set(usernameBytes, headerBytes.length);
        ws.send(sendData);
    });
    ws.addEventListener('message', function(e){console.log('msg', e)});
    ws.addEventListener('error', function(e){console.error('连接错误', e)});
    ws.addEventListener('close', function(e){console.log('连接关闭', e)});
})();

4. 网络层面排查 #

• 确认服务端8080端口的防火墙/安全组规则允许浏览器所在客户端IP访问
• 如果你的前端页面是HTTPS协议，浏览器会默认阻止非加密的ws://请求，需要将WebSocket地址改为wss://，同时服务端配置对应SSL证书

内容的提问来源于stack exchange，提问作者Pak Ho Cheung