WebSocket 库

安装

npm i @moonphy/websocket

使用方法(推荐使用 composition API 方式解耦)

import InWebsocket from '@moonphy/websocket'
const ws = new InWebsocket() < IWSResData > ('ws://10.135.8.33:8001', {})
ws.sendJson({ messageType: 'ccc', data: { a: 1, b: 2 } })
ws.messageTypeJson('ccc', (data) => {
  console.warn(data)
})

composition API

| 名字 | 参数 | 返回值 | 说明 | | ------------------------- | --------------------------------------------------- | ---------------- | ----------------------------------------------------------- | | createWebsocket | (url:string,opts?:InWebsocketOpts) | InWebsocket 实例 | 创建一个 websocket 支持异步创建 | | createWebsocketByMutil | (name:string,url:string,opts?:InWebsocketOpts) | InWebsocket 实例 | 创建一个 有名字的 websocket 支持异步创建 | | message | callback(event) | void | 接受所有的消息 | | messageByMutil | (name:string,callback(event)) | void | 具有名字的接受所有的消息 | | send | (msg:string) | void | 发送任意数据 | | sendByMutil | (name:string, msg:string) | void | 具有名字的发送任意数据 | | close | (name?:string) | void | 手动关闭连接 | | sendJson | (msg: T, notResend?: boolean) | void | 发送 JSON 类型数据 | | sendJsonByMutil | (name: string, msg: T, notResend?: boolean) | void | 具有名字的发送 JSON 类型数据 | | messageTypeJson | (type:String,callback(jsonData,event)) | void | 返回指定类型的消息 | | messageTypeJsonByMutil | (name:string,type:String,callback(jsonData,event)) | void | 具有名字返回指定类型的消息 | | getSocket | (name?:string) | InWebsocket 实例 | | | closeAll | void | void | 关闭所有的 socket | | offMessageTypeJson | (type:String,callback?(jsonData,event)) | void | 关闭指定类型的接收消息, callback 不传递关闭该类型所有的监听 | | offMessageTypeJsonByMutil | (name:string,type:String,callback?(jsonData,event)) | void | 关闭指定类型的接收消息, callback 不传递关闭该类型所有的监听 | | offMessage | (callback?(jsonData,event)) | void | 关闭全局消息监听, callback 不传递关闭全局所有的监听 | | offMessageByMutil | (name:string,callback?(jsonData,event)) | void | 关闭全局消息监听, callback 不传递关闭全局所有的监听 |

// 使用示例

import { createWebsocket, sendJson, messageTypeJson, message, offMessage, offMessageTypeJson } from '@moonphy/websocket'
setTimeout(() => {
  createWebsocket('ws://10.135.8.33:8001') // 支持异步连接
}, 1000)

sendJson({ messageType: 'ccc', data: { a: 1, b: 2 } })
sendJson({ messageType: 'dddds', data: { a: 11, b: 211 } })

message((event) => {
  console.warn('所有响应的数据')
  console.warn(event)
})
messageTypeJson('ccc', (data) => {
  console.warn('第一次监测')
  console.warn(data)
})
messageTypeJson('ddd', (data) => {
  console.warn('第一次监测dd')
  console.warn(data)
})
function secTest(data: any) {
  console.warn('第二次监测')
  console.warn(data)
}
messageTypeJson('ccc', secTest)

setTimeout(() => {
  offMessageTypeJson('ccc')
  offMessage()
}, 5000)

多 socket 示例

import { createWebsocketByMutil, sendJsonByMutil, messageByMutil, messageTypeJsonByMutil } from '../src/index'
const name = 'socket1'
setTimeout(() => {
  createWebsocketByMutil(name, 'ws://10.135.8.33:8001')
}, 1000)

setInterval(() => {
  sendJsonByMutil(name, { messageType: 'mutil', data: { a: 1, b: 2, time: Date.now() } })
}, 1000)

messageByMutil(name, (event) => {
  console.warn('所有mutil响应的数据')
  console.warn(event)
})
messageTypeJsonByMutil(name, 'ccc', (data) => {
  console.warn('第一次mutil监测')
  console.warn(data)
})

messageTypeJsonByMutil(name, 'ccc', (data) => {
  console.warn('第二次mutil监测')
  console.warn(data)
})

new InWebsocket(url,opts)

url: 长连接的 url 必须

opts: 非必填

| 名字 | 类型 | 默认值 | 说明 | | -------------------- | ------- | -------------------------------------------- | ------------------------------------------------------------------- | | pingHeartBeatTimeout | Number | 10000 | 发送心跳间隔时间 | | pongHeartBeatTimeout | Number | 30000 | 心跳响应超时时间 | | pingMsg | String | JSON.stringify({ messageType: 'HEARTBEAT' }) | 发送心跳的内容 | | pongMsg | String | JSON.stringify({ messageType: 'HEARTBEAT' }) | 响应心跳的内容,用于过滤 message , isCheckPongMsg 为 true 的时候有效 | | checkHeartBeat | Boolean | true | 是否发送心跳包 | | reconnectMaxCount | Number | 5 | 连接断开的时候,重试连接次数 | | messageType | String | messageType | 用于 JSON 数据响应的时候判断消息 Type 的值 | | isOnlineReConnect | String | true | 网络恢复的时候是否重连 | | isCheckPongMsg | String | true | 是否检测响应的消息 | | isCloseReconnect | String | false | 关闭了连接是否自动重连 |

ws 对象方法/属性

| 名字 | 参数 | 返回值 | 说明 | | ------------------ | --------------------------------------- | ------ | ------------------ | | send | msg:String | void | 发送字符串消息 | | message | callback(event) | void | 接受所有的消息 | | close | void | void | 手动关闭连接 | | sendJson | data:JSON | void | 发送 JSON 类型数据 | | messageTypeJson | (type:String,callback(jsonData,event)) | void | 返回指定类型的消息 | | ws | | | 原生的 ws 对象 | | offMessageTypeJson | (type:String,callback?(jsonData,event)) | void | 关闭消息推送 | | offAllMessage | void | void | 关闭所有消息 |