JavaScript连接SocketTest v3.0.0自建WebSocket服务器失败求助

问题根因 #

你使用的SocketTest v 3.0.0是普通TCP Socket测试工具，搭建的是原生TCP服务器，不支持WebSocket协议的握手流程。浏览器端的JS WebSocket实例发起连接时，会先发送你收到的那段HTTP升级请求，需要服务器返回符合规范的握手响应后，连接才会进入OPEN状态，才能调用send方法发数据。你当前的TCP服务器没有返回握手响应，所以WebSocket一直处于CONNECTING状态，调用send就会抛出对应异常，超时后浏览器会主动断开连接。

定位步骤 #

• 确认WebSocket实例状态：创建ws实例后，打印ws.readyState属性，0对应CONNECTING，1对应OPEN，2对应CLOSING，3对应CLOSED，可以验证你调用send时状态确实为0，符合报错描述。
• 验证协议兼容性：用普通TCP客户端（比如netcat）连接你搭建的9090端口，收发数据是正常的，只有用WebSocket客户端连接会出现问题，即可确认是协议不匹配导致的问题。
• 抓包验证服务器响应：可以用抓包工具抓取本地环回地址9090端口的数据包，能看到浏览器发送WebSocket握手请求后，服务器没有返回符合规范的握手响应，也没有主动关闭连接，直到超时后浏览器主动发起断开。

解决方案 #

方案1：更换为WebSocket服务器 #

如果确实需要用浏览器端WebSocket连接，替换SocketTest为支持WebSocket的服务器即可，比如可以用Node.js快速搭建测试用的WebSocket服务器：

// 先安装依赖：npm install ws
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 9090 });

wss.on('connection', function connection(ws) {
  console.log('客户端连接成功');
  ws.on('message', function incoming(message) {
    console.log('收到客户端消息：%s', message);
    // 给客户端返回响应
    ws.send('已收到消息：' + message);
  });
});

浏览器端调用send前要监听open事件，确保连接已建立完成：

const ws = new WebSocket('ws://127.0.0.1:9090');
ws.onopen = () => {
  console.log('连接已建立');
  ws.send('hello server');
};
ws.onmessage = (e) => {
  console.log('服务器返回内容：', e.data);
};

方案2：更换客户端适配普通TCP服务器 #

如果必须使用SocketTest搭建的普通TCP服务器，就不能使用浏览器端的WebSocket连接，可以改用Node.js的net模块开发TCP客户端，或者使用其他TCP客户端工具连接即可。

内容的提问来源于stack exchange，提问作者ORHAN ERDAY