跨标签页通信(八):WebSocket

跨标签页通信(八):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>

(二)效果

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

三、注意事项

(一)同源限制

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

(二)安全性

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

(三)性能影响

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

相关推荐
PAK向日葵3 小时前
【算法导论】如何攻克一道Hard难度的LeetCode题?以「寻找两个正序数组的中位数」为例
c++·算法·面试
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发4 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码5 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记5 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏5 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante6 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端