websocket+sockjs+stompjs的示例分析

這篇文章主要介紹了websocket+sockjs+stompjs的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“websocket+sockjs+stompjs的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!