WebSocket实现数据的实时推送

一、简介（什么是WebSocket）
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工（full-duplex）通信，即允许服务器主动发送信息给客户端。因此，在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。

二、数据实时推送的实现方式和应用场景
1.轮询：

    客户端通过代码定时向服务器发送AJAX请求,服务器接收请求并返回响应信息。优点：代码相对简单,适用于小型应用。缺点：在服务器数据没有更新时,会造成请求重复数据,请求无用,浪费带宽和服务器资源。

2.长连接：

    在页面中嵌入一个隐藏的iframe,将这个隐藏的iframe的属性设置为一个长连接的请求或者xrh请求,服务器通过这种方式往客户端输入数据。优点：数据实时刷新,请求不会浪费,管理较简洁。缺点：长时间维护保持一个长连接会增加服务器开销。

3.webSocket：

    websocket是HTML5开始提供的一种客户端与服务器之间进行通讯的网络技术,通过这种方式可以实现客户端和服务器的长连接,双向实时通讯。优点：减少资源消耗;实时推送不用等待客户端的请求;减少通信量;缺点：少部分浏览器不支持，不同浏览器支持的程度和方式都不同。  应用场景：聊天室、智慧大屏、消息提醒、股票k线图监控等。

三、代码实现
后端：
1.pom.xml添加WebSocke依赖

