vue采用WebSocket与后端服务器通信

从js那过来的，参考:https://blog.csdn.net/bbs11007/article/details/109491329，

举一反三使用VUE的方式，url地址写在一个通用main方法里面了，略。

 

created() {
        
        // this.initWebSocket();//websocket
},
methods：{
    //   initWebSocket(){ //初始化weosocket
    //       const wsuri = main.url;
    //       this.websock = new WebSocket(wsuri);
    //       this.websock.onmessage = this.websocketonmessage;
    //       this.websock.onopen = this.websocketonopen;
    //       // this.websock.onopen = this.sendRequest;
    //       this.websock.onerror = this.websocketonerror;
    //       this.websock.onclose = this.websocketclose;
    //     },

    //     websocketonopen(moduleType, actionType, reqData){
             //连接建立之后执行send方法发送数据

           // let data = {
          //        "id": main.id,
          //        "actionType": 1,
          //        "moduleType": 1,
          //        "reqData": ""
          //      }

          //  this.websocketsend(JSON.stringify(data));
          //  data = {
          //        "id": main.id,
          //        "actionType": 2,
          //        "moduleType": 2,
          //        "reqData": ""
          //      }

          //   this.websocketsend(JSON.stringify(data));
    //     },
    //     websocketonerror(){//连接建立失败重连
    //       // this.initWebSocket();
    //       console.log("连接失败");
    //     },
    //     websocketonmessage(e){ //数据接收，接收所有的
    //       const redata = JSON.parse(e.data);
    //       console.log("收到数据dsy："+JSON.stringify(e.data));
             //接收分类

    //       //查询所有
    //       if (redata.actionType === 1 && redata.moduleType === 1){
    //           var myooo = JSON.parse(redata.respData); //转对象
    //           console.log("查询所有："+JSON.stringify(redata.respData));
    //           // this.pages1.values = JSON.parse(redata.respData);
    //           this.getjson(myooo);
    //       }
    //       //查詢中的某个
    //       if (redata.actionType === 6 && redata.moduleType === 2){
    //           var myooo = JSON.parse(redata.respData); //转对象
    //           console.log("查询所有某个："+JSON.stringify(redata.respData));
    //           this.pages.values = JSON.parse(redata.respData);

    //       }
             //其他的类似        

    //     },
    //     websocketsend(Data){//数据发送
    //       this.websock.send(Data);
    //     },
    //     websocketclose(e){  //关闭
    //       console.log('断开连接',e);
    //     },
    
     

}

发送模板跟js一样

    /* 模板*/
       //发送策略模板
     sendRequest(moduleType, actionType, reqData) {
           // 发送数据给后端处理
           let  request={
                "id": main.id,
                "actionType":actionType,
                "moduleType": moduleType,
                "reqData": reqData
                }
             this.$root.DataBus.sendSock(request,this.doData);
             var sendStr = JSON.stringify(request);
             console.log("发送数据 reqData:" + reqData+"发送策略模板sendStr:"+sendStr);
            this.sendlookgroup("");
       },

    //查询群组
        sendlookgroup(reqdata){
            var  actionType = 5;//新增功能
            var  moduleType = 4;//群组模块
            this.sendRequest(moduleType,actionType,reqdata);
        },
         //新增群组
         sendNewGroup(reqdata){ //给上面调用
            var  actionType = 2;//新增功能
            var  moduleType = 4;//群组模块
            this.sendRequest(moduleType,actionType,reqdata);
          },

这种缺点是：每个页面都有这个请求，会导致请求出问题和异常，因为每次关闭请求页面就关闭；

所有建议写一个主方法，所有方法都通过此主方法出去；

来源：oschina

链接：https://my.oschina.net/u/4267117/blog/4791494