websocket-sdk 解决本地服务与浏览器之间的连接， 以及浏览器与服务器之间的数据传输_本地sdk上传和浏览器上传

最近由于项目业务需求，需要利用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

（若是当前功能还无法满足您的所有需求，可以提出，这里将跟进优化）

 

最后： 十一 中秋双假刚结束。也望大家工作愉快