stompjs应用的简单封装

时间 2020-02-01

原文原文链接

一个stompjs的简单应用

在线demo

在线演示：click here
github: https://github.com/chuxiaoguo/wrapper-stompjsnode

介绍

sockjs-client

sockjs-client是从SockJS中分离出来的用于客户端使用的通讯模块.因此咱们就直接来看看SockJS.SockJS是一个浏览器的JavaScript库,它提供了一个相似于网络的对象,SockJS提供了一个连贯的,跨浏览器的JavaScriptAPI,它在浏览器和Web服务器之间建立了一个低延迟,全双工,跨域通讯通道.你可能会问,我为何不直接用原生的WebSocket而要使用SockJS呢?这得益于SockJS的一大特性,一些浏览器中缺乏对WebSocket的支持,所以，回退选项是必要的，而Spring框架提供了基于SockJS协议的透明的回退选项。SockJS提供了浏览器兼容性,优先使用原生的WebSocket,若是某个浏览器不支持WebSocket,SockJS会自动降级为轮询.git

stomjs

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议;
WebSocket是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解释消息的含义.
与HTTP不一样,WebSocket是处在TCP上很是薄的一层,会将字节流转化为文本/二进制消息,所以,对于实际应用来讲,WebSocket的通讯形式层级太低,所以，能够在 WebSocket 之上使用STOMP协议，来为浏览器和 server间的通讯增长适当的消息语义。github

使用

导入包

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

示例

1. 导入文件websock.js
2. 经过构造函数新建一个websocket实例（能够经过传入参数修改实例属性），同时传入接收消息的回调
3. 调用init方法启动ws的推送npm

4. 调用destroyed销毁实例，并中止推送api

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()	推送异常