最近由于项目业务需求,需要利用websocket完成本地服务与浏览器之间的数据传输。为了满足这个需求,这里自行封装了websocket-sdk 这个工具。
一: 首先介绍下websocket-sdk 它的作用
websocket-sdk 已经处理好了 websocket 的 连接 / 心跳检测 / 推送 / 接收 / 错误重连 / 主动断开。
同时,websocekt-sdk根据配置信息可以完成本地服务与浏览器之间的数据传送和交互(同时可以检测本地版本是否为最新版本,若不是,则重新下载), 也可以完成浏览器和服务器之间的数据传递。
二:webscoket-sdk 的具体使用说明
1. 安装
- For JQuery and original js
Download from npmjs
npm install @styleofpicasso/websocket-sdk
add js to html
<script type="text/javascript" src="/webstart-sdk.min.js"></script>
- For TypeScript such as Angular Vue React
install
npm i @styleofpicasso/websocket-sdk --save-dev
import
import * as WebSocketSdk from '@styleofpicasso/websocket-sdk';
2. 使用
初始化
WebSocketSdk.init(eventHandler, config);
eventHandler(event) 全局的事件处理回调
- event.type:
- log:全局日志
- clientStatus:本地程序状态变化
- result:执行全局结果
- check:检测结果
- event.message 消息
- event.data 数据
- event.status 状态码
function eventHandler(event) {
if (event.type === 'log') {
// 日志
} else if (event.type === 'clientStatus') {
// 本地程序状态变化
// event.status:(OFF,ON,INITIAL)
} else if (event.type === 'result') {
// 执行全局结果
} else if (event.type === 'check') {
// 检测结果执行
}
}
config 启动配置
{
// 是否自动启动或下载本地客户端(此项为选择配置项,若不配置或为false,将不会自动下载客户端, 以致agentAdminUrl 配置项失效)
autoStart: true, // Optional
// 获取最新客户端版本的地址 (当autoStart为 true时, 此项必须要配置,否则会报错)
agentAdminUrl: 'pcp://36666/',
// websocket 心跳检测频率时间
heartBeatCheckTimeout: 1000,
// 心跳检测需要推送的配置参数
heartBeatParam: {},
// 自定义的websocketurl地址 (此项可选择配置项, 没有配置的情况下会走sdk中的本地地址,【本地地址会在port配置项的端口中轮询,知道成功】, 若配置了此项,则port项就会失效)
websocketUrl: '',
port: [36666, 36667, 36668], // Default port Optional since V0.3.0
// 启动后默认调用的一次数据接口(此项为可选择配置项:不配置活配置为空这样初始化之后不会注册控制台 [此项和defaultParam匹配使用])
defalutCmd: 'statusService.register',
// 启动后默认调用一次数据的参数(params 此项为可选择配置项)
defaultParam: {"clientType":"C"},
// 链接失败后,连续重连最大次数
reconnectMaxTimes: 100,
// 是否自动检测客户端版本 (此项为选择配置项; 不配置或为false, 将不会自动检测客户端版本 下面三项配置【appVersion/appVersionUrl/appVersionCmd】将会失效)
autoCheckAppVersion: true;
// 客户端版本
appVersion: '1.2.2',
// 下载客户端最新版本的地址
appVersionUrl: '',
// 检测客户端当前版本的cmd
appVersionCmd: 'appService.version'
}
发送命令 (参数是一个对象)
var cmdId = WebSocketSdk.exec({cmd: 'cmd001', bizData: {
param1: '123',
param2: '456'
}, clientTo: {}}, function (res) {
log('同步返回值' + JSON.stringify(res));
});
if (cmdId !== null) {
log('执行命令已发送:' + cmdId);
} else {
log('执行命令发送失败');
}
下载最新客户端版本
/**
*下载最新版本的客户端
*/
webSocketSdk.download();
退出程序
/**
* 退出程序,向后台发送退出命令
*/
WebSocketSdk.exit();
退出通信模式
/**
* 退出通信,不向后台发送退出命令,仅前端退出
*/
WebSocketSdk.disconnect();
以上就是websocket-sdk的作用 以及使用说明,希望可以帮到大家,若是有什么不足还希望大家多多指出。 关于websocket-sdk的 具体使用也可以参照 https://www.npmjs.com/package/@styleofpicasso/websocket-sdk
(若是当前功能还无法满足您的所有需求,可以提出,这里将跟进优化)
最后: 十一 中秋双假刚结束。也望大家工作愉快