手把手教你实现WebSocket实时通信连接

什么是WebSocket

平时我们在网页上聊天、刷弹幕、看股票行情，数据总能秒刷新，不用手动点“刷新”按钮。这背后很可能就是WebSocket在干活。它像一条一直通着的管道，让服务器和浏览器可以随时互发消息，不像传统HTTP那样“问一次答一次”。

为什么用WebSocket

比如你在用一个团队协作工具，同事改了文档，你这边立刻就看到更新提示。如果靠轮询（定时发请求查），不仅延迟高，还浪费资源。而WebSocket建立连接后，双方都能主动推数据，低延迟又省电。

前端如何连接WebSocket

现代浏览器都原生支持WebSocket API。只要几行JavaScript就能连上：

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

socket.onopen = function(e) {
  console.log('连接已建立');
};

socket.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

socket.onclose = function(event) {
  console.log('连接关闭');
};

// 发送消息
document.getElementById('send').onclick = function() {
  const msg = document.getElementById('message').value;
  socket.send(msg);
};

服务端简单示例（Node.js）

用ws库搭个测试服务器很方便：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(data) {
    console.log('收到:', data);
    // 广播给所有客户端
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });

  ws.send('欢迎加入！');
});

常见问题注意点

连接失败先看地址对不对，协议是ws还是wss（生产环境用wss像https）。网络防火墙也可能拦掉非HTTP端口。建议开发时打开浏览器F12，Network里找WS标签页，能看到帧通信记录。

连接断开要自动重连。实际项目中可以加心跳机制，比如每30秒发个ping，防止中间网关把长连接掐掉。

别忘了处理异常。用户网络切换、页面休眠都可能导致连接中断，onclose事件里设个延时重连更稳。