首先安装npm install --save  websocket-heartbeat-js@^1.0.7

在main.js中  引入并挂载全局方法

import WebsocketHeartbeatJs from 'websocket-heartbeat-js';if (JSON.parse(getStore('userInfo'))!= null) {    let userId = JSON.parse(getStore('userInfo')).id;    let websocketHeartbeatJs = new WebsocketHeartbeatJs({        // url: 'ws://192.168.0.68:8888/websocket/' + userId        url: 'ws://192.168.0.22:8888/websocket/' + userId    });    Vue.prototype.websocketHeartbeatJs = websocketHeartbeatJs;}

　在app.vue中 建立连接

mounted() {    // console.log(JSON.parse(this.getStore("userInfo")),'--------JSON.parse(this.getStore("userInfo"))-------')    if (JSON.parse(this.getStore("userInfo")).id != "") {      // console.log(JSON.parse(this.getStore("userInfo")).id);      if ("WebSocket" in window) {        this.websocketHeartbeatJs.onopen = function() {};        var that = this;        this.websocketHeartbeatJs.onmessage = function(e) {          // console.log(JSON.parse(e.data),'-------------JSON.parse(e.data)-----------------');          that.$store.state.websocketMsg = JSON.parse(e.data);         在store中存放webscoket信息          // console.log(that.$store.state.websocketMsg);        };        this.websocketHeartbeatJs.onreconnect = function() {};      } else {        alert("当前浏览器 Not support websocket");      }    }  },

　　在vue组件中使用

computed: {            websocketInfo() {                return this.$store.state.websocketMsg;             //创建完成时存在store中的信息            }        },        watch: {            websocketInfo: function (nv, ov) {                console.log(nv);                this.websocketSuccess = nv.result.success;                this.websocketMsg = nv.result.message;                console.log(this.websocketSuccess, '-----------websocketSuccess----------');                console.log(this.websocketMsg, '----------websocketMsg-------------');                //   console.log(nv.result.result.error.code);                if (this.websocketSuccess == true && this.websocketMsg == "true") {                    // 创建云盘成功后挂载云主机                    if (nv.result.result.inventory != undefined) {                        this.diskid = nv.result.result.inventory.uuid;                        this.id = this.$store.state.vmId;                      }                    this.$Notice.destroy({                        name: "warning",                        duration: 1                    });                    var imageNames = this.vmName == "" ? "" : "'" + this.vmName + "'";                    this.$Notice.success({                        title: this.operation == "" ?                            this.$store.state.operationed : "云盘"+ imageNames + this.operation +"成功"                     });                    this.getImagesList(this.pageSize, this.pageNumber);                    this.$refs.child.getinfo();                    this.$refs.child.chishihua();                    this.value2 = true;                    // 创建完成挂载云主机                    if(this.operation == '' &&  this.$store.state.operationed == '创建镜像成功'){                        this.guazai();                    };                    this.operation == "" ;                } else if (                    this.websocketSuccess == true &&                    this.websocketMsg == "false"                ) {                    var str = nv.result.result.error.details;                    // str = str.split("不")[0];                    // console.log(str);                    this.$Notice.warning({                        title: str                    });                } else if (                    this.websocketSuccess == true &&                    this.websocketMsg == ""                ) {                    this.$Notice.warning({                        title: this.$store.state.operationed + "创建中",                        duration: 1                    });                }            },        },