Vue中使用websocket的正確使用方法

原文：https://www.jianshu.com/p/9d8b2e42328c

<template>
  <div class="test">
</div>
 </template>
<script>
 export default {
 name : 'test',
 data() {
 return {
 websock: null,
 }
 },
 created() {
 this.initWebSocket();
 },
 destroyed() {
 this.websock.close() //離開路由之后斷開websocket連接
 },
 methods: {
 initWebSocket(){ //初始化weosocket
 const wsuri = "ws://127.0.0.1:8080";
 this.websock = new WebSocket(wsuri);
 this.websock.onmessage = this.websocketonmessage;
 this.websock.onopen = this.websocketonopen;
 this.websock.onerror = this.websocketonerror;
 this.websock.onclose = this.websocketclose;
 },
 websocketonopen(){ //連接建立之后執行send方法發送數據
 let actions = {"test":"12345"};
 this.websocketsend(JSON.stringify(actions));
 },
 websocketonerror(){//連接建立失敗重連
 this.initWebSocket();
 },
 websocketonmessage(e){ //數據接收
 const redata = JSON.parse(e.data);
 },
 websocketsend(Data){//數據發送
 this.websock.send(Data);
 },
 websocketclose(e){ //關閉
 console.log('斷開連接',e);
 },
 },
 }
 </script>
 <style lang='less'>
</style>