本文共 3202 字，大约阅读时间需要 10 分钟。

WebSocket技术详解

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回调用于接收服务器发送的消息。

WebSocket的后台实现（Node.js）

在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客户端心跳机制

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/