在vue中使用WebSocket建立长连接

WebSocket 属性

 ws.readyState （ 只读属性 readyState 表示连接状态）
 0:表示连接尚未建立。
 1:表示连接已建立，可以进行通信。
 2:表示连接正在进行关闭。
 3:表示连接已经关闭或者连接不能打开。

WebSocket方法

ws.send();    //使用连接发送数据
ws.close();    //关闭socket链接

例：

<script>
 export default {
    data(){
        return {
            
        datas:[]
        }  
        
    },
    mounted() {
        this.initWebSocket() 
    },
    destroyed() {
　　　　//页面销毁时关闭长连接
　　　　　　this.websocketOnclose();
　　},
    methods:{
    initWebSocket（）{
        
           const wsuri="ws://127.0.0.1:8088/websocket/threadsocket";//ws地址
　　　this.websock = new WebSocket(wsuri); 
       	 this.websock.onopen = this.websocketOnopen;
	     this.websock.onerror = this.websocketOnerror;
	     this.websock.onmessage = this.websocketOnmessage;
	     this.websock.onclose = this.websocketOnclose;
    }，
    // 客户端和服务端建立链接时触发，此时可向服务端传递参数
    websocketOnopen(){
        this.websock.send('crew'); //传递参数
    },
     // 客户端收到服务端发来的消息时，会触发onmessage事件，参数res.data中包含server传输过来的数据
    websocketOnmessage(res){
        //接收到消息的回调方法，我这里是处理返回数据
        if(jsons.data){
            var maparr = JSON.parse(res.data)
            this.datas=maparr
        }
        //  console.log(this.arrisrun)s
    },
     //如果出现连接，处理，接收，发送数据失败的时候就会触发onerror事件
    websocketOnerror(){
      console.log('连接失败')
    },
    //客户端收到服务端发送的关闭连接的请求时，触发onclose事件
    websocketOnclose() {
      this.websock.close()
      console.log('关闭连接')
    },


}
</script>