org.springframework.boot spring-boot-starter-websocket 2.WebSocke配置类 
@Configuration
public class WebSocketConfig {/*** 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket  ,如果你使用外置的tomcat就            不需要该配置文件*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}

3.WebSocke服务类

@ServerEndpoint(value = "/webSocket")//主要是将目前的类定义成一个websocket服务器端, 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
@Component
@EnableScheduling// cron定时任务
@Data
public class WebSocket {private static final Logger logger = LoggerFactory.getLogger(WebSocket.class);/*** 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。*/private static int onlineCount = 0;/*** concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。*/private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();/*** 与某个客户端的连接会话，需要通过它来给客户端发送数据*/private Session session;public static CopyOnWriteArraySet<WebSocket> getWebSocketSet() {return webSocketSet;}public static void setWebSocketSet(CopyOnWriteArraySet<WebSocket> webSocketSet) {WebSocket.webSocketSet = webSocketSet;}/*** 从数据库查询相关数据信息,可以根据实际业务场景进行修改*/@Resourceprivate IndexService indexService;private static IndexService indexServiceMapper;@PostConstructpublic void init() {WebSocket.indexServiceMapper = this.indexService;}/*** 连接建立成功调用的方法** @param session 会话*/@OnOpenpublic void onOpen(Session session) throws Exception {this.session = session;webSocketSet.add(this);//查询当前在线人数int nowOnline = indexServiceMapper.nowOnline();this.sendMessage(JSON.toJSONString(nowOnline));}/*** 收到客户端消息后调用的方法** @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, Session session) throws IOException {logger.info("参数信息：{}", message);//群发消息for (WebSocket item : webSocketSet) {try {item.sendMessage(JSON.toJSONString(message));} catch (IOException e) {e.printStackTrace();}}}/*** 连接关闭调用的方法*/@OnClosepublic void onClose() {webSocketSet.remove(this);if (session != null) {try {session.close();} catch (IOException e) {e.printStackTrace();}}}/*** 发生错误时调用** @param session 会话* @param error   错误信息*/@OnErrorpublic void onError(Session session, Throwable error) {logger.error("连接异常！");error.printStackTrace();}/*** 发送信息** @param message 消息*/public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}/*** 自定义消息推送、可群发、单发** @param message 消息*/public static void sendInfo(String message) throws IOException {logger.info("信息:{}", message);for (WebSocket item : webSocketSet) {item.sendMessage(message);}}
}

4.定时任务（为了给前端实时推送数据，我这里写了个定时任务，定时任务我用的是cron表达式,不懂的同学可以上这个网址学习：cron表达式）

@Slf4j
@Component
public class IndexScheduled {@Autowiredprivate IndexMapper indexMapper;/*** 每3秒执行一次*///@Scheduled(cron = "0/3 * * * * ? ") //我这里暂时不需要运行这条定时任务，所以将注解注释了，朋友们运行时记得放开注释啊public void nowOnline() {System.err.println("*********   首页定时任务执行   **************");CopyOnWriteArraySet<WebSocket> webSocketSet = WebSocket.getWebSocketSet();int nowOnline = indexMapper.nowOnline();webSocketSet.forEach(c -> {try {c.sendMessage(JSON.toJSONString(nowOnline));} catch (IOException e) {e.printStackTrace();}});System.err.println("/n 首页定时任务完成.......");}}

前端：
前端的代码非常的简单，直接上代码。

<body class="gray-bg"><div class="online"><span class="online">测试在线人数：<span id="online"></span>&nbsp人</span>
</div><script th:inline="javascript">let websocket = null;let host = document.location.host;//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {//连接WebSocket节点websocket = new WebSocket("ws://" + host + "/webSocket");} else {alert('浏览器不支持webSocket');}//连接发生错误的回调方法websocket.onerror = function () {setMessageInnerHTML("error");};//连接成功建立的回调方法websocket.onopen = function (event) {setMessageInnerHTML("open");};//接收到消息的回调方法websocket.onmessage = function (event) {let data = event.data;console.log("后端传递的数据:" + data);//将后端传递的数据渲染至页面$("#online").html(data);};//连接关闭的回调方法websocket.onclose = function () {setMessageInnerHTML("close");};//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function () {websocket.close();};//将消息显示在网页上function setMessageInnerHTML(innerHTML) {};//关闭连接function closeWebSocket() {websocket.close();};//发送消息function send() {let message = document.getElementById('text').value;websocket.send(message);};</script></body>

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

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

相关文章

FastDDS 安装 foonathan_memory_vendor 找不到 not found

FastDDS 安装 foonathan_memory_vendor 找不到 not found

FastDDS 安装 foonathan_memory_vendor 找不到 cmake -v 3.23.2 git clone https://github.com/eProsima/foonathan_memory_vendor.git cd foonathan_memory_vendor mkdir build && cd build # cmake .. 编译不成功需要替换为如下&#xff1a; cmake -DCMAKE_INSTALL…
阅读更多...
Linux 安装图形界面 “startx”

Linux 安装图形界面 “startx”

———————————————— 报错&#xff0c;如下&#xff1a; bash :startx command not found ———————————————— 解决方法&#xff1a; 1.先安装 — X Windows System&#xff0c;输入以下命令&#xff1a; yum groupinstall “X Window System”…
阅读更多...
盘点2023年低代码平台TOP10

盘点2023年低代码平台TOP10

盘点2023年低代码平台TOP10 1 什么是低代码平台2 十大低代码平台2.1 IVX2.2 简道云2.3 伙伴云2.4 企名片one2.5 明道云2.6 轻流2.7 速融云2.8 轻舟——网易2.9 钉钉宜搭2.10 腾讯云-微搭 1 什么是低代码平台 低代码平台是一种开发软件的方法&#xff0c;它可以通过简单的拖放和…
阅读更多...
【Anaconda】Ubuntu anaconda使用（新建环境、最小化安装Tensorflow）

【Anaconda】Ubuntu anaconda使用（新建环境、最小化安装Tensorflow）

Ubuntu anaconda使用&#xff08;新建环境、最小化安装Tensorflow&#xff09; 清华源地址&#xff1a; https://pypi.tuna.tsinghua.edu.cn/simplepip安装使用的时候&#xff0c; pip install xxx(库名) -i https://pypi.tuna.tsinghua.edu.cn/simple请先安装好anaconda&am…
阅读更多...
Python 递归及目录遍历

Python 递归及目录遍历

递归调用&#xff1a;一个函数&#xff0c;调用了自身&#xff0c;称为递归调用 递归函数&#xff1a;一个会调用自身的函数 凡是循环能做的事&#xff0c;递归都能做。 目录 递归示例 普通方法实现 递归方式实现 计算分析&#xff1a; 递归遍历目录 引入os 遍历目录 执…
阅读更多...
基于SSM的小儿肺炎知识管理系统设计与实现

基于SSM的小儿肺炎知识管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
MobileNet网络

MobileNet网络

介绍 MobileNet 网络专注于移动端或者嵌入式设备中的轻量级CNN网络&#xff0c;相比传统卷积神经网络&#xff0c;在准确率小幅降低的前提下大大减少模型参数与运算量&#xff08;相比VGG16准确率减少了0.9%&#xff0c;但模型参数只有VGG的1/32&#xff09; 网络中的亮点&am…
阅读更多...
Go 语言开发工具

Go 语言开发工具

Go 语言开发工具 VSCode VScode 安装教程参见&#xff1a;https://www.kxdang.com/topic//w3cnote/vscode-tutorial.html 然后我们打开 VSCode 的扩展&#xff08;CtrlShiftP&#xff09;&#xff1a; 搜索 go&#xff1a; 点击安装&#xff0c;安装完成后我们就可以使用代码…
阅读更多...
利用知识付费小程序，我有才打造高效的知识传播渠道

利用知识付费小程序，我有才打造高效的知识传播渠道

在当今信息爆炸的时代&#xff0c;知识管理已经成为了每个人必须面对的问题。然而&#xff0c;市面上的知识付费平台大多数都是通用的&#xff0c;无法满足个性化需求。 因此&#xff0c;我有才提供了一款专属定制的适合个人的知识付费平台。核心产品能力如下&#xff1a; 一…
阅读更多...
spingboot生产环境启动异常处理：Could not initialize ValueExtractorManager

spingboot生产环境启动异常处理：Could not initialize ValueExtractorManager

今天在做将本地的springboot项目通过docker的方式部署到生产环境的工作时&#xff0c;发现docker下的jar包启动后包下面异常&#xff0c;经过网上调研&#xff0c;一开始都是说是包冲突之类的文章&#xff0c;尝试添加相关包未解决。后又遇到说是tomcat版本问题&#xff0c;觉得…
阅读更多...
Java：TCP 通信方法（基本发送 + 接收）并 实现文件传输且反馈

Java：TCP 通信方法（基本发送 + 接收）并 实现文件传输且反馈

TCP 通信编程 TCP:是一种可靠的网络协议&#xff0c;再通信两端都建立一个Socket对象。 通信之前要保证连接已经建立。 通过Socket产生IO流进行通信。 创建对象时&#xff0c;会连接服务器&#xff0c;连接不上&#xff0c;会报错。 所以&#xff0c;先运行服务端&#xff0c;再…
阅读更多...
6大最佳目标进度管理软件盘点——团队/个人

6大最佳目标进度管理软件盘点——团队/个人

在当今快节奏的生活和工作中&#xff0c;有效地管理目标和任务对于每个人来说都至关重要。在工作中&#xff0c;我们需要清晰地规划项目目标、安排任务和追踪进度&#xff1b;在生活中&#xff0c;我们也需要合理安排时间、记录重要事项以及追踪个人目标的实现进度。为了更好地…
阅读更多...
【Maven技术专题】「知识盲区」教你如何使用深入分析Maven配置私服仓库的使用指南（基础篇）

【Maven技术专题】「知识盲区」教你如何使用深入分析Maven配置私服仓库的使用指南（基础篇）

Maven私服的使用实战 将内部构件部署到私服仓库什么是仓库和仓库组远程仓库的定义仓库定义基本结构仓库结构的属性介绍 部署部件到远程仓库远程仓库的认证用户名密码认证案例参考 私钥进行鉴权 镜像mirror镜像仓库的工作原理 将内部构件部署到私服仓库 如果想先学好什么如何将…
阅读更多...
云原生周刊：Kubernetes v1.29 新特性一览 ｜ 2023.12.11

云原生周刊：Kubernetes v1.29 新特性一览 ｜ 2023.12.11

开源项目推荐 kubedog Kubedog 是一个用于在 CI/CD 部署管道中监视和跟踪 Kubernetes 资源的库。 这个库被用于 werf CI/CD 工具中&#xff0c;在部署过程中跟踪资源。 RunWhen Local runwhen-local 是一个工具&#xff0c;用于在本地环境中运行 runwhen 脚本。runwhen 是…
阅读更多...
vue面试题总结

vue面试题总结

Vuex和redux有什么区别&#xff1f;他们的共同思想是什么&#xff1f; Vuex 和 Redux 都是用于管理状态的状态管理库&#xff0c;它们在不同的前端框架中有着相似的思想&#xff0c;但也有一些关键的区别。 区别&#xff1a; 框架依赖&#xff1a; Vuex 是为 Vue.js 框架设计…
阅读更多...
完爆MyBatis-Plus？来领略一下 MyBatis-Flex 的优雅魅力！

完爆MyBatis-Plus？来领略一下 MyBatis-Flex 的优雅魅力！

目录 一、Mybatis-Flex的有什么特点&#xff1f; 二、Mybatis-Flex和同类框架对比 2.1、功能对比 2.2、性能对比 三、Mybatis-Flex支持的数据库类型 四、Mybatis-Flex快速入门 Mybatis-Flex 是一个优雅的 Mybatis 增强框架&#xff0c;它非常轻量、同时拥有极高的性能与灵…
阅读更多...
Golang WebView：打造跨平台的桌面应用

Golang WebView：打造跨平台的桌面应用

引言 随着互联网的发展和智能设备的普及&#xff0c;Web应用成为了主流的应用开发方式之一。然而&#xff0c;有些场景下仍然需要使用桌面应用来满足特定的需求。为了结合Web技术和桌面应用的优势&#xff0c;Golang提供了一种名为"WebView"的库&#xff0c;它可以帮…
阅读更多...
AMEYA360：海康存储PCIe4.0固态硬盘A4000介绍

AMEYA360：海康存储PCIe4.0固态硬盘A4000介绍

海康存储即将发布PCIe4.0固态硬盘新品A4000&#xff0c;搭载全新定制主控及高品质3D NAND闪存颗粒&#xff0c;最大顺序读取速度达7100MB/s&#xff0c;提供五年质保服务。 2022年&#xff0c;海康存储开始在PCIe 4.0固态硬盘领域全面发力&#xff0c;推出C4000 ECO、C4000等多…
阅读更多...
【虹科干货】关于JSON数据库

【虹科干货】关于JSON数据库

文章速览&#xff1a; 什么是JSON什么是JSON数据库JSON数据库的显著优势关于JSON数据库的Q&A 如何理解JSON数据库&#xff1f;作为NoSQL数据库的一种类型&#xff0c;JSON数据库有哪些优势呢&#xff1f;JSON数据库如何运作&#xff0c;它为应用程序开发者带来了哪些价值呢…
阅读更多...
【OpenVINO】使用OpenVINO实现 RT-DETR 模型 INT8量化推理加速

【OpenVINO】使用OpenVINO实现 RT-DETR 模型 INT8量化推理加速

使用OpenVINO实现 RT-DETR 模型 INT8量化推理加速 1. 使用 OpenVINO 实现 RT-DETR 模型 INT8量化1.1 神经网络压缩框架 &#xff08;NNCF&#xff09;1.2 准备校准数据集1.2.1 下载COCO验证数据集1.2.2 Validator包装器1.2.3 转换用于量化的数据集 1.3 定义模型精度校验方法1.4…
阅读更多...
最新文章

Copyright @ 2022~2023