Vue中使用websocket的正确姿势

1：首先谈谈websocket是什么？

1. WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。
   WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

2: vue中怎么使用

2. 实例代码

<script>
  import store from '@/store/'
  export default {
    name: "HeaderNotice",
    components: {
    },
    data () {
      return {
        websock: null,
      }
    },
    computed:{
    },
    created() {
      this.initWebSocket();
    },
    mounted() {
      //this.initWebSocket();
    },
    destroyed: function () { // 离开页面生命周期函数
      this.websocketclose();
    },
    methods: {
      initWebSocket: function () {
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        console.log("调用了链接websock  ，获取的用户id为   ："+store.getters.userInfo.id)
        var userId = store.getters.userInfo.id;
        var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
        console.log(url);
        this.websock = new WebSocket(url);
        this.websock.onopen = this.websocketOnopen;
        this.websock.onerror = this.websocketOnerror;
        this.websock.onmessage = this.websocketOnmessage;
        this.websock.onclose = this.websocketOnclose;
      },
      websocketOnopen: function () {
        console.log("WebSocket连接成功");
        //心跳检测重置
        //this.heartCheck.reset().start();
      },
      websocketOnerror: function (e) {
        console.log("WebSocket连接发生错误");
        this.reconnect();
      },
      websocketOnmessage: function (e) {
      	 console.log('监听关闭' + e)
        console.log("-----接收消息-------",e.data);
        var data = eval("(" + e.data + ")"); //解析对象
      },
      websocketOnclose: function (e) {
        console.log("connection closed (" + e.code + ")");
        this.reconnect();
      },
      websocketSend(text) { // 数据发送
        try {
          this.websock.send(text);
        } catch (err) {
          console.log("send failed (" + err.code + ")");
        }
      },

      reconnect() {
        var that = this;
        if(that.lockReconnect) return;
        that.lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
          console.info("尝试重连...");
          that.initWebSocket();
          that.lockReconnect = false;
        }, 5000);
      },
    }
  }
</script>

3. 手动关闭websocket

this.websock.close()

4. websocket链接地址，配置在index.html页面

 <script>
	window._CONFIG['IP'] = '127.0.0.1';
    //后台接口访问
    window._CONFIG['domianURL'] = 'http://' + window._CONFIG['IP'] + ':9036/csp';
 </script>

3:websocket的属性讲解

1. 创建WebSocket 实例

   WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例

 this.websock = new WebSocket(url);

2. websocket属性

binaryType: "blob"                    //返回websocket连接所传输二进制数据的类型，如果传输的是Blob类型的数据,则为"blob"，如果传输的是Arraybuffer类型的数据，则为"arraybuffer"
　　bufferedAmount: 0　　　　　　　　　　　　 //为只读属性，用于返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数。
　　extensions: ""
　　onclose: ƒ ()　　　　　　　　　　　　　　　//连接关闭时触发
　　onerror: ƒ ()　　　　　　　　　　　　　　　//通信发生错误时触发
　　onmessage: ƒ (e)　　　　　　　　　　　　  //客户端接收服务端数据时触发,e为接受的数据对象
　　onopen: ƒ ()　　　　　　　　　　　　　　　 //连接建立时触发
　　protocol: ""　　　　　　　　　　　　　　　　 //用于返回服务器端选中的子协议的名字；这是一个在创建websocket对象时，在参数protocols中指定的字符串。
　　readyState: 1　　　　　　　　　　　　　　　 //返回值为当前websocket的链接状态
　　url: "ws://1xx.xxx.xxx.xxx:8080/ws"    //返回值为当构造函数创建WebSocket实例对象时URL的绝对路径。

3. websocket属性之readyState

   readyState返回当前websocket的链接状态，共有4种。可根据具体项目的需求来利用此状态，写对应的需求。

CONNECTING：值为0，表示正在连接。
OPEN：      值为1，表示连接成功，可以通信了。
CLOSING：   值为2，表示连接正在关闭。
CLOSED：    值为3，表示连接已经关闭，或者打开连接失败。

4:手动关闭websocket

this.websock.close()

websocketOnclose方法打印信息
监听关闭[object CloseEvent]
GlobalHeader.vue?70ef:647 connection closed (1005)