Vue使用WebSocket

參考：

鏈接：https://www.zhihu.com/question/20215561/answer/157908509

來源：知乎

作者：騰訊雲技術社區

WebSocket 機制

以下簡要介紹一下WebSocket的原理及運行機制。

WebSocket是HTML5下一種新的協議。它實現了瀏覽器與服務器全雙工通信，能更好的節省服務器資源和帶寬並達到實時通訊的目的。它與HTTP一樣通過已建立的TCP連接來傳輸數據，但是它和HTTP最大不同是：

• WebSocket是一種雙向通信協議。在建立連接后，WebSocket服務器端和客戶端都能主動向對方發送或接收數據，就像Socket一樣；
• WebSocket需要像TCP一樣，先建立連接，連接成功后才能相互通信。

傳統HTTP客戶端與服務器請求響應模式如下圖所示：

WebSocket模式客戶端與服務器請求響應模式如下圖：

上圖對比可以看出，相對於傳統HTTP每次請求-應答都需要客戶端與服務端建立連接的模式，WebSocket是類似Socket的TCP長連接通訊模式。一旦WebSocket連接建立后，后續數據都以幀序列的形式傳輸。在客戶端斷開WebSocket連接或Server端中斷連接前，不需要客戶端和服務端重新發起連接請求。在海量並發及客戶端與服務器交互負載流量大的情況下，極大的節省了網絡帶寬資源的消耗，有明顯的性能優勢，且客戶端發送和接受消息是在同一個持久連接上發起，實時性優勢明顯。

相比HTTP長連接，WebSocket有以下特點：

• 是真正的全雙工方式，建立連接后客戶端與服務器端是完全平等的，可以互相主動請求。而HTTP長連接基於HTTP，是傳統的客戶端對服務器發起請求的模式。
• HTTP長連接中，每次數據交換除了真正的數據部分外，服務器和客戶端還要大量交換HTTP header，信息交換效率很低。Websocket協議通過第一個request建立了TCP連接之后，之后交換的數據都不需要發送 HTTP header就能交換數據，這顯然和原有的HTTP協議有區別所以它需要對服務器和客戶端都進行升級才能實現（主流瀏覽器都已支持HTML5）。此外還有 multiplexing、不同的URL可以復用同一個WebSocket連接等功能。這些都是HTTP長連接不能做到的。

 

在開發方面，WebSocket API 也十分簡單：只需要實例化 WebSocket，創建連接，然后服務端和客戶端就可以相互發送和響應消息。在WebSocket 實現及案例分析部分可以看到詳細的 WebSocket API 及代碼實現。

 

　　——VUE—App.vue——

<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
export default {
    created() {
        this.initWebSocket();
    },
    methods: {
        initWebSocket() {
            //初始化weosocket
            let url = 'wss:wss.xxxxxxx.com:8282'

            const wsuri = url; //ws地址
            this.websocket = new WebSocket(wsuri);
            this.websocket.onopen = this.websocketonopen;
            this.websocket.onerror = this.websocketonerror;
            this.websocket.onmessage = this.websocketonmessage;
            this.websocket.onclose = this.websocketclose;
        },

        websocketonopen() {
            console.log("WebSocket連接成功");
            let data = {
                type: "user_init",
                userid: 'xxx'
            }
            this.websocket.send(
                // 發送數據
                JSON.stringify(data)
            );
        },
        websocketonerror(e) {
            //錯誤
            // this.initWebSocket()
            console.log("WebSocket連接發生錯誤");
        },
        websocketonmessage(e) {
            //數據接收  
            var that = this;
            var data = JSON.parse(e.data);
            this.$store.commit('SET_ws', data)
            console.log("接收數據");
            //操作處理...
        },

        websocketsend(agentData) {
            //數據發送
            this.websocket.send(agentData);
        },

        websocketclose(e) {
            //關閉
            console.log(JSON.stringify(e));
        },
    },
}
</script>