HTML一键打包EXE工具中使用Websocket
你是否曾好奇微信网页版为何能即时收到消息？为何在线游戏能实时同步玩家操作？这一切都要归功于一种名为WebSocket的技术。今天，我们就来聊聊这项让网页活起来的技术， 并且会附上示例代码，可以方便的通过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正在悄无声息地改变我们的网络体验。
浙公网安备 33010602011771号