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

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括龍游網(wǎng)站建設(shè)、龍游網(wǎng)站制作、龍游網(wǎng)頁(yè)制作以及龍游網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，龍游網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到龍游省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

1.http與websocket

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

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

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

2.SockJs

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

3.Stompjs

STOMP—— Simple Text Oriented Message Protocol——面向消息的簡(jiǎn)單文本協(xié)議。

SockJS 為 WebSocket 提供了 備選方案。但無(wú)論哪種場(chǎng)景，對(duì)于實(shí)際應(yīng)用來(lái)說，這種通信形式層級(jí)過低。 STOMP協(xié)議，來(lái)為瀏覽器 和 server 間的 通信增加適當(dāng)?shù)南⒄Z(yǔ)義。

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

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

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

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

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

5.使用實(shí)例

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

引入模塊：

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

// 連接函數(shù)
let number = 1;
function reconnect(socketUrl) {
    let url = `${BASE_URL}/ws/sdfpoint`; //連接地址
    // 建立連接對(duì)象（還未發(fā)起連接）
    let socket = new SockJS(url);
    // 獲取 STOMP 子協(xié)議的客戶端對(duì)象
    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){  
        //連接失敗時(shí)再次調(diào)用函數(shù)
            number += 1;
            if(number<=10){
                reconnect(url);
            }
            console.log('error',error);
        }
    )     
}

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“websocket+sockjs+stompjs的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

新聞名稱：websocket+sockjs+stompjs的示例分析-創(chuàng)新互聯(lián)
文章出自：http://www.chinadenli.net/article34/dcegse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、App開發(fā)、網(wǎng)站排名、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)