sysend.js 使用教程

2026-01-20 01:54:14作者：邬祺芯Juliet

Web application synchronization between different tabs

项目地址：https://gitcode.com/gh_mirrors/sy/sysend.js

1. 项目介绍

sysend.js 是一个轻量级的 JavaScript 库，用于在同一浏览器中打开的不同页面之间发送消息。它支持跨域通信，并且不需要任何依赖项。sysend.js 利用 HTML5 的 LocalStorage API 或 BroadcastChannel API 来实现消息传递。该库适用于需要在同一浏览器中同步数据的场景，例如多标签页之间的数据同步、表单数据的唯一操作限制等。

2. 项目快速启动

安装

你可以通过 npm 或 bower 安装 sysend.js：

npm install sysend

或者

bower install sysend

你也可以直接从 CDN 引入：

<script src="https://unpkg.com/sysend@1.15.0/sysend.js"></script>

使用示例

以下是一个简单的示例，展示如何在两个页面之间发送和接收消息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sysend.js 示例</title>
    <script src="https://unpkg.com/sysend@1.15.0/sysend.js"></script>
</head>
<body>
    <input id="input" autocomplete="off" />
    <button id="send">发送消息</button>
    <script>
        // 监听消息
        sysend.on('message', function(data) {
            console.log('收到消息:', data.message);
        });

        // 发送消息
        document.getElementById('send').addEventListener('click', function() {
            var message = document.getElementById('input').value;
            sysend.broadcast('message', { message: message });
        });
    </script>
</body>
</html>

在这个示例中，当用户点击“发送消息”按钮时，输入框中的内容将被发送到所有打开的页面，并在控制台中显示收到的消息。

3. 应用案例和最佳实践

应用案例

多标签页数据同步：在多个标签页之间同步数据，确保用户在不同标签页中看到的数据一致。
表单数据唯一操作：限制用户在同一时间只能在一个标签页中操作表单数据，防止数据冲突。
跨域通信：在不同域名之间进行消息传递，实现跨域的数据同步。

最佳实践

使用 track 方法：sysend.track 方法可以用于跟踪窗口或标签页的打开和关闭事件，适用于需要动态管理多个窗口的场景。
跨域通信：在进行跨域通信时，确保目标域名支持 proxy.html 文件，并在目标页面中调用 sysend.proxy 方法。
安全性：在跨域通信时，使用 sysend.channel 方法限制允许通信的域名，以提高安全性。

4. 典型生态项目

sysend.js 可以与其他前端框架和库结合使用，例如：

React：在 React 应用中使用 sysend.js 实现多标签页之间的数据同步。
Vue.js：在 Vue.js 应用中使用 sysend.js 实现跨标签页的状态管理。
Angular：在 Angular 应用中使用 sysend.js 实现多窗口之间的通信。

通过结合这些框架，sysend.js 可以更好地满足复杂应用中的数据同步需求。

Web application synchronization between different tabs

项目地址：https://gitcode.com/gh_mirrors/sy/sysend.js

登录后查看全文

项目优选

收起

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

flutter_flutter

Oohos_react_native

React Native鸿蒙化仓库

昇腾LLM分布式训练框架

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统