微信小程序webscoket二次封装,基本能满足大部分使用场景

380 阅读2分钟

上家公司离职,总结一下在上家公司工作时造的一下轮子,顺便在这边分享一下

由于上家公司做的是跟小程序的产品的有关,用到了webScoket,今天就在这边分享一下当时造的轮子,新人第一次发帖,刚入门的小白一枚,不喜请口下留情啊。。。

gitHub地址

基于微信小程序的scoket 上进行的二次封装

  • 加入观察者模式,可以跨页面接收任何scoket数据
  • 支持后端数据拦截,dataValidation方法可以拦截任何后端返回数据,进行数据发送成功或者失败判断
  • scoket支持自动重连,并且可以设置重连次数 重连间隔时间
  • scoket支持实例化时立即创建并连接,也可以手动创建并连接
  • 前后端约定指令支持参数化配置
  • 支持scoket创建成功/失败回调 scoket 打开成功/失败回调
  • 目前只是自己随便测过,使用前最好自己先测试一下,如有问题可以联系vx:b948993029
config字段名类型描述
DebugBoolean是否开启调试,开启后会打印每个阶段的调试信息,也可以自己增加打印信息
environmentBooleantrue 正式 false 测试服务器
HttpSocketUrlString正式环境scoketuUrl地址
HttpTestSocketUrlString测试环境scoketuUrl地址
scoketHeaderObjectscoket Header 头部信息 例如:{'content-type': 'application/json'}
heartBeatWaitNumber心跳间隔 单位/毫秒
autoReconnectNumMaxNumber自动重连次数 0代表一直尝试重连
reconnectionIntervalNumber自动重连间隔 单位/毫秒
IscreateBoolean值:true 对象实例化时立即创建并连接 值:false 对象实例化时不立即创建并连接,可以调用 createScoket()方法进行创建并连接
instructionCheckFunction(data)返回值跟监听时输入的key要匹配上,否则会监听不到,解析到后端返回的指令后,把值 return 回去
heartbeatConnectionFunction(无返回值)/Object心跳连接例如1:Function(){ wx.$scoket.sendMsg({action:4,chatMsg:null})}例如2:Object {action:4,chatMsg:null}
dataValidation接收数据校验 用于判断后端返回的数据是成功还是失败 成功 return true 失败 return false
successFunction(data)scoket 链接创建成功/打开成功回调
failFunction(data)scoket 链接创建失败/打开失败回调

使用示例

const scoket = require('./xxx/webScoket.js');

    const config = {
      Debug: false, //是否开启调试
      environment: true, //true 正式  false 测试服务器
      HttpSocketUrl: 'xxxxxxxxxxx', //正式环境
      HttpTestSocketUrl: 'xxxxxxxx', //测试环境
      scoketHeader: { // scoket Header
        'content-type': 'application/json'
      },
      heartBeatWait: 2000, //心跳间隔 ms
      autoReconnectNumMax: 2, //自动重连次数 0代表无数次
      reconnectionInterval: 10000, // 重连间隔 ms
      Iscreate: true, // 是否立即连接
      instructionCheck:(data)=>{},// 后端返回指令校验 
      heartbeatConnection:(data)=>{}, // 心跳连接
      dataValidation:(data)=>{},// 接收数据校验 用于判断后端返回的数据是成功还是失败  成功 return true  失败  return false
      success: (res) => {},// scoket 创建成功/打开成功回调
      fail: (err) => {},// scoket 创建失败/打开失败回调
    }
    

scoket实例方法

方法参数描述
onon(string,success,fail)用于监听后端返回消息 wx.$scoket.on('前后端约定指令',success 数据接收成功,fail:数据接收失败)
onceon(string,success,fail)只监听一次后端返回消息 wx.$scoket.once('前后端约定指令',success 数据接收成功,fail:数据接收失败)
offon(string)取消监听 wx.$scoket.off('前后端约定指令')
sendMsgsendMsg(object,success,fail)发送消息sendMsg(’要发送给后端的数据对象',success 数据接收成功,fail:数据接收失败)
closeScoketcloseScoket()关闭scoket
      wx.$scoket = new scoket(config);//  初始化对象实例
            
            // 监听 bind 指令
      wx.$scoket.on('bind' // 前后端约定指令 ,(res)=>{
        console.log('接收成功',res)
      },(err)=>{
        console.log('数据错误',err)
      })
      
      // 监听一次 sayworld 指令
      wx.$scoket.once('sayworld',(res)=>{
        console.log('接收成功',res)
      },(err)=>{
        console.log('数据错误',err)
      })

            wx.$scoket.off('sayworld'// 前后端约定指令,);
      
      // 发送 scoket 消息
      wx.$scoket.sendMsg({
          action:4, // 指令
          chatMsg:null,// 消息体
        },(res)=>{
        console.log('发送成功',res)
      },(err)=>{
        console.log('发送失败',err)
      })
      
      // 关闭scoket 链接
      wx.$scoket.closeScoket()