跨标签页通信（八）：WebSocket

在现代 Web 开发中，跨标签页通信的需求越来越普遍。无论是实现多标签页之间的数据同步，还是构建实时协作功能，跨标签页通信都能极大地提升用户体验。今天，我们将探讨一种高效且强大的实现方式：WebSocket。

一、什么是 WebSocket？

WebSocket 是一种网络通信协议，提供了全双工通信通道，允许客户端和服务器之间进行实时、双向的数据交换。WebSocket 协议在 2008 年诞生，2011 年成为国际标准，所有现代浏览器都已支持。

（一）特点

全双工通信：客户端和服务器可以同时发送和接收消息。
低延迟：相比传统的 HTTP 请求，WebSocket 的通信延迟更低。
双向通信：服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送消息。

（二）适用场景

实时通信：如聊天应用、实时协作工具等。
数据同步：在多个标签页之间同步数据。
游戏：需要低延迟的实时交互。

二、使用 WebSocket 实现跨标签页通信

（一）基本用法

WebSocket 的基本用法包括创建连接、发送消息和接收消息。以下是一个简单的示例：

1. 创建 WebSocket 服务器

使用 Node.js 创建一个 WebSocket 服务器，监听客户端的连接和消息。

javascript 复制代码

// server.js
const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 3000 });
const clients = [];

wss.on('connection', (client) => {
    clients.push(client);
    console.log(`有 ${clients.length} 个客户端在线`);

    client.on('message', (msg) => {
        console.log(`收到消息: ${msg}`);
        clients.forEach((c) => {
            if (c !== client) {
                c.send(msg);
            }
        });
    });

    client.on('close', () => {
        const index = clients.indexOf(client);
        clients.splice(index, 1);
        console.log(`有 ${clients.length} 个客户端在线`);
    });
});

console.log('WebSocket 服务器已启动');

2. 创建 WebSocket 客户端

在页面中创建 WebSocket 客户端，连接到服务器并发送/接收消息。

页面一：发送消息

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面一</title>
</head>
<body>
    <input type="text" id="msg" placeholder="请输入消息">
    <button id="send">发送消息</button>
    <script>
        const ws = new WebSocket("ws://localhost:3000");
        const send = document.querySelector("#send");
        const msg = document.querySelector("#msg");

        send.onclick = function () {
            if (msg.value.trim() !== "") {
                ws.send(msg.value.trim());
            }
        };

        window.onbeforeunload = function () {
            ws.close();
        };
    </script>
</body>
</html>

页面二：接收消息

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面二</title>
</head>
<body>
    <script>
        const ws = new WebSocket("ws://localhost:3000");
        let count = 1;

        ws.onopen = function () {
            ws.onmessage = function (event) {
                const oP = document.createElement("p");
                oP.innerHTML = `第${count}次接收到的消息：${event.data}`;
                document.body.appendChild(oP);
                count++;
            };
        };

        window.onbeforeunload = function () {
            ws.close();
        };
    </script>
</body>
</html>

（二）效果

打开两个标签页，分别加载页面一和页面二。
在页面一中输入消息并点击"发送消息"按钮。
页面二会立即接收到消息，并在页面上显示。

三、注意事项

（一）同源限制

虽然 WebSocket 支持跨域通信，但为了安全起见，建议确保客户端和服务器的协议、域名和端口一致。

（二）安全性

在生产环境中，建议使用 wss://（WebSocket Secure）来加密通信，确保数据的安全性。

（三）性能影响

虽然 WebSocket 的性能开销较小，但在高频率发送消息时，仍需注意对性能的影响。合理控制消息的发送频率可以避免不必要的性能问题。