最近有項目需求要用到websocket,剛開始以為很簡單，但是隨著遇到問題，深入了解，才知道websocket并不是想象中的那么簡單，這篇文章主要是考慮websocket在客戶端的使用。

1.http與websocket

http超文本傳輸協議，大家都非常熟悉，http有1.0、1.1、 2.0幾個版本，從http1.1起，默認都開啟了Keep-Alive，保持連接持續性，簡單地說，當一個網頁打開完成后，客戶端和服務器之間用于傳輸http數據的TCP連接不會關閉，如果客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經建立的連接，這樣就降低了資源的消耗優化性能，但是Keep-Alive也是有時間限制的，還有一個客戶端只能主動發起請求才能獲取返回數據，并不能主動接收后臺推送的數據，websocket便應運而生。

websocket 是html5新增加特性之一，目的是瀏覽器與服務端建立全雙工的通信方式，解決 http 請求-響應帶來過多的資源消耗，同時對特殊場景應用提供了全新的實現方式，比如聊天、股票交易、游戲等對對實時性要求較高的行業領域。

http與websocket都是基于TCP(傳輸控制協議)的，websocket可以看做是對http協議的一個補充

2.SockJs

SockJS是一個JavaScript庫，為了應對許多瀏覽器不支持WebSocket協議的問題，設計了備選SockJs。SockJS 是 WebSocket 技術的一種模擬。SockJS會盡可能對應 WebSocket API，但如果WebSocket 技術不可用的話，會自動降為輪詢的方式。

3.Stompjs

STOMP—— Simple Text Oriented Message Protocol——面向消息的簡單文本協議。

SockJS 為 WebSocket 提供了 備選方案。但無論哪種場景，對于實際應用來說，這種通信形式層級過低。 STOMP協議，來為瀏覽器 和 server 間的 通信增加適當的消息語義。

4.WebSocket、SockJs、STOMP三者關系

簡而言之，WebSocket 是底層協議，SockJS 是WebSocket 的備選方案，也是底層協議，而 STOMP 是基于 WebSocket（SockJS）的上層協議。

1、HTTP協議解決了 web 瀏覽器發起請求以及 web 服務器響應請求的細節，假設 HTTP 協議 并不存在，只能使用 TCP 套接字來 編寫 web 應用。

2、直接使用 WebSocket（SockJS） 就很類似于 使用 TCP 套接字來編寫 web 應用，因為沒有高層協議，就需要我們定義應用間所發送消息的語義，還需要確保連接的兩端都能遵循這些語義；

3、同HTTP在TCP 套接字上添加請求-響應模型層一樣，STOMP在WebSocket 之上提供了一個基于幀的線路格式層，用來定義消息語義；

5.使用實例

安裝 sockjs-client、stompjs；在這兒要注意一下，我在"stompjs": "^2.3.3"這個版本發現，引入stompjs會報一個net模塊找不到，需要在stompjs模塊根目錄下執行npm install，這個是個奇葩的問題。

引入模塊：

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

// 連接函數
let number = 1;
function reconnect(socketUrl) {
    let url = `${BASE_URL}/ws/sdfpoint`; //連接地址
    // 建立連接對象（還未發起連接）
    let socket = new SockJS(url);
    // 獲取 STOMP 子協議的客戶端對象
    let stompClient = Stomp.over(socket);
    // 向服務器發起websocket連接并發送CONNECT幀
    stompClient.connect(
        {},//可添加客戶端的認證信息
        function connectCallback (){//連接成功的回調函數
            //訂閱頻道
            stompClient.subscribe('/topic/display/control', function(data){
                if (data) {
                    console.log('subscribe data',data);
                }
            })
        },
        function errorCallBack(error){  
        //連接失敗時再次調用函數
            number += 1;
            if(number<=10){
                reconnect(url);
            }
            console.log('error',error);
        }
    )     
}

總結：websocket 的實現客戶端看起來比較簡單，但是需要與后臺進行很好的配合和調試才能達到最佳效果。通過SockJS、Stomp來進行瀏覽器兼容，增加消息語義，增強了可用性。要徹底搞懂websocket，我們還需要深入了解一些底層的原理以及相關的知識。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。