介绍
- 多屏同显：通过在一个应用上进行操作之后，另一个应用也能跟着一起发生改变，例如app1播放了晴天这首音乐，那么app2也要同步播放这首音乐，确保所有屏幕显示的内容完全相同。
- 多屏异显：每个屏幕可以显示不同的内容，或者在内容更新时存在一定的延迟，而不需要严格保持同步。
实现方案
可以使用WebSocket全双工通信来进行数据的实时传递，延迟低。
WebSocket和Socket对比：
- WebSocket：
- 用途：WebSocket 是一种在 Web 应用程序中实现实时双向通信的协议。它允许客户端和服务器之间建立持久性的连接，并且可以在任何时候双向传输数据，而不需要客户端发起请求。
- 特点：
- 全双工通信: WebSocket 支持全双工通信，客户端和服务器可以同时发送和接收数据。
- 低延迟: WebSocket 建立在 TCP 连接之上，因此具有低延迟的特点，适用于实时通信场景。
- 协议层封装: WebSocket 协议在 HTTP 协议之上建立了自己的通信协议，允许在相同的连接上进行数据交换。
- 适用场景: 适用于需要实时双向通信的 Web 应用程序，如在线游戏、聊天应用、实时数据展示等。
- Socket：
- 用途：Socket 是一种在网络中进行通信的抽象概念，它可以用于各种不同的场景和协议，包括 TCP 和 UDP。
- 特点：
- 灵活性: Socket 提供了灵活的编程接口，可以进行各种类型的网络通信，包括单向和双向通信。
- 面向连接: TCP Socket 是面向连接的，需要在客户端和服务器之间建立连接后才能进行通信，而 UDP Socket 则是无连接的。
- 直接操作网络层: Socket 允许直接操作网络层的数据传输，可以更灵活地控制数据的传输和处理。
- 适用场景: 适用于需要直接操作网络层或进行低级别网络通信的应用程序，如网络服务器、P2P 应用、实时音视频传输等。
流程图
业务流程图
时序图
代码实现
WebSocket官网：https://github.com/websockets/ws
自定义请求体：
{
ips:[],
data:null
}
上述的ips是一个ip数组，服务器根据遍历每个ip将数据data转发到对应的应用中，从而实现多屏同显和异显
创建WebSocket服务器
主要用来监听、处理请求。
初始化npm项目
npm init -y
安装ws依赖
npm install ws
目录结构
index.js
const WebSocket = require('ws');
// 创建 WebSocket 服务器监听在 8080 端口
const wss = new WebSocket.Server({
port: 8081
});
// 用于存储所有连接的客户端
const clients = [];
// 防止重复连接
const ipSet = new Set();
// 当有客户端连接时
wss.on('connection', function connection(ws, req) {
// 获取客户端http://host:ip
const origin = req.headers.origin;
// 判断set中是否存在该客户端
if (!ipSet.has(origin)) {
ipSet.add(origin);
console.log('client connected', origin);
// 将origin赋值给ws的ip，后面转发数据要用
ws.ip = origin;
clients.push(ws);
console
