websocket-front

websocket-front

前端对原生 WebSocket 的封装，默认支持自动重连，支持心跳检测

技术栈

typescript + rollup

安装

yarn add websocket-front

# 或

npm install websocket-front

使用

最简单的连接：支持自动重连，支持心跳检测

import Socket from 'websocket-front';
const socket = new Socket('ws://127.0.0.1:3001')

配置项

import Socket from 'websocket-front';
const receiveMessage = (message: Event) => {
  console.log('接收到的消息：', message)
}
const errorCallback = (error: Event) => {
  console.log('错误信息', error)
}
const closeCallback = (event: Event) => {
  console.log('关闭了', event)
}
const socket = new Socket('ws://127.0.0.1:3001', {
  // 重连
  isReconnect: true,
  reconnectTimeout: 300,
  reconnectRepeat: 5,
  // 心跳检测
  isHeartbeat: true,
  pingMsg: JSON.stringify({
          messageType: "0",
          content: "ping",
        }),
  pingTimeout: 300,
  pongTimeout: 300,
  // 回调
  onMessage: receiveMessage,
  onError: errorCallback,
  onClose: closeCallback,
})

方法

import Socket from 'websocket-front';
const socket = new Socket('ws://127.0.0.1:3001')

// 发送消息
socket.send('发送WebSocket消息');

// 关闭WebSocket
socket.close()

API

第一个参数

名称	类型	描述	默认值
url	string	websocket 地址

第二个参数对象

名称	类型	描述	默认值
isReconnect	boolean	是否需要自动重连	true
reconnectTimeout	number	自动重连间隔时间	300ms
reconnectRepeat	number	尝试自动重连的次数	3
isHeartbeat	boolean	是否支持心跳检测	是
pingMsg	string	心跳检测发送给后端的消息	'ping'
pingTimeout	number	发送心跳检测消息的延迟时间	30s
pongTimeout	number	多长时间没有收到返回的心跳就重启	300ms
protocols	string[]	指定子协议	[]

事件

名称	类型	描述	默认值
onOpen	(event:Event) => void	WebSocket 打开了的回调
onMessage	(event:Event) => void	收到后端返回的消息后的回调
onError	(error: Event) => void	收到错误信息后的回调
onClose	(event: Event) => void	WebSocket 关闭了的回调

方法

事件名称	说明	回调函数
send	向后端发送消息
close	关闭 WebSocket

兼容性

电脑端

浏览器	支持的版本
chrome	5+
Edge	12+
Safari	4+
Firefox	7+
Opera	10+
IE	10+

移动端

浏览器	支持的版本
Chrome for Android	115+
Safari on IOS	4.2 +
Samsung Internet	4+
Opera Mobile	12.1+
Android Browser	4.4+
Firefox for Android	115+