当前位置：首页 > news >正文

WebSocket（WS）协议系列（二）事件机制

news 来源：原创 2025/5/15 13:02:04

通讯双方怎么知道对方什么时候会发消息过来并接收的，是通过轮询吗？

轮询是指客户端定期向服务器发送请求，检查是否有新的数据（即客户端不断发起请求）。

就是你的舔狗，每天定时定点发消息问你，在吗？睡了吗？看电影吗？检查你是否有想和ta说话的意愿。你说话了，就是有新的数据，ta就get到了。

WebSocket不使用传统的轮询机制，它通过事件驱动的方式处理消息的接收和发送。而WebSocket连接在建立后是持久的，并且是双向的，意味着服务器可以主动向客户端发送数据，客户端也可以主动发送数据，两者之间的通信是即时的。

与轮询相比，WebSocket的优势在于：

低延迟：消息在需要时即时发送，而不需要等待周期性的请求。

我想和你看电影，不等你周期性地来问，直接马上打电话和你说。

减少带宽消耗：不需要不断发送请求来检查新数据。
双向通信：双方都可以主动发送数据，而不只是客户端向服务器请求。

我们两个的交流有来有往，不是一方在主导。你想和我看电影，也可以直接马上打电话说。

什么是事件机制？

事件机制是一种编程模型，通常用于处理异步事件。在这种模型中，程序不会一直轮询或等待某个任务的完成，而是当某个事件发生时，系统会自动触发特定的处理函数（通常被称为回调函数）来响应这个事件。

WebSocket如何实现事件机制？

WebSocket实现事件机制的核心就是基于回调函数和事件监听器。在JavaScript等语言中，WebSocket对象通过定义一些内置的事件和回调函数来处理这些事件。

WebSocket的事件机制包括以下常见事件：

onopen（连接打开事件）：这个事件在WebSocket连接成功建立时触发。通常你会在这个事件里写一些初始化代码。

onmessage（消息接收事件）：这个事件在从服务器接收到数据时触发。它的回调函数会收到一个包含服务器发送消息的事件对象。

onclose（连接关闭事件）：当WebSocket连接关闭时，onclose事件被触发。这个事件常用于处理连接断开后的逻辑，比如重新连接或者清理资源。

onerror（错误事件）：如果WebSocket连接发生错误，这个事件会被触发。它通常用于处理错误恢复或记录日志等操作。

// 创建WebSocket对象
const socket = new WebSocket('ws://example.com/socket');

// 监听连接打开事件
socket.onopen = function(event) {
    console.log("WebSocket连接已建立");
    // 连接成功后可以开始发送消息
    socket.send("Hello Server!");
};

// 监听消息接收事件
socket.onmessage = function(event) {
    console.log("收到来自服务器的消息: " + event.data);
};

// 监听连接关闭事件
socket.onclose = function(event) {
    console.log("WebSocket连接已关闭");
};

// 监听错误事件
socket.onerror = function(event) {
    console.log("WebSocket发生错误");
};

socket.onopen、socket.onmessage、socket.onclose 和 socket.onerror 都是事件处理函数（也叫回调函数）。这些函数会在对应事件发生时自动被调用。

回调函数的参数：事件回调函数通常会接收一个事件对象作为参数，例如onmessage事件接收到的event对象包含了消息内容（如event.data）。

例子：

WebSocket 服务器代码

// 引入ws库
const WebSocket = require('ws');

// 创建一个WebSocket服务器，监听在8080端口
const wss = new WebSocket.Server({ port: 8080 });

// 当有客户端连接时，触发 'connection' 事件
wss.on('connection', (ws) => {
    console.log('一个客户端已连接');
    
    // 监听客户端发送过来的消息
    ws.on('message', (message) => {
        console.log('收到客户端消息: %s', message);
        // 发送响应给客户端
        ws.send('服务器收到消息: ' + message);
    });

    // 监听客户端断开连接的事件
    ws.on('close', () => {
        console.log('客户端已断开连接');
    });

    // 监听发生错误的事件
    ws.on('error', (err) => {
        console.log('发生错误: ', err);
    });

    // 向客户端发送欢迎消息
    ws.send('欢迎连接到WebSocket服务器!');
});

console.log('WebSocket服务器已经启动，监听端口 8080');

连接到 WebSocket 服务器（客户端代码）

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');

// 监听连接成功事件
socket.onopen = function() {
    console.log('成功连接到服务器');
    // 向服务器发送消息
    socket.send('Hello, server!');
};

// 监听接收到的消息
socket.onmessage = function(event) {
    console.log('收到来自服务器的消息:', event.data);
};

// 监听连接关闭事件
socket.onclose = function() {
    console.log('连接已关闭');
};

// 监听错误事件
socket.onerror = function(error) {
    console.error('WebSocket 发生错误:', error);
};