if-ws-queue

Worker

字段
id	非必需，可缺省。注册多Worker时必须指定ID
url	必需，加载worker的地址

Websocket

id	可缺省，注册多个WS服务时，必须指定ID
url	必需，WS链接地址
protocol	header携带的sec-websocket-protocol参数，用于携带额外的参数。但目前推荐使用GET方式在url中添加参数

Event

id	可缺省， 当缺失该参数时，将会注册为默认事件
loop	布尔值， 事件是否进行轮询
timeout	事件触发间隔，当loop为true的时候，该参数才有意义
data	自定义的传参，注意，在实际传参时，将会自动追加事件的id，您可以flag参数映射该键值

实现

Woker队列管理 WSQueue

one(workerOption, socketURL, protocol, socket_id)	创建一个Worker线程，或创建一个Socket链接， 返回IfWorkerSocket对象
close(workerId)	关闭一个Worker线程
get(workerId)	查询并返回一个IfWorkerSocket对象

IfWorkerSocket对象

socket(socketURL, protocol, socket_id)	创建一个IfSocket对象实例，并尝试创建socket链接
getSocket(socket_id)	查询并返回一个IfSocket对象
close(socket_id)	关闭一个socket链接

IfSocket对象

send(data)	通过socket发送消息
close()	关闭当前socket链接
reconnect()	尝试重新创建socket链接
connect(socketURL, protocol)	创建一个新的socket链接，替换当前的socket链接
register(eventOption, callback, validFn)	创建一个定时发送任务
on(eventId, callback, validFn)	监听定时任务的数据
off(eventId)	销毁定时任务
update(data, eventId)	更新定时任务的载荷数据

实战

第一步 创建WSQueue

var WSQ = new WSQueue()

第二步 创建Worker线程

var myWorker = WSQ.one(``'//awesome.obs.cn-east-3.myhuaweicloud.com/ws-queue-worker.js'``)

第三步 创建Socket链接

var mySocket.socket(``"ws://localhost:3000/basic"``, [``'ifyou'``])

第四步 数据定时交互

注册事件推荐设定一个id（否则将会使用默认id），这对监听事件的回掉数据非常关键。validFn会尝试匹配服务器返回的数据是否符合当前约定，默认期望是返回的eventId与当前事件id匹配。

当设定loop为true的时候，就获得了定时特性，你可以通过调节timeout来调节定时的频次。 当loop为false的时候，timeout的设定将没有意义。

在轮询时，你可以通过mySocket.update(data, eventId)来更新定时任务的载荷数据data。

var eventOption = {
  data: {foo: 'demo数据'},
  loop: true,
  timeout: 1500,
  id: 'event-id'
};
mySocket.register(eventOption);
 
function validFn(eventId, response){
    return response.eventId === eventId
}  
 
mySocket.on('event-id', function(data){
  console.log(data)
}, validFn)

第五步 数据单向发送和接收

单向数据发送并不产生上述的eventId，对于数据接收时，你需要使用on(callback, validFn)来创建一个接收器。

mySocket.send({msg: 'Hi World'});
mySocket.on(function(data){
    console.log(data)
}, function(id, response){
   return response.flag === 'HI_World_Flag'
})

Vue 使用

import IfWSQueue from 'if-ws-queue'
app.use(IfWsQueue)

<!-- setup -->
const $wsq = useWSQ()
// ....