websocket+sockjs+stompjs詳解及實例

最近有項目需求要用到websocket,剛開始覺得很簡單，可是隨着遇到問題，深刻了解，才知道websocket並非想象中的那麼簡單，這篇文章主要是考慮websocket在客戶端的使用。

1.http與websocket

http超文本傳輸協議，你們都很是熟悉，http有1.0、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）的上層協議。

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

二、直接使用 WebSocket（SockJS） 就很相似於 使用 TCP 套接字來編寫 web 應用，由於沒有高層協議，就須要咱們定義應用間所發送消息的語義，還須要確保鏈接的兩端都能遵循這些語義；

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

5.使用實例

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

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，咱們還須要深刻了解一些底層的原理以及相關的知識。