websocket+sockjs+stompjs詳解及實例

keithyau 發布于2019-08-02 12:09 / 891人閱讀

摘要：面向消息的簡單文本協議。為提供了備選方案。但無論哪種場景，對于實際應用來說，這種通信形式層級過低。協議，來為瀏覽器和間的通信增加適當的消息語義。協議解決了瀏覽器發起請求以及服務器響應請求的細節，假設協議并不存在，只能使用套接字來編寫應用。

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

云服務器 GPU云服務器 database詳解及實例變量及數據詳解 GZip實例詳解內部類實例詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53378.html

websocket+sockjs+stompjs詳解及實例

摘要：面向消息的簡單文本協議。為提供了備選方案。但無論哪種場景，對于實際應用來說，這種通信形式層級過低。協議，來為瀏覽器和間的通信增加適當的消息語義。協議解決了瀏覽器發起請求以及服務器響應請求的細節，假設協議并不存在，只能使用套接字來編寫應用。最近有項目需求要用到websocket,剛開始以為很簡單，但是隨著遇到問題，深入了解，才知道websocket并不是想象中的那么簡單，這篇文章主要是...

remcarpediem 2019-08-23 13:48 評論0 收藏0
websocket+sockjs+stompjs詳解及實例

摘要：面向消息的簡單文本協議。為提供了備選方案。但無論哪種場景，對于實際應用來說，這種通信形式層級過低。協議，來為瀏覽器和間的通信增加適當的消息語義。協議解決了瀏覽器發起請求以及服務器響應請求的細節，假設協議并不存在，只能使用套接字來編寫應用。最近有項目需求要用到websocket,剛開始以為很簡單，但是隨著遇到問題，深入了解，才知道websocket并不是想象中的那么簡單，這篇文章主要是...

Corwien 2019-08-29 17:26 評論0 收藏0
Vue+websocket+stompjs 實時監控坐席狀態demo

摘要：之后坐席狀態改變，可以看到有事件推送過來。關于的重連程序后服務端使用這里我直接引用我的另一個項目的部分代碼，這個沒有使用，直接使用瀏覽器原生的。重連的原理很簡單，就是檢測到斷開時，去調用我的方法，這里我也做了重連的次數限制。由于是前后端分離的demo, 程序的后端我不管，我只負責把前端做好，這只是個demo，還有很多不完善的地方。 2018-01-09新增：后端的MQ事件結構現在也...

yankeys 2019-08-21 11:24 評論0 收藏0
Vue+websocket+stompjs 實時監控坐席狀態demo

摘要：之后坐席狀態改變，可以看到有事件推送過來。關于的重連程序后服務端使用這里我直接引用我的另一個項目的部分代碼，這個沒有使用，直接使用瀏覽器原生的。重連的原理很簡單，就是檢測到斷開時，去調用我的方法，這里我也做了重連的次數限制。由于是前后端分離的demo, 程序的后端我不管，我只負責把前端做好，這只是個demo，還有很多不完善的地方。 2018-01-09新增：后端的MQ事件結構現在也...

EdwardUp 2019-08-01 16:06 評論0 收藏0