stompjs應用的簡單封裝

一個stompjs的簡單應用

在線demo

在線演示：click here
github: https://github.com/chuxiaoguo/wrapper-stompjs

介紹

sockjs-client

sockjs-client是從SockJS中分離出來的用於客戶端使用的通訊模塊.因此咱們就直接來看看SockJS.SockJS是一個瀏覽器的JavaScript庫,它提供了一個相似於網絡的對象,SockJS提供了一個連貫的,跨瀏覽器的JavaScriptAPI,它在瀏覽器和Web服務器之間建立了一個低延遲,全雙工,跨域通訊通道.你可能會問,我爲何不直接用原生的WebSocket而要使用SockJS呢?這得益於SockJS的一大特性,一些瀏覽器中缺乏對WebSocket的支持,所以，回退選項是必要的，而Spring框架提供了基於SockJS協議的透明的回退選項。SockJS提供了瀏覽器兼容性,優先使用原生的WebSocket,若是某個瀏覽器不支持WebSocket,SockJS會自動降級爲輪詢.

stomjs

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的簡單文本協議;
WebSocket是一個消息架構,不強制使用任何特定的消息協議,它依賴於應用層解釋消息的含義.
與HTTP不一樣,WebSocket是處在TCP上很是薄的一層,會將字節流轉化爲文本/二進制消息,所以,對於實際應用來講,WebSocket的通訊形式層級太低,所以，能夠在 WebSocket 之上使用STOMP協議，來爲瀏覽器 和 server間的 通訊增長適當的消息語義。

使用

導入包

1. npm install --save sockjs-client@1.0.0
2. npm install --save stompjs@2.3.3
3. npm install --save wrapper-stompjs

示例

1. 導入文件websock.js
2. 經過構造函數新建一個websocket實例（能夠經過傳入參數修改實例屬性），同時傳入接收消息的回調
3. 調用init方法啓動ws的推送

4. 調用destroyed銷燬實例，並中止推送

import {WebSocketFactory} from 'wrapper-stompjs';

const config = {

debug: true,

socketId: '408755***@qq.com',

socketTicket: Cookie.getToken(),

socketUrl: '//113.88.13.224:9205/bas-ws-endpoint',

subscribeTag: '/user-ws/' + this.socketId + '/ws/noticeCenter',

sendMsgTag: '/bas-ws-receive/ws/noticeCenterHeartBeat'

}

// 建立ws實例

const ws = new WebSocketFactory(

config,

(message) => {

  // 接收到推送的消息

},

(success) => {

// 成功鏈接回調

console.log(success);

},

(err) => {

// 鏈接失敗的回調

console.log(err);

}

);

// 開啓ws推送

ws.init();

// 關閉ws推送

ws.stopConnect();

// 銷燬實例

ws.destroyed();

若是你想作失敗重連機制，能夠經過監聽失敗的回調，從新調用init方法，直到執行成功的回調

api

public

屬性	說明
socketId	socketId的標識，通常是用戶的帳號（郵件，手機號），若是都不是，則是一個時間戳
socketTicket	socket的Ticket，即用戶的ticket，通常從cookie中取
heartBeatTime	心跳發送的間隔時間，默認是1分鐘
debug	是否開啓debug模式，默認是開啓
socketUrl	socket的訂閱地址
subscribeTag	socket的訂閱地址後綴標籤
sendMsgTag	訂閱發送心跳的地址

interface WebSocketParams {

socketId?: string,  
socketUrl?: string,  
socketTicket?: string,  
subscribeTag?: string,  
sendMsgTag?: string,  
heartBeatTime?: number,  
debug?: boolean;

}

type newWsType = new (

config?： WebSocketParams,

(message) => {

  // 接收到推送的消息

},

(success) => {

// 成功鏈接回調

console.log(success);

},

(err) => {

    // 鏈接失敗的回調

    console.log(err);

)
}

方法	說明
new ()	初始化ws實例，參數一是配置（若是沒有，填null），參數二註冊推送消息的回調（選填），參數三鏈接成功的回調（選填），參數四是鏈接失敗的回調（選填）
init()	開啓ws推送
stopConnect()	斷開websocket推送
destroyed()	銷燬websocket實例

private

方法	說明
receiveMQCb	接收消息的回調
connectSucCb	接收消息的回調
connectErrCb	接收消息的回調
stompClient	stomp對象
subscription	stomp訂閱對象的引用
timer	輪訓器的引用
initWebSocketProp()	初始化配置項
createdSocketId()	若是沒有指定的socketId，會從localStorage，建議傳入socketId
onConnect()	ws鏈接成功的回調
pollSendHeartBeat()	發送心跳
onError()	推送異常