Socket-ws-client

安装

$  yarn add socket-ws-client

Config

interface SocketClientConfig {
  query?: Record<string, any> // 请求参数
  immediate?: boolean // 是否立即建立连接 默认 true
  transformProtocol?: boolean // 是否转换协议 http=>ws https=>wss 默认 true
  protocols?: any // 原生new WebSocket(url,protocols?)的第二个参数
  binaryType?: 'blob' | 'arraybuffer' // websocket 连接所传输二进制数据的类型
  heartbeat?: {
    // 心跳相关配置
    interval?: number // 心跳间隔 默认 3*1000 3秒
    pingFormat?: string | (() => any) // 心跳发送数据 默认 ping
    pongMatch?: string | RegExp | ((data: MessageEvent) => boolean) // 匹配服务端ping返回
    timeoutCount?: number // 心跳超时次数  默认 0 不启用超时
    //  timeoutCount和timeout同时配置才会开启心跳超时
    timeout?: number // 心跳超时时间 默认 0
    ignore?: boolean // message事件过滤掉ping返回消息	默认 true
    //  pongMatch匹配成功则不进入到message里
  }
  reconnect?: {
    // 重连相关配置
    interval?: number // 重连间隔 默认 3*1000 3秒
    retryCount?: number // 重来尝试次数 默认 Infinity 无数次
  }
}

Property

| 属性 | 描述 | 类型 | | -------------- | ---- | ------------- | | binaryType | websocket 连接所传输二进制数据的类型 | "arraybuffer" | "blob" | | bufferedAmount | 只读属性，用于返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数 | number | | extensions | 只读属性，返回服务器已选择的扩展值 | any | | protocol | 只读属性，用于返回服务器端选中的子协议的名字 | any |

Methods

| 方法 | 描述 | 类型 | | ------- | ------------------------------------------------------------ | --------------------------- | | connect | 手动触发建立socket连接 | ()=>void | | send | 建立连接后发送消息数据,object类型数据会自动做JSON.stringify处理 | (data:any)=>void | | close | 关闭socket连接 | ()=>void | | dispose | 卸载socket | ()=>void | | on | 注册事件 | (EventName,(...args)=>void) | | off | 移除事件 | (EventName,(...args)=>void) |

EventName

| 事件名称 | 描述 | | | -------- | ------------------------------------------------------------ | -------------------------- | | state | 状态更改事触发 | (state:State)=>void | | open | 建立socket连接时触发 | (event:Event)=>void | | message | 服务端下发消息时触发,对于string类型的服务端消息event.data会尝试做JSON.parse处理,转换不成功会返回源数据类型 | (event:EventMessage)=>void | | close | 关闭socket连接时触发 | (event:Event)=>void | | error | 连接出错时触发 | (event:Event)=>void |

State

enum State {
  Initial = 0, // 初始化
  Connecting = 1, // 连接中
  Open = 2, // 已连接
  Reconnect = 3, // 等待尝试重连
  Closing = 4, // 关闭中
  Closed = 5, // 已关闭
  Error = 6 // 连接错误
}

使用

import { SocketClient, State } from 'socket-ws-client'

const socket = new SocketClient('http://localhost:8392', {
  query: {
    id: '726'
  },
  heartbeat: {
    timeout: 1000 * 3,
    timeoutCount: 5,
    pongMatch: event => {
      return event.data === 'pong'
    },
    interval: 1000 * 3,
    pingFormat: 'ping'
  },
  reconnect: {
    interval: 1000 * 5,
    retryCount: 10
  }
})

socket.on('open', () => {
  console.log('socket 连接已连接')
})

socket.on('state', state => {
  switch (state) {
    case State.Connecting:
      console.log('连接中')
      break
    case State.Open:
      console.log('连接成功')
      break
    case State.Reconnect:
      console.log('尝试重连中')
      break
    case State.Closing:
      console.log('关闭中')
      break
    case State.Closed:
      console.log('已关闭')
      break
    case State.Error:
      console.log('连接出错')
      break
  }
})

socket.on('message', event => {
  console.log('接收消息', event)
})

socket.on('close', () => {
  console.log('socket 连接已关闭')
})

function handleSend() {
  const sendData = {
    id: 0,
    message: 'hello'
  }
  socket.send(sendData)
}

function handleClose() {
  socket.close()
}

function handleConnect() {
  socket.connect()
}