美文网首页
WebSocket + vue

WebSocket + vue

作者: _情绪疯子 | 来源:发表于2019-03-07 08:58 被阅读0次
    <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 = "wss://echo.websocket.org";
            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>
    

    相关文章

      网友评论

          本文标题:WebSocket + vue

          本文链接:https://www.haomeiwen.com/subject/weixpqtx.html