WebSocket

2025年01月19日

柏拉文

越努力，越幸运

一、认识

---

标签页通过同一个 WebSocket 连接服务器，由服务器中转消息。

二、实现

---

2.1 发布消息

Node.js 创建 WebSocket Server

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        // 广播消息给所有客户端
        wss.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

Web 客户端链接 WebSocket Server

const ws = new WebSocket('ws://localhost:8080');

// 接收消息
ws.onmessage = (event) => {
    console.log('Received message:', event.data);
};

// 发送消息
ws.send(JSON.stringify({ text: 'Hello, Tabs!' }));

2.2 接收消息

Node.js 创建 WebSocket Server

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        // 广播消息给所有客户端
        wss.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

Web 客户端链接 WebSocket Server

const ws = new WebSocket('ws://localhost:8080');

// 接收消息
ws.onmessage = (event) => {
    console.log('Received message:', event.data);
};

// 发送消息
ws.send(JSON.stringify({ text: 'Hello, Tabs!' }));