JavaScript WebSocket实时应用

WebSocket协议实现全双工通信，适用于实时聊天等场景；通过JavaScript的WebSocket API建立连接并监听事件，结合Node.js的ws库实现消息广播与客户端交互，需处理断开重连以保证稳定性。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，特别适合需要实时交互的应用场景。相比传统的 HTTP 请求-响应模式，WebSocket 能让服务器主动向客户端推送数据，极大提升了通信效率和响应速度。JavaScript 结合 WebSocket 可以轻松构建聊天室、实时通知、在线协作等应用。

WebSocket 基本用法

在浏览器中，JavaScript 提供了原生的 WebSocket API，使用起来非常简单。

创建连接：

通过 new WebSocket(url) 实例化一个连接，URL 使用 ws:// 或 wss://（加密）协议。

示例代码：

立即学习“Java免费学习笔记（深入）”；

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

socket.addEventListener(‘open’, (event) => {
  console.log(‘连接已建立’);
  socket.send(‘你好，服务器！’);
});

socket.addEventListener(‘message’, (event) => {
  console.log(‘收到消息:’, event.data);
});

socket.addEventListener(‘close’, (event) => {
  console.log(‘连接已关闭’);
});

socket.addEventListener(‘error’, (event) => {
  console.error(‘发生错误’, event);
});

实现简单的实时聊天功能

一个典型的 WebSocket 应用是多人聊天室。前端发送消息，服务器广播给所有连接的客户端。

前端发送与接收消息：

用户输入内容后，通过 socket.send() 发送到服务端。

document.getElementById(‘sendBtn’).addEventListener(‘click’, () => {
  const input = document.getElementById(‘messageInput’);
  const msg = input.value;
  if (msg.trim()) {
    socket.send(msg);
    input.value = ”;
  }
});

监听 message 事件将收到的消息显示在页面上：

socket.addEventListener(‘message’, (event) => {
  const chatBox = document.getElementById(‘chatBox’);
  const messageElement = document.createElement(‘div’);
  messageElement.textContent = event.data;
  chatBox.appendChild(messageElement);
});

服务端配合（Node.js + ws 示例）

前端需要一个支持 WebSocket 的服务端。Node.js 中可以使用 ws 库快速搭建。

安装： npm install ws

服务端代码：

const WebSocket = require(‘ws’);
const wss = new WebSocket.Server({ port: 8080 });

wss.on(‘connection’, (ws) => {
  console.log(‘新客户端连接’);

  ws.on(‘message’, (data) => {
    console.log(‘收到:’, data.toString());
    // 广播给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data.toString());
      }
    });
  });

  ws.send(‘欢迎加入聊天室！’);
});

处理连接状态与重连机制

网络不稳定时，WebSocket 可能断开。建议实现自动重连逻辑。

检测断开并重试：

function connect() {
  const socket = new WebSocket(‘ws://localhost:8080’);

  socket.addEventListener(‘close’, () => {
    console.log(‘连接断开，5秒后重连…’);
    setTimeout(connect, 5000);
  });

  socket.addEventListener(‘error’, () => {
    socket.close();
  });

  // 其他监听逻辑…
}

调用 connect() 启动连接，断开后会尝试重新建立。

基本上就这些。WebSocket 让实时交互变得直接高效，结合现代前端框架（如 React、Vue），可以快速开发出体验流畅的实时应用。关键是处理好连接状态、消息格式和异常情况，保证稳定性。不复杂但容易忽略细节。