JavaScript 上的 WebSocket：使用 Node.js 构建实时应用

WebSocket 在 JavaScript 中的应用：基于 Node.js 构建实时应用

现代网络要求即时响应。用户期望聊天消息在毫秒内送达，股票报价无需刷新页面即可更新，通知能够实时推送。WebSocket 技术通过 JavaScript 实现了这一目标，在客户端和服务器之间建立持久化的双向连接。本文将介绍如何在 Node.js 环境中使用 WebSocket，构建快速且可扩展的实时应用。

什么是 WebSocket，为何需要它？

传统的 HTTP 协议遵循"请求-响应"模式：客户端发送请求，服务器响应，连接随即关闭。为了获取新数据，客户端必须不断轮询（polling）服务器，或使用长连接（long polling）。这种方式效率低下，会造成额外负载并增加延迟。

WebSocket（RFC 6455）是一种通过单一 TCP 通道建立持久化双工连接的协议。经过 HTTP 握手后，服务器和客户端可以随时互发数据，无需额外头部信息。这使得 WebSocket 成为以下场景的理想解决方案：

• 聊天应用和即时通讯
• 在线游戏和协同编辑
• 股票报价和金融仪表盘
• 推送通知和监控系统
• 流式数据传输（物联网、日志）

在 Node.js 上安装和配置 WebSocket 服务器

在服务端使用 WebSocket，我们将采用 ws 库——这是 Node.js 最流行且可靠的实现。通过 npm 安装：

npm install ws

创建一个简单的 WebSocket 服务器。首先导入模块并在 8080 端口创建服务器实例：

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {    console.log('新客户端已连接');

    // 向客户端发送欢迎消息    ws.send('欢迎来到 WebSocket 服务器！');

    // 处理接收到的消息    ws.on('message', function incoming(message) {        console.log('收到消息: %s', message);        // 向所有已连接的客户端发送回复        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`回声: ${message}`);            }        });    });

    // 处理客户端断开连接    ws.on('close', function close() {        console.log('客户端已断开');    });

    // 处理错误    ws.on('error', function error(err) {        console.error('WebSocket 错误:', err);    });});

console.log('WebSocket 服务器已启动于 ws://localhost:8080');

这段代码创建了一个简单的回声服务器：客户端发送的任何消息都会广播给所有已连接的用户。注意 readyState 检查——它确保我们不会尝试向已关闭的连接发送数据。

浏览器端的 WebSocket 客户端实现

在客户端（浏览器）中，WebSocket 是内置对象，无需额外库。连接到我们的服务器并实现一个简单的聊天功能：

// 创建 WebSocket 连接const socket = new WebSocket('ws://localhost:8080');

// 连接建立事件处理socket.addEventListener('open', function (event) {    console.log('连接已建立');    socket.send('你好，服务器！');});

// 消息接收事件处理socket.addEventListener('message', function (event) {    const messagesDiv = document.getElementById('messages');    const messageElement = document.createElement('div');