WebSocket 在 JavaScript 中的应用：从零到一的实时应用开发

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

WebSocket 在 JavaScript 中的介绍：什么是实时通信？

在现代网络中，用户已经习惯了即时更新：聊天消息无需刷新页面即可送达，股票报价实时变化，在线游戏中对手的动作也能即时可见。这一切都得益于 WebSocket 技术——一种在客户端和服务器之间保持持久双向连接的协议。

与传统的 HTTP 请求（客户端发送请求并等待响应）不同，WebSocket 允许服务器随时主动向客户端发送数据。这为创建 基于 JavaScript 的实时应用 打开了无限可能。在本文中，我们将从基础开始，逐步讲解 WebSocket，直到在 Node.js 上构建一个完整的聊天应用。

WebSocket 基础：协议的工作原理

什么是 WebSocket？它与 HTTP 有何不同？

WebSocket 是一种基于 TCP 的通信协议。它以一个 HTTP 请求（握手）开始，随后连接“升级”为 WebSocket，数据可以在两个方向上传输，无需额外的头部信息。这使得它非常适合对低延迟有要求的应用。

WebSocket 相比传统方法（轮询、长轮询）的主要优势：

持久连接 — 无需为每次更新创建新的 HTTP 请求
低延迟 — 数据一旦在服务器上出现，即可立即传输
节省流量 — 帧大小最小化（仅 2 字节的控制数据）
双向通信 — 服务器可以主动发起数据发送

建立连接：握手

过程始于客户端发送一个包含 Upgrade: websocket 头部的 HTTP 请求。支持 WebSocket 的服务器会响应状态码 101 Switching Protocols。之后，连接即被视为已建立。

// 建立 WebSocket 的 HTTP 请求示例GET /chat HTTP/1.1Host: example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13

在 Node.js 上创建 WebSocket 服务器

安装和配置 ws 库

为了在服务器端使用 WebSocket，我们将使用流行的 ws 库。它轻量、快速，并且完全符合协议规范。

// 安装库// npm install ws

创建一个简单的 WebSocket 服务器：

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {    console.log('新客户端已连接');        ws.on('message', (message) => {        console.log('收到消息:', message.toString());        // 向所有连接的客户端发送响应        wss.clients.forEach((client) => {            if (client.readyState === WebSocket.OPEN) {                client.send(`回声: ${message}`);            }        });    });        ws.send('欢迎来到 WebSocket 服务器！');});

console.log('WebSocket 服务器已在端口 8080 上启动');

在 JavaScript 中连接客户端

在客户端（浏览器）中，使用内置的 WebSocket 对象：

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

socket.onopen = () => {    console.log('连接已建立');    socket.send('你好，服务器！');};

socket.onmessage = (event) => {    console.log('来自服务器的消息:', event.data);};

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

socket.onerror = (error) => {    console.error('WebSocket 错误:', error);};