Vue-WebSocket原理及使用

1、简介

        以前的http协议通信只能由客户端发起。如果我们想要了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。http协议做不到服务器主动向客户端推送信息。之前的做法就是使用轮询，每隔一段时间，就请求接口，了解服务器有没有新的信息，但是它效率低下，且非常浪费资源。WebSocket就诞生了，它最大特点就是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

2、构造函数

let ws = new WebSocket(wsServer);

3、属性

（1）webSocket.readyState

• 0（WebSocket.CONNECTING）：正在连接中，但还未建立
• 1（WebSocket.OPEN）：连接已经建立，可以进行通信
• 2（WebSocket.CLOSING）：连接正在关闭
• 3（WebSocket.CLOSED）：连接已关闭或者打开连接失败

（2）webSocket.onopen

        定义一个事件处理程序，当readyState 变为1时调用，用于指定连接成功后的回调函数。

ws.onopen = () => {
    console.log('连接已经建立，可以进行通信');
}

（3）webSocket.onmessage

        当收到来自服务器的消息时被调用。

ws.onmessage = (e) => {
    let data = JSON.parse(e.data);
    console.log('接受到信息', data);
}

（4）webSocket.onclose

        用于指定连接关闭后的回调函数。

ws.onclose = () => {
    console.log('服务器已经断开');
}

（5）webSocket.onerror

        用于指定报错时的回调函数。

ws.onclose = (e) => {
    console.log(e);
}

4、方法

（1）webSocket.send()

        用于向服务器发送数据。

function fn(data) {
   if (ws.readyState === WebSocket.OPEN) {
          ws.send(data);
   } else {
      // Do something else in this case.
   }
}

（2）webSocket.close()

         关闭 WebSocket连接或连接尝试。

ws.close();

5、Vue中使用WebScoket

<script>
    export default {
        name: 'Home',
        data() {
            return {
                ws: null,
            }
        },
        methods: {
            // 启动websocket 获取列表数据
            initWebSocket() {
                let _this = this;
                let wsServer = (process.env.NODE_ENV === 'development'
                    ? "ws://10.196.254.168:8011"
                    : "wss://" + window.location.origin.split("//")[1])
                    + "/sctpacss/acs/event";
                let limitConnect = 3;  // 断线重连次数
                let timeConnect = 0;  // 当前重连次数
                console.log(wsServer);
                init();

                // 初始化webSocket
                function init() {
                    _this.ws = new WebSocket(wsServer);
                    _this.ws.onopen = () => {
                        console.log('TCP已连接');
                    }
                    _this.ws.onmessage = (e) => {
                        let data = JSON.parse(e.data);
                        console.log('接受到信息', data);
                    }
                    _this.ws.onclose = () => {
                        console.log('服务器已经断开');
                        reconnect();
                    }
                }

                // 重连
                function reconnect() {
                    if (limitConnect > 0) {
                        limitConnect--;
                        timeConnect++;
                        console.log('第' + timeConnect + '次重连');
                        setTimeout(function () {
                            init();
                        }, 2000)
                    } else {
						console.log('TCP连接已超时,30s后重新建立连接');
						setTimeout(function () {
							_this.initWebSocket();
						}, 30000)
                    }
                }
            },

            //关闭websocket
            closeWebSocket() {
                if (this.ws) {
                    this.ws.close();
                    this.ws.onclose = function () {
                        console.log('websocket已关闭');
                    }
                }
            },
        },
        mounted() {
            //绑定事件
            window.addEventListener('beforeunload', () => this.closeWebSocket())
            this.initWebSocket();
        },
        beforeDestroy() {
            //卸载事件
            window.removeEventListener('beforeunload', () => this.closeWebSocket());
        },
    }
</script>