国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

websocket+sockjs+stompjs詳解及實例

remcarpediem / 674人閱讀

摘要：面向消息的簡單文本協(xié)議。為提供了備選方案。但無論哪種場景，對于實際應(yīng)用來說，這種通信形式層級過低。協(xié)議，來為瀏覽器和間的通信增加適當(dāng)?shù)南⒄Z義。協(xié)議解決了瀏覽器發(fā)起請求以及服務(wù)器響應(yīng)請求的細(xì)節(jié)，假設(shè)協(xié)議并不存在，只能使用套接字來編寫應(yīng)用。

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

1.http與websocket

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

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

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

2.SockJs

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

3.Stompjs

STOMP—— Simple Text Oriented Message Protocol——面向消息的簡單文本協(xié)議。
SockJS 為 WebSocket 提供了 備選方案。但無論哪種場景，對于實際應(yīng)用來說，這種通信形式層級過低。 STOMP協(xié)議，來為瀏覽器 和 server 間的 通信增加適當(dāng)?shù)南⒄Z義。

4.WebSocket、SockJs、STOMP三者關(guān)系

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

1、HTTP協(xié)議解決了 web 瀏覽器發(fā)起請求以及 web 服務(wù)器響應(yīng)請求的細(xì)節(jié)，假設(shè) HTTP 協(xié)議 并不存在，只能使用 TCP 套接字來 編寫 web 應(yīng)用。

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

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

5.使用實例

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99576.html

相關(guān)文章

  • websocket+sockjs+stompjs詳解及實例

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

    keithyau 評論0 收藏0

  • websocket+sockjs+stompjs詳解及實例

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

    Corwien 評論0 收藏0

  • Vue+websocket+stompjs 實時監(jiān)控坐席狀態(tài)demo

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

    yankeys 評論0 收藏0

  • Vue+websocket+stompjs 實時監(jiān)控坐席狀態(tài)demo

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

    EdwardUp 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<