websocket的使用

websocket的搭建

子组件

<template>
  <div class="fzs-websocket"></div>
</template>
<script>
  import {mapState} from 'vuex'
  import {getLocal, setLocal} from "@/utils/storage.js"
  import {tryHideFullScreenLoading} from "@/utils/loading";

  export default {
    name: 'fzs-websocket',
    data() {
      return {
        WebSocket: null,
        timer: null,
        shouldReconnect: true,
        reconnect: null,
        paramSty: ''
      }
    },
    computed: {},
    components: {},
    mounted() {
      this.timer = setInterval(() => {
        console.info("10秒主动发送心跳");
        this.$emit('onmessage', '收到消息');
        let params = {
          "id": 1
        };
        this.WebSocket.send(JSON.stringify(params));
      }, 10 * 1000);
      this.loadWebsocket();
    },
    methods: {
      //加载websocket
      loadWebsocket() {
        this.initWebSocket();
        this.onOpenWebsocket();
        this.onMessageWebsocket();
        this.onCloseWebsocket();
        this.onErrorWebsocket();
      },
      // 初始化websoket
      initWebSocket() {
        const setIp = getLocal('ip')
        console.log('设置ip', setIp)
        // const wsuri = `ws://172.26.105.179:2001`;
        const wsuri = `ws://${setIp}:6868`;
        console.log('新ip地址', wsuri)
        this.WebSocket = new WebSocket(wsuri)
      },
      onOpenWebsocket() {
        // 打开websocket
        this.WebSocket.onopen = () => {
          console.log("websocket连接成功");
          let params = {
            "id": 1
          };
          this.onSendWebsocket(params);
        };
      },
      onSendWebsocket(params) {
        console.log('web', params)
        this.WebSocket.send(JSON.stringify(params));
      },
      onMessageWebsocket() {
        this.WebSocket.onmessage = e => {
          console.log('a')
          console.log('e', e)
          setLocal('saveBtn', true)
          this.$emit('onmessage', e);
        }
      },
      onCloseWebsocket() {
        console.log("websocket关闭");
        // this.loadWebsocket();
        this.WebSocket.onclose = () => {
          if (this.shouldReconnect) {
            this.reconnect = setInterval(() => {
              this.loadWebsocket()
              clearInterval(this.reconnect)
            }, 30000)
          }
        }
      },
      onErrorWebsocket() {
        this.WebSocket.onerror = e => {
          console.log(e);
          tryHideFullScreenLoading()
          this.$message.error('连接失败，请重试');
        };
      },
      onmessage(e) {
        console.log('websocket', e)
      }
    }
  }
</script>
<style lang="scss">
  .fzs-websocket {
  }
</style>

父组件

<webSocket @onmessage="onmessage" ref="toSocket"/>
<script>
import webSocket from './websocket'
components:{
	webSocket
}
</script>

参考https://my.oschina.net/codingBingo/blog/633985，理解会更清晰。