位置: 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模块)

  • 北京增值税发票勾选认证平台
  • 印花税需要计提吗?怎么做会计分录
  • 收到税务局税收返还
  • 为员工集中购买医疗保险
  • 其他应付款二级明细
  • 分批付款 发票怎么开
  • 电子税务局财务报表在哪里查询
  • 稳岗补贴给谁
  • 填写银行结算凭证的有关印鉴,应集中由谁保管
  • 暂估入库商品用什么科目
  • 企业进货不收发票怎么做帐?
  • 单位处置车辆账务处理
  • 非营利组织对外捐赠
  • 单位员工借款的认定
  • 劳务发票需要身份证原件吗
  • 电子发票如何报销做账
  • 快递费可以抵扣进项税额吗
  • 银行存款日记账和现金日记账的区别
  • 已知不含税金额和增值税如何计算税率
  • 纳税评估调整
  • 商贸流通企业的构成
  • Proxy error: Could not proxy request 解决方法
  • 无法找到脚本文件c:\windows\system32
  • 腾讯电脑管家中的软件市场打不开
  • 负债的情况
  • 一次性收取一年租金
  • 孕妇能吃桂圆吗有什么好处
  • (Select)解决:Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)
  • thinkphp钩子场景
  • php批量修改
  • mom.exe是什么进程
  • 网赚项目——Youtube获取高流量的技巧
  • 缴医保分录
  • 土地承包经营权和土地经营权区别
  • 非营利组织免税资格公示
  • 白 犀牛
  • vue引用类型
  • 完成认证后开具什么证明
  • 脱不下孔乙己的长衫对应下一句
  • vue sse
  • 搭建本地yum
  • 微信小程序解锁安全吗
  • cd相关命令
  • apt apt-get aptitude
  • 帝国cms移动端
  • 个人代扣代缴社保分录
  • 汽修厂利润能达到一半吗
  • 企业所得税申报错误怎么更改
  • 小规模纳税人能开专票吗2023
  • 缴纳工会筹备金会计分录怎么写
  • 公司借款如何做账务处理
  • 在建工程待摊支出结转
  • 退货对方不开具红字发票怎么办
  • 免税小规模企业增值税申报表怎么填
  • 冲个人借款分录怎么写
  • 小企业无形资产取得的账务处理
  • 非流动资产增加意味什么
  • 设计服务成本和信息中心的测试成本
  • 未达起征点可以申请一次性创业补贴吗
  • 场地租用招标方案怎么写
  • 职工体检费如何报销
  • 应收账款周转率计算公式
  • 新企业建账
  • win8安装程序在哪里
  • xp系统弹出广告怎么处理
  • 苹果mac电脑打不开
  • win8创建系统映像
  • centos安装位置选择
  • windows更新过程中
  • win7计算机快捷方式不见了
  • linux如何设置用户自己的工作环境
  • linux中grep命令用法
  • Win10 Mobile 10586.71截图曝光 修复已知问题
  • 巨幕prime
  • dos批命令
  • 编写批处理
  • Android IntentFilter 匹配原则浅析
  • python中fun函数怎么用
  • ca证书怎么下载安装
  • 贵州电子税务局app下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设