WebSocket 多屏同显和异显

介绍

  • 多屏同显:通过在一个应用上进行操作之后,另一个应用也能跟着一起发生改变,例如app1播放了晴天这首音乐,那么app2也要同步播放这首音乐,确保所有屏幕显示的内容完全相同。
  • 多屏异显:每个屏幕可以显示不同的内容,或者在内容更新时存在一定的延迟,而不需要严格保持同步。

实现方案

可以使用WebSocket全双工通信来进行数据的实时传递,延迟低。
WebSocket和Socket对比:

  1. WebSocket:
  • 用途:WebSocket 是一种在 Web 应用程序中实现实时双向通信的协议。它允许客户端和服务器之间建立持久性的连接,并且可以在任何时候双向传输数据,而不需要客户端发起请求。
  • 特点:
    • 全双工通信: WebSocket 支持全双工通信,客户端和服务器可以同时发送和接收数据。
    • 低延迟: WebSocket 建立在 TCP 连接之上,因此具有低延迟的特点,适用于实时通信场景。
    • 协议层封装: WebSocket 协议在 HTTP 协议之上建立了自己的通信协议,允许在相同的连接上进行数据交换。
  • 适用场景: 适用于需要实时双向通信的 Web 应用程序,如在线游戏、聊天应用、实时数据展示等。
  1. 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

目录结构

image.png

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:ipconst 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/6323.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

专业渗透测试 Phpsploit-Framework(PSF)框架软件小白入门教程(四)

本系列课程,将重点讲解Phpsploit-Framework框架软件的基础使用! 本文章仅提供学习,切勿将其用于不法手段! 继续接上一篇文章内容,讲述如何进行Phpsploit-Framework软件的基础使用和二次开发。 当我们牢记登陆账户、…

题目:线性代数

问题描述: 解题思路: 列相乘,然后行相加。 注意点:由于元素数据范围最大为1e6,两个元素相乘乘积最大为1e12,如果元素类型为int则在乘的过程中就会爆炸,所以需要开long long类型。 AC代码…

Redis---------分布式锁Redisson

概述 Redisson入门 第一步&#xff1a;引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.13.6</version></dependency> 第二步&#xff1a;配置文件 import org.redisson…

MapReduce概述

批处理模式 首先我们需要先了解一个概念&#xff1a;批处理模式 批处理模式是一种最早进行大规模数据处理的模式。 批处理非常适合需要访问整个数据集合才能完成的计算工作。 批处理主要操作大规模静态数据集,并在整体数据处理完毕后返回结果。 例如,在计算总数和平均数时,必须…

基于小程序实现的投票评选系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

MySQL①——数据库与表格的创建

今日任务&#xff1a; 创建一个名为“db_classes”的数据库 创建一行名为“db_hero”的表 将四大名著中的常见人物插入这个英雄表 数据库的创建与删除 create 命令&#xff08;创建&#xff09;&#xff1a; create database 数据库名&#xff1b;#参数默认create database …

制冷用气液分离器介绍

一、什么是气液分离器&#xff1f; 制冷系统作为一个整体除了四大件&#xff08;压缩机、冷凝器、节流装置、蒸发器&#xff09;以外还有很多附属部件&#xff0c;如今天要介绍的——气液分离器。 什么是气液分离器&#xff1f; 汽液分离器的主要作用是&#xff1a;在启动、…

WAAP动态安全解决方案

随着企业数字化进程不断加速&#xff0c;应用安全面临多重威胁&#xff0c;新型攻击方式层出不穷&#xff0c;常见的攻击形式包括Web应用攻击、DDoS攻击、API攻击、恶意爬虫攻击等。企业正面临严峻的安全防护挑战&#xff0c;需寻找一个可靠、全面的安全解决方案。在此情况下&a…

指标完成情况对比查询sql

指标完成情况对比查询sql 1. 需求 2. SQL select--部门dept.name as bm,--年度指标任务-新签&#xff08;万元&#xff09;ndzbwh.nxqndzbrw as nxqndzbrw,--年度指标任务-收入&#xff08;万元&#xff09;ndzbwh.nsrndzbrw as nsrndzbrw,--年度指标任务-回款&#xff08;万…

