你是否曾好奇微信网页版为何能即时收到消息？为何在线游戏能实时同步玩家操作？这一切都要归功于一种名为WebSocket的技术。今天，我们就来聊聊这项让网页活起来的技术， 并且会附上示例代码，可以方便的通过html一键打包exe工具打包成一个桌面程序。
网址一键转成桌面程序HTML一键打包EXE程序
什么是WebSocket？
传统的HTTP协议像是写信，发送请求后等待回复，无法实现实时通信。而WebSocket则像是电话连线，一旦建立连接，双方可以随时互发信息，实现真正的实时双向通信。
WebSocket的典型应用场景
1. 即时通讯（微信网页版、在线客服系统）
2. 实时数据展示（实时监控）
3. 多人在线协作（腾讯文档、Google Docs）
4. 在线游戏（多人对战游戏）
5. 实时通知（新邮件、消息提醒）
简易网页聊天室代码
下面我们通过一个简单的聊天室示例，来看看WebSocket在实际中如何应用。
前端代码:
<!DOCTYPE html>
<html>
<head><title>WebSocket聊天室</title><style>#message-container {height: 300px;border: 1px solid #ccc;overflow-y: scroll;padding: 10px;margin-bottom: 10px;}.message {margin: 5px 0;}</style>
</head>
<body><div id="message-container"></div><input type="text" id="message-input" placeholder="输入消息..."><button onclick="sendMessage()">发送</button><script>// 建立WebSocket连接const socket = new WebSocket('ws://localhost:3000');// 连接建立时socket.onopen = function(event) {addMessage('系统', '已连接到聊天室');};// 接收消息socket.onmessage = function(event) {const data = JSON.parse(event.data);addMessage(data.user, data.message);};// 错误处理socket.onerror = function(error) {console.error('WebSocket错误:', error);};// 添加消息到界面function addMessage(user, message) {const container = document.getElementById('message-container');const messageElement = document.createElement('div');messageElement.className = 'message';messageElement.innerHTML = `<strong>${user}:</strong> ${message}`;container.appendChild(messageElement);container.scrollTop = container.scrollHeight;}// 发送消息function sendMessage() {const input = document.getElementById('message-input');const message = input.value.trim();if (message && socket.readyState === WebSocket.OPEN) {socket.send(JSON.stringify({user: '用户', // 实际应用中应该是登录用户名message: message}));input.value = '';}}// 回车发送消息document.getElementById('message-input').addEventListener('keypress', function(e) {if (e.key === 'Enter') {sendMessage();}});</script>
</body>
</html>
服务端代码
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });// 存储所有连接的客户端
const clients = new Set();wss.on('connection', function connection(ws) {clients.add(ws);console.log('新用户连接，当前用户数:', clients.size);// 收到消息时广播给所有客户端ws.on('message', function incoming(message) {console.log('收到消息:', message.toString());// 广播消息给所有客户端clients.forEach(function each(client) {if (client.readyState === WebSocket.OPEN) {client.send(message.toString());}});});// 连接关闭时ws.on('close', function() {clients.delete(ws);console.log('用户断开连接，当前用户数:', clients.size);});
});console.log('WebSocket服务器运行在 ws://localhost:3000');
实现要点解析
1. 建立连接：前端通过new WebSocket(`与服务器建立连接
2. 事件监听：通过onopen、onmessage、onerror等事件处理连接状态
3. 发送数据：使用socket.send()方法发送消息
4. 广播机制：服务器收到消息后转发给所有连接的客户端
总结
WebSocket打破了HTTP协议的限制，为网页应用带来了真正的实时交互能力。从聊天应用到在线协作，从实时数据展示到多人在线游戏，WebSocket正在悄无声息地改变我们的网络体验。