wsocket

概述

前端 websockt 封装, 有心跳检测, 断线重连功能

组件安装

使用示例

import WSocket form '@binlun/wsocket'

const ws = new WSocket(`wss://xxx`, {
  // 最大重连次数，进入页面的第1次不算重连
  maxConnectCount = 5
  // 重连的时间间隔
  reconnectInterval = 2000
  // 心跳检测ping间隔
  pingInterval = 5000
  // 心跳检测pong间隔
  pongInterval = 3000
  // 是否开启心跳检测
  isHeart = true
  // 是否响应pong
  isPongResponse = false
  // 是否断开重连
  isReconnect = true
  // 心跳检测消息
  pingMsg = 'ping'
  pongMsg = 'SUCCESS'
  // 是否开启错误消息队列功能
  isErrorStack = false
})

接口文档

属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | | -------- | :------: | :------: | :------------------: | :---------------------------------------------------- | | maxConnectCount | number | option | 5 | 最大重连次数，进入页面的第1次不算重连 | | reconnectInterval | number | option | 2000 | 重连的时间间隔 | | pingInterval | number | option | 5000 | 心跳检测ping间隔 | | pongInterval | number | option | 3000 | 心跳检测pong间隔 | | isHeart | boolean | option | true | 是否开启心跳检测 | | isPongResponse | boolean | option | false | 是否响应pong | | isReconnect | boolean | option | true | 是否断开重连 | | pingMsg | string | option | 'ping' | 心跳检测发送的消息 | | pongMsg | string | option | 'SUCCESS' | 心跳检测响应的消息 | | isErrorStack | boolean | option | false | 是否开启错误消息队列功能 |

方法

| 方法名称 | 说明 | 参数 | 对应触发的事件 | | - | - | - | - | | destroy | 销毁 | - | destroy | | start | 手动开启ws | - | start | | close | 手动关闭ws | - | close | | send | 发送消息 | function(msg) | send | | on | 订阅消息 | function(evtName, cb) | - | | off | 取消订阅 | function(evtName, cb) | - | | emit | 发布订阅 | function(evtName, ...args) | - |

其它事件

| 事件名称 | 说明 | 参数 | | - | - | - | | message | 接收 WebSocket 消息时触发 | function(msg) | | ws-message | 接收 WebSocket 消息时触发 | function(evt) | | ws-close | ws关闭时触发 | function(evt) | | ws-error | ws错误时触发 | function(evt) | | ws-open | ws打开时触发 | function(evt) |

目录结构

.
├── index.js ----------------------  npm入口文件，新增组件时需要在这里添加
├── lib ---------------------------  打包代码
├── examples ----------------------  示例代码
    ├── assets --------------------  静态资源目录
    ├── main.ts -------------------  示例入口
    ├── App.vue -------------------  示例实现
├── public ------------------------  html上引用的公共资源
└── src ---------------------------  源码目录
    ├── components ----------------  组件目录
        ├── helloworld ------------  具体的组件
        ├── helloworld2 -----------  具体的组件
├── index.hml ---------------------  页面入口