一、webSocket

官網(wǎng)傳送門

The HTML5 WebSockets specification defines an API that enables web pages to use the WebSockets protocol for two-way communication with a remote host. HTML5 WebSockets provide an enormous reduction in unnecessary network traffic and latency compared to the unscalable polling and long-polling solutions that were used to simulate a full-duplex connection by maintaining two connections.

讓我們先來了解一下全雙工和半雙工的概念，說實話，有點忘了，當年可是必考題！網(wǎng)絡老師聽了差點想打人。。。
全雙工（full-duplex）：
假設在交換機通信兩端為A和B，在全雙工的情況下，可以允許A -> B 和 B -> A 雙向同時通訊，A和B都可以接受和發(fā)送信息，就像打電話那樣。
半雙工（half-duplex）:
在同一個時間段內(nèi)，每次只能由一端發(fā)起通信，意思就是只能同時有一個發(fā)送端和接收端，就像對講機那樣。
現(xiàn)在進入正軌，翻譯一波：
h5 webSocket 規(guī)范定義了一個讓網(wǎng)頁通過webSocket協(xié)議和一個遠程主機雙向通信的API。與不可縮放的輪詢和長輪詢相比，他提供了一個極大減少不必要的網(wǎng)絡流量和延遲的方法，并且通過保持兩端連接而模擬出一個全雙工連接。通信方式如下圖所示：

來自官網(wǎng)

WebSocket提供的獨特功能之一就是它能夠穿越防火墻和代理。
WebSocket檢測到代理服務器的存在，并自動設置一個通道來通過代理服務器。隧道是通過向代理服務器發(fā)出HTTP連接語句來建立的，該語句請求代理服務器打開到特定主機和端口的TCP/IP連接。一旦建立了隧道，通信就可以暢通無阻地通過代理。
總而言之，websocket就是一個可以保持長連接，和http沒有半毛錢關(guān)系的一種新協(xié)議。在沒有這個而之前，當我們想要獲取實時的數(shù)據(jù)，總不能一直發(fā)起http請求，一直追問服務器有沒有數(shù)據(jù)吧，而且http是一次連接，完成任務后就斷開，如果一直不斷連接斷開，就會造成不必要的網(wǎng)路流量。此時，救星登場了，websocket只要一次連接，發(fā)送完該發(fā)的信息（具體和服務端協(xié)商），然后就開始躺著等數(shù)據(jù)，開一個監(jiān)控，只要服務器有數(shù)據(jù)推送過來，再起來干活，這樣網(wǎng)絡通信流量的壓力就會小很多。

二、實例

拿現(xiàn)手的一個小頁面做例子:實現(xiàn)一個查看人員實時位置的地圖
當一切布局，地圖巴拉巴拉一堆東西完成之后
（1）連接

initWebSocket () {
    this.websocket = new WebSocket(
    `ws://xxx:8081/webSocket/${this.userId}`
    )
    var that = this.websocket
    that.onopen = this.websocketonopen
    that.onerror = this.websocketonerror
    that.onmessage = this.websocketonmessage
    that.onclose = this.websocketclose
}

先創(chuàng)建一個WebSocket對象，this.userId是與后端協(xié)商好的，一個用于標識用戶身份的。接下去就是對發(fā)送成功、發(fā)送失敗、接受到服務器的數(shù)據(jù)和連接關(guān)閉的監(jiān)聽設置。
（2）發(fā)送成功時

websocketonopen () {
    console.log('WebSocket連接成功')
    const data = { user_id: this.userId, group_id: 1}
    this.websocket.send(JSON.stringfy(data))
}

定義websocket連接完成后，進行的操作，此時可以發(fā)送一些參數(shù)，但是注意，基于socket的數(shù)據(jù)發(fā)送只支持字符串或者二進制流。
（3）發(fā)送失敗時

websocketonerror (e) {
      console.log('WebSocket連接發(fā)生錯誤')
 },

（4）監(jiān)聽數(shù)據(jù)

websocketonmessage (e) {
    if (e.data !== '連接成功') {
        let data = JSON.parse(e.data)
        this.userArr = data
        // 此處為對接收到的數(shù)據(jù)進行的操作
        // ...
    } else {
        this.delOverlay()
    }
    }
}

同樣接收到的數(shù)據(jù)，也是字符串格式的，我們只要解析一下就可以了
（5）關(guān)閉連接

websocketclose (e) {
    console.log('connection closed (' + e.code + ')')
},

返回一個對象，有返回碼，這個操作，對于vue我們可以在destroy生命周期摧毀階段打印出來
注意：
如果遇到了websocket跨域的問題，可以使用socket.io庫，他幫我們很好地封裝了websocket
參考文章： https://www.zhihu.com/question/20215561