WebSocket 多屏同显和异显

news2025/1/14 1:23:59

介绍

多屏同显：通过在一个应用上进行操作之后，另一个应用也能跟着一起发生改变，例如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