本文共 3202 字，大约阅读时间需要 10 分钟。
WebSocket是一种高效的实时通信技术，广泛应用于现代网络应用中。相比传统的Ajax轮询，它通过建立持久连接，显著降低了网络资源的浪费，为双向数据传输提供了更高效的解决方案。
WebSocket具备以下显著特点：
双向通信：与Ajax轮询不同，WebSocket支持全面双向通信，服务器可以主动向客户端推送数据，客户端也能随时向服务器发送消息。
无同源策略限制：WebSocket连接不受浏览器同源策略的限制，客户端可以与任意服务器建立连接。
二进制数据传输：WebSocket默认使用二进制协议，传输效率更高，适合处理大量实时数据。
客户端实现通常包括以下步骤：
function WebSocketTest() { if ("WebSocket" in window) { console.log("您的浏览器支持 WebSocket!"); var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { ws.send("发送数据"); alert("数据发送中..."); }; ws.onmessage = function(evt) { var received_msg = evt.data; alert("数据已接收..."); }; ws.onclose = function() { alert("连接已关闭..."); }; } else { alert("您的浏览器不支持 WebSocket!"); }} 上述代码示例展示了如何在浏览器中创建WebSocket连接，接收和发送数据。ws.onopen回调表示连接成功后发送数据，ws.onmessage回调用于接收服务器发送的消息。
在Node.js环境中，WebSocket的实现通常依赖于第三方库，如Socket.IO或WebSocket-Node。以下是一个使用Socket.IO的简单实现示例：
var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);app.get('/', function(req, res) { res.send('Welcome Realtime Server
');});io.on('connection', function(socket) { console.log('a user connected'); socket.on("disconnect", function() { console.log("a user go out"); }); socket.on("message", function(obj) { io.emit("message", obj); });});http.listen(3000, function() { console.log('listening on *:3000');}); 该代码创建了一个Express服务器，并使用Socket.IO处理WebSocket连接。服务器监听客户端连接，并在用户断开或发送消息时触发相应回调。
WebSocket连接可能因网络波动或服务器问题而断开，为了保持稳定连接，通常采用以下心跳机制：
定期发送ping包：客户端每隔固定时间发送ping包，服务器返回pong确认。这种方式简单易行，但可能导致数据丢失。
智能重连机制：当 WebSocket关闭或报错时，客户端自动重启连接，确保数据传输的连续性。
以下是实现智能重连的代码示例：
class WebSocketClass { constructor(url, msgCallback, name = 'default') { this.url = url; this.msgCallback = msgCallback; this.name = name; this.ws = null; this.status = null; } connect(data) { this.ws = new WebSocket(this.url); this.ws.onopen = e => { this.status = 'open'; console.log(`${this.name}连接成功`, e); if (data !== undefined) { return this.ws.send(data); } }; this.ws.onmessage = e => { return this.msgCallback(e.data); }; this.ws.onclose = e => { this.closeHandle(e); }; this.onerror = e => { this.closeHandle(e); }; } closeHandle(e = 'err') { if (this.status !== 'close') { console.log(`${this.name}断开，重连websocket`, e); this.connect(); } else { console.log(`${this.name}websocket手动关闭`); } } closeMyself() { console.log(`关闭${this.name}`); this.status = 'close'; return this.ws.close(); }}function someFn(data) { console.log('接收服务器消息的回调:', data);}const wsValue = new WebSocketClass('wss://echo.websocket.org', someFn, 'wsName');wsValue.connect();setTimeout(() => { wsValue.sendHandle('传消息给服务器');}, 1000);setTimeout(() => { wsValue.closeMyself();}, 10000); 该实现采用智能重连机制，当WebSocket关闭或出错时，自动重启连接，确保数据传输的稳定性。
转载地址：http://dipo.baihongyu.com/