位置: IT常识 - 正文

websocket前后端数据实时更新(前端+后端)(websocket前端vue)

编辑:rootadmin
做的项目中需要将后端提供的数据展示在前端页面,一开始我是用JS的setInterval()方法,设置一个时间,每过时间发起一次ajax请求。虽然也能凑活着实现,但总感觉数据不是实时刷新的,而且还占用资源,所以学习WebSocke,并总结了一下,以下是本人总结的前后端WebSocke相关代码: 一、后 ...

推荐整理分享websocket前后端数据实时更新(前端+后端)(websocket前端vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:websocket向前端发送数据,websocket向前端发送数据,websocket接口后端怎么调用,websocket 前后端,websocket前端和后端,websocket前后端分离项目,websocket前后端分离项目,websocket 前后端,内容如对您有帮助,希望把文章链接给更多的朋友!

做的项目中需要将后端提供的数据展示在前端页面,一开始我是用JS的setInterval()方法,设置一个时间,每过时间发起一次ajax请求。虽然也能凑活着实现,但总感觉数据不是实时刷新的,而且还占用资源,所以学习WebSocke,并总结了一下,以下是本人总结的前后端WebSocke相关代码:

一、后端:

1.pom.xml添加WebSocke依赖

<!-- SpringBoot Websocket --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>websocket前后端数据实时更新(前端+后端)(websocket前端vue)

2.WebSocke配置类

@Configurationpublic class WebSocketConfig {/*** 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket ,如果你使用外置的tomcat就不需要该配置文件*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}

3.WebSocke服务类

@ServerEndpoint(value = "/webSocket")//主要是将目前的类定义成一个websocket服务器端, 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端@Component@EnableScheduling// cron定时任务@Datapublic 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@Componentpublic 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>
本文链接地址:https://www.jiuchutong.com/zhishi/303205.html 转载请保留说明!

上一篇:js数组如何理解(js中的数组)

下一篇:phpcms v9 537报错(phpcms模块)

  • iqoo8pro应用分身怎么设置(iqoo的应用分身)

    iqoo8pro应用分身怎么设置(iqoo的应用分身)

  • 钉钉视频会议有回放功能吗(钉钉视频会议有观看时长吗)

    钉钉视频会议有回放功能吗(钉钉视频会议有观看时长吗)

  • 程序设计语言中不能用于数值计算的是(程序设计语言中已经实现了的数据结构称为)

    程序设计语言中不能用于数值计算的是(程序设计语言中已经实现了的数据结构称为)

  • 荣耀v10发热严重怎么办(荣耀v10发烫严重)

    荣耀v10发热严重怎么办(荣耀v10发烫严重)

  • 怎么通过微信号找到一个人(怎么通过微信号查出电话号码)

    怎么通过微信号找到一个人(怎么通过微信号查出电话号码)

  • word文档出现点点点(word文档出现点点点把有些都自动删掉了)

    word文档出现点点点(word文档出现点点点把有些都自动删掉了)

  • 荣耀30pro充电热怎么回事(为什么荣耀30充电发烫)

    荣耀30pro充电热怎么回事(为什么荣耀30充电发烫)

  • 拼多多回复率多少达标(拼多多回复率多少人)

    拼多多回复率多少达标(拼多多回复率多少人)

  • b站下载视频在哪个文件夹(看b站视频下载软件)

    b站下载视频在哪个文件夹(看b站视频下载软件)

  • 怎样查找删除的聊天记录(怎样查找删除的电话号码)

    怎样查找删除的聊天记录(怎样查找删除的电话号码)

  • 快手上充值的钱能退吗(快手充值的钱怎么退回来)

    快手上充值的钱能退吗(快手充值的钱怎么退回来)

  • qq密码被盗了怎么找回来吗(qq密码被盗了怎么办用手机改回)

    qq密码被盗了怎么找回来吗(qq密码被盗了怎么办用手机改回)

  • word默认视图方式(word中默认的视图方式)

    word默认视图方式(word中默认的视图方式)

  • 无线局域网采用什么协议标准(无线局域网采用的协议是)

    无线局域网采用什么协议标准(无线局域网采用的协议是)

  • 苹果退款一般多久到账花呗(苹果退款一般多长时间到账户)

    苹果退款一般多久到账花呗(苹果退款一般多长时间到账户)

  • qq群怎么升级(qq群怎么升级群人数)

    qq群怎么升级(qq群怎么升级群人数)

  • 苹果手机的云相册在哪(苹果手机的云相册怎么能看到照片)

    苹果手机的云相册在哪(苹果手机的云相册怎么能看到照片)

  • 搜狗按键音大小怎么调(搜狗输入法怎么把按键音调小)

    搜狗按键音大小怎么调(搜狗输入法怎么把按键音调小)

  • 华为怎么解除风险应用(华为怎么解除风险应用管控)

    华为怎么解除风险应用(华为怎么解除风险应用管控)

  • 快应用中心是什么软件(快应用中心是什么鬼)

    快应用中心是什么软件(快应用中心是什么鬼)

  • 华为两个摄像头怎么用(华为两个摄像头怎么使用)

    华为两个摄像头怎么用(华为两个摄像头怎么使用)

  • 快手自带游戏怎么打开(快手里的游戏从哪玩)

    快手自带游戏怎么打开(快手里的游戏从哪玩)

  • U盘该怎么杀毒?(u盘如何进行杀毒)

    U盘该怎么杀毒?(u盘如何进行杀毒)

  • 如何用u盘装系统?UltraISO软件安装win7系统图文教程(如何用u盘装系统知乎)

    如何用u盘装系统?UltraISO软件安装win7系统图文教程(如何用u盘装系统知乎)

  • 蜡梅的养殖方法(蜡梅的养殖方法视频)

    蜡梅的养殖方法(蜡梅的养殖方法视频)

  • Content Security Policy (CSP) 介绍(content security policy blob)

    Content Security Policy (CSP) 介绍(content security policy blob)

  • 业务招待费是否可以抵扣进项税
  • 资产减值的含义
  • 重新建账 和之前数据差的多
  • 已经认证的发票红冲发票需要收回原发票吗
  • 周转材料低值易耗品科目借方登记低值易耗品的减少
  • 非金融机构借款计入什么科目
  • 残保基金属税金怎么算
  • 所得税税负率是多少
  • 小规模纳税人附加税优惠政策2023
  • 汇算清缴涉及到哪些科目的调整
  • 企业滞纳金属于什么税
  • 小规模税局代增值税专用发票怎么交税
  • 坏账准备的转回对资产的影响
  • 应交税费的会计处理2018
  • 收到以前年度退回的企业所得税怎么做账
  • 对外捐赠会计和税法差异调整
  • win7桌面快捷键是什么
  • vue中的...
  • 企业注销需要多久
  • code inspections
  • 小规模纳税人销售货物税率是多少
  • php imagick
  • PHP:iconv_mime_decode_headers()的用法_iconv函数
  • 特殊行业需要缴什么税
  • php使用js
  • 无偿接收股权
  • phptime函数
  • 企业清算分配的财产金额怎么算出来
  • 社保退工伤保险怎样做分录
  • 建筑企业结转成本的依据是什么
  • 创建javascript函数
  • 真实世界人工智能
  • promise的几种状态
  • stp 命令
  • vue网上商城项目
  • 技术人员的工资计入什么费用
  • 结息会计凭证怎么写
  • 房地产开发企业成本核算方法
  • 分公司可以独立开票吗
  • 哪些发票是成品发票
  • 所得税费用需要结转损益吗
  • 纳税对象的类型不包括
  • 支付境外货款需要缴纳哪些税费
  • 企业分期收款销售商品,即商品已经交付
  • 员工加班打车费报销
  • 为什么其他权益工具投资处置价差计留存收益
  • 扣缴个人所得税怎么计算
  • 固定资产报废的变卖收入计入哪个科目
  • 以前年度多计提的税金怎么调整
  • 小微企业未开票收入怎么申报
  • 私营企业固定资产法律制度
  • mysql5.7解压版安装步骤
  • dell bios密码忘记
  • win10两个网络怎么选择网络
  • linux系统故障及解决方法
  • ccsve是啥
  • windowsxp注册表在哪
  • u盘装win8系统教程图解
  • WIN10系统更新之后无法启动
  • centos的命令
  • win7的开始菜单在哪里
  • ubuntu命令联网
  • 联想安装xp系统
  • Linux系统安全性体现在哪些方面?
  • centos 怎么用
  • sixtypopsix.exe - sixtypopsix是什么进程 有什么用
  • lua打印变量
  • bootstrap启动类
  • 细说javascript
  • nodejs实现登录
  • 如何用python编写一个程序
  • python中对文件操作的一般步骤
  • jquery分页插件的使用
  • 点评js异步加载什么意思
  • js如何定义类
  • android studio绑定按钮
  • 河南省低保查询官网
  • 重庆地方税务局电子税务局官网
  • 企业吸收合并资质转移办理
  • 农村复耕复产
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设