Vue-全局websocket 实现消息推送

在上一篇文章 WebSocket 消息推送https://blog.csdn.net/qq_63312957/article/details/125375122?spm=1001.2014.3001.5502 中已经简单描述了如何使用 springboot vue websocket 实现数据推送，建议先阅读之前的文章之后，再来阅读本篇文章。

新建global.js文件

export default {ws: {},setWs: function(newWs) {this.ws = newWs}
}

一：main.js 文件中增加

import globalWebSocket from './js/global.js'
Vue.prototype.$globalWebSocket = globalWebSocket

二：app.vue中添加

 created() {this.initWebSocket();},methods:{//app.vueinitWebSocket() {let that = this;if ("WebSocket" in window) {console.log("您的浏览器支持 WebSocket!");that.ws = new WebSocket(`ws://192.168.1.26:8082/api/websocket`);that.$globalWebSocket.setWs(that.ws);// that.ws.onopen = that.onopen();that.ws.onopen = function() {console.log('webSocket connect successful')};that.ws.onclose = function() {// 关闭 websocketconsole.log("webSocket connect closed");setTimeout(() => {that.initWebSocket();}, 2000);};} else {// 浏览器不支持 WebSocketconsole.log("您的浏览器不支持 WebSocket!");}},

三：需使用的页面，保留getMessage方法，只需添加handleMsg方法,将getMessage方法作为接收数据方法，并在mounted函数中加载hanleMsg即可

<template><div><div id="chart" style="width: 700px; height: 200px;"></div></div>
</template><script>export default{name:"chart",data(){return{yAxis:[],xAxis:[],}},mounted() {this.chart();this.handleMsg();},methods:{handleMsg() {this.$globalWebSocket.ws.onmessage = this.getMessage},//接收服务器发来的消息getMessage: function (e) {console.log(e.data);this.xAxis = JSON.parse(e.data).xAxis;this.yAxis = JSON.parse(e.data).yAxis;this.chart();},chart(){//有的话就获取已有echarts实例的DOM节点。var mychart = this.$echarts.getInstanceByDom(document.getElementById('timechart')); if (mychart == null) { // 如果不存在，就进行初始化。mychart = this.$echarts.init(document.getElementById('chart'));}var option = {title: {text: '时间(ms)/阶段'},tooltip: {trigger: 'axis'},legend: {// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: this.xAxis},yAxis: {type: 'value'},series: [{type: 'line',stack: 'Total',data: this.yAxis}]};mychart.setOption(option);}}
</script><style>
</style>

如果你恰好需要读到这篇文章，希望对你有帮助。如有写的不对或不够好的地方，欢迎指正。

Vue-全局websocket 实现消息推送相关推荐

vue-admin websocket接收消息推送+语音提示（详细代码）
websocket接收消息推送+语音提示这个是同事的代码,我拿来记录一下,希望以后可以看得懂-- utils/websocket.js const audioUrl = require('@/ass ...
springboot+rabbitmq+vue实现stomp协议消息推送
springboot+rabbitmq+vue实现stomp协议消息推送一.rabbitmq添加stomp插件 rabbitmq 默认是没有开启Socket STOMP插件的.如需使用,例如集成sp ...
springboot定时发送短信_springboot 整合websocket实现消息推送（主动推送，具体用户推送，群发，定时推送）...
websocket springboot 整合websocket实现消息推送(主动推送,具体用户推送,群发,定时推送) 使用WebSocket构建交互式Web应用程序本指南将引导您完成创建" ...
php通知websocket,php实现websocket实时消息推送
php实现websocket实时消息推送,供大家参考,具体内容如下 SocketService.php /** * Created by xwx * Date: 2017/10/18 * Time: ...
python websocket实现消息推送_python Django websocket 实时消息推送
[实例简介] Django websocket 实时消息推送服务端主动推送调用 send(username, title, data, url) username:用户名 title:消息标题 d ...
python websocket实时消息推送
python websocket实时消息推送十分想念顺店杂可... 本人写的渣,大神勿喷. 转载请附带本文链接,谢谢. 服务端代码 # -*- coding: utf-8 -*- # @Time : ...
java整合消息推送_SpringMVC整合websocket实现消息推送及触发功能
本文为大家分享了SpringMVC整合websocket实现消息推送,供大家参考,具体内容如下 1.创建websocket握手协议的后台 (1)HandShake的实现类 /** *Project N ...
uniapp接收服务器消息,【教程】uniapp websocket实现消息推送
部分开发者在使用uniapp的过程中会用到websocket,但是uniapp框架提供的websocket服务并不是尽善尽美. 我在这里为大家介绍一款第三方的websocket推送服务:GoEasy, ...
springboot整合websocket进行消息推送
什么是websocket? WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据. ...

Vue-全局websocket 实现消息推送

Vue-全局websocket 实现消息推送相关推荐

最新文章

热门文章