vue中websoket的使用

今天药忘吃喽~ 2021-12-18 16:45 97阅读 0赞

首先安装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
                        });
                    }
                },
            },

转载于:https://www.cnblogs.com/xu-nian-qin/p/10918035.html