buuctf-misc-27.面具下的flag

27.面具下的flag 题目&#xff1a;binwalk分离后&#xff0c;解压vmdk文件,对其中的字符进行翻译 将其放到kali中进行binwalk,可以看到有有隐藏的压缩包文件&#xff0c;我们提取一下 文件放到了主目录下&#xff0c;我们使用对应命令发现有zip文件&#xff0c;然后再使用对应…

Linux POSIX消息队列遇到的问题和使用方法

目录 一、开发环境及消息队列介绍二、问题描述三、解决办法四、测试代码 一、开发环境及消息队列介绍 开发板&#xff1a;nuc980 1.ARM Linux中消息队列的原理   在ARM Linux中&#xff0c;消息队列是通过POSIX&#xff08;Portable Operating System Interface&#xff09…

C++仿函数周边及包装器

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

ASP.NET网络在线考试系统

摘 要 随着计算机技术的发展和互联网时代的到来&#xff0c;人们已经进入了信息时代&#xff0c;也有人称为数字化时代。数在数字化的网络环境下&#xff0c;学生希望得到个性化的满足&#xff0c;根据自己的情况进行学习&#xff0c;同时也希望能够得到科学的评价&#xff0c…

小红书爬虫GUI软件 | API接口封装 | 根据笔记链接批量采集笔记详情,含笔记正文内容、发布时间、转评赞藏等

一、背景介绍 1.1 爬取目标 我用python开发的采集软件&#xff0c;可自动按笔记链接抓取笔记的详情数据。 为什么有了源码还开发界面软件呢&#xff1f;方便不懂编程代码的小白用户使用&#xff0c;无需安装python&#xff0c;无需改代码&#xff0c;双击打开即用&#xff0…

pytorch笔记:ModuleDict

1 介绍 在 PyTorch 中&#xff0c;nn.ModuleDict 是一个方便的容器&#xff0c;用于存储一组子模块&#xff08;即 nn.Module 对象&#xff09;的字典这个容器主要用于动态地管理多个模块&#xff0c;并通过键来访问它们&#xff0c;类似于 Python 的字典 2 特点 组织性 nn…

恶补《操作系统》4_2——王道学习笔记

4.1_5 文件存储空间管理 1、存储空间的划分与初始化 文件卷&#xff08;逻辑卷&#xff09;的概念目录区与文件区 2、几种管理方法 空闲表法&#xff1a;首位置长度&#xff0c;回收时注意修改空闲链表法&#xff08;空闲盘块链、空闲盘区链&#xff09;位示图法 成组链接法…

深度学习500问——Chapter08:目标检测(6)

文章目录 8.3.7 RetinaNet 8.3.7 RetinaNet 研究背景 Two-Stage 检测器&#xff08;如Faster R-CNN、FPN&#xff09;效果好&#xff0c;但速度相对慢。One-Stage 检测器&#xff08;如YOLO、SSD&#xff09;速度快&#xff0c;但效果一般。 作者对one-stage检测器准确率不高…

视频编辑软件pitivi基本功之将三个相关视频合并成一个视频

视频编辑软件pitivi基本功之将三个相关视频合并成一个视频 一、素材来源&#xff1a;网站下载 到http://cpc.people.com.cn/GB/67481/435238/437822/437828/437900/index.html下载以下三个视频&#xff0c;鼠标右击视频——另存视频为 庆祝中国共产党成立100周年大会即将开始—…

基于yolov8的苹果腐败检测系统,系统既支持图像检测,也支持视频和摄像实时检测(pytorch框架)【python源码+UI界面+功能源码详解】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; 基于yolov8的苹果腐败检测系统&#xff0c;系统既支持图像检测&#xff0c;也支持视频和摄像实时检测_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于yolov8的苹果腐败检测系统是在pytorc…

设计模式之组合实体模式

在编程的奇幻森林里&#xff0c;树木与枝叶错综复杂&#xff0c;如何让代码世界井然有序&#xff1f;组合实体模式&#xff08;Composite Pattern&#xff09;就像一位高明的园艺师&#xff0c;它以一种巧妙的方式&#xff0c;将个体与整体统一管理&#xff0c;让无论是单个对象…