Vue-全局websocket 实现消息推送-Toy模板网

这篇具有很好参考价值的文章主要介绍了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.vue
    initWebSocket() {
      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() {
          // 关闭 websocket
          console.log("webSocket connect closed");
          setTimeout(() => {
            that.initWebSocket();
          }, 2000);
        };
      } else {
        // 浏览器不支持 WebSocket
        console.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>

如果你恰好需要读到这篇文章，希望对你有帮助。如有写的不对或不够好的地方，欢迎指正。文章来源地址https://www.toymoban.com/news/detail-594770.html

到了这里，关于Vue-全局websocket 实现消息推送的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！