JavaScript中的WebSockets：从零构建实时应用

JavaScript中的WebSockets：当“鲜活”的网站不再是魔法，而是代码

您是否曾思考过在线聊天、实时股票行情或多人在线浏览器游戏是如何工作的？秘诀简单而优雅——JavaScript中的WebSockets。这项技术将静态网站转变为一个能即时响应其他用户操作的活体有机体。

在本文中，我们不仅会剖析理论。我们将从零编写一个真正的聊天应用，学习如何处理错误，并理解为什么基于WebSockets的实时应用比老旧的AJAX轮询方式运行得更快。系好安全带——精彩即将开始。

为什么HTTP不适合实时通信？（简要科普）

普通的HTTP遵循“请求-响应”模式。客户端请求——服务器响应。如果服务器想主动发送消息（例如“新消息来了”），它必须等待客户端再次发起请求。这就像用信鸽通信——缓慢且低效。

开发者们曾想出各种变通方法：

\n
• 轮询——客户端每5秒询问服务器：“嘿，有什么新消息吗？”
\n
• 长轮询——服务器保持连接打开，直到有响应（但这仍然是单向通道）。
\n

这时，WebSockets登场了。想象一下，您在浏览器和服务器之间打开了一条电话线路。双方可以随时、同时通话，无需等待“拿起听筒”。这就是JavaScript WebSocket API的魔力所在。

WebSocket的工作原理：协议、握手、消息

从技术上讲，WebSocket是一个独立的协议（ws://用于未加密连接，wss://用于加密连接）。一切始于HTTP握手：

\n
1. 客户端发送一个普通的HTTP请求，包含头部 Upgrade: websocket。
\n
2. 服务器响应：“101 Switching Protocols”——连接“升级”为WebSocket。
\n
3. 之后便是全双工通信：数据以帧的形式（文本或二进制数据）双向传输。
\n

在浏览器中，使用内置的 WebSocket 对象来处理WebSocket。无需任何额外库——纯JavaScript WebSocket在所有现代浏览器中开箱即用。

用JavaScript编写第一个实时聊天应用

让我们创建一个简单的聊天应用。服务器端使用Node.js和 ws 库（WebSocket Node.js 中最流行的库），客户端使用纯JavaScript。

第1步：安装服务器

npm init -y\nnpm install ws

第2步：服务器端代码 (server.js)

const WebSocket = require('ws');\n\nconst wss = new WebSocket.Server({ port: 8080 });\n\nwss.on('connection', function connection(ws) {\n    console.log('新用户已连接');\n\n    // 向新客户端发送欢迎消息\n    ws.send(JSON.stringify({\n        type: 'system',\n        message: '欢迎加入聊天！'\n    }));\n\n    // 接收来自客户端的消息\n    ws.on('message', function incoming(data) {\n        const message = JSON.parse(data);\n        console.log('收到:', message);\n\n        // 向所有已连接的客户端广播消息\n        wss.clients.forEach(function each(client) {\n            if (client.readyState === WebSocket.OPEN) {\n                client.send(JSON.stringify({\n                    type: 'message',\n                    user: message.user,\n                    text: message.text,\n                    time: new Date().toLocaleTimeString()\n                }));\n            }\n        });\n    });\n\n    // 处理断开连接\n    ws.on('close', function() {\n        console.log('用户已断开连接');\n    });\n});\n\nconsole.log('服务器已启动于 ws://localhost:8080');

第3步：客户端