websocket在vue中使用

方法一.組件中單獨使用

 1.在methods中   
WebSocketSet(){
       if ('WebSocket' in window){
         this.ws = new WebSocket(`${axios.defaults.baseURL9}`);  
           this.ws.onmessage =  (res=>{
             let   received_msg= JSON.parse(res.data);
                 console.log("數據已接收...",received_msg);
                 this.newsList=received_msg;
           }) 
           this.ws.onopen=(res=>{
              console.log("socket連接成功")
               this.ws.send(this.currentId);
           })
          
         //......此處省略ws其他屬性操作
          }else{
            alert('當前瀏覽器 Not support websocket')
          }  
    },
2.在destroyed中關閉websocket
 destroyed(){
      this.ws.close();//離開路由之后斷開websocket連接
    }

方法二.封裝公共方法

1.在src下創建文件夾存放websocket.js（soketLink中為請求服務）
import wesk from "./soketLink"
class socket{
  constructor(){
    this.ws=null
  }
  WebSocketSet(par, Callback) {
    if ('WebSocket' in window) {
       this.ws=wesk.wesk()
    //  var ws = new WebSocket(`${axios.defaults.baseURL9}`);   
      this.ws.onopen = (res => {
        console.log("socket連接成功")
        this.ws.send(par);
      })
      this.ws.onmessage = (res => {
        let received_msg = JSON.parse(res.data);
        console.log("數據已接收...", received_msg);
        // this.newsList=received_msg;
        Callback(received_msg)
      })

    } else {
      alert('當前瀏覽器 Not support websocket')
    }
  }
  close(){
    this.ws.close()
    this.ws.onclose = (res => {
      console.log(console.log("socket已經關閉"))
    })
  }

}
export default socket
2.在組件中引入websocket.js
import socket from "../../../resource/websocket.js"

data中定義websocket:null,

mounted() {
    this.websocket=new socket()    
 this.websocket.WebSocketSet(this.currentId,this.getSocketdata);      
  },

methods中接收數據
  //websocket返回數據
getSocketdata(res){
         console.log(res,997788)
         this.newsList=res
      },


 destroyed(){
      //離開路由之后斷開websocket連接
     this.websocket.close() 
    }