美文网首页
小程序 webSocket 接入

小程序 webSocket 接入

作者: 王芊芊 | 来源:发表于2020-05-15 15:43 被阅读0次

业务需求要求发送公告通知实时推送在线的所有用户以及一些数据实时统计(订单量)
因此记录一下该功能的实现

// 数据定义
let connectStatus = 0 // websocket 连接状态 0:未连接,1:已连接
let heartListen = null // 心跳
...
Page({

  /* 重连 */
  reconnect() {
    console.log('index-尝试重连')
    wx.closeSocket() // 重连之前手动关闭一次
    this.connectSocket()
  },
  /* 创建连接 */
  connectSocket: function () {
    //使用 wss 协议
    let that = this
    var url = 'wss://test.com';    // 写入自己的url
    console.log(url,'开始连接')
    wx.connectSocket({
      url: url,
      header: {
        'content-type': 'application/json'
      },
      method: 'post',
      success: res => {
        // console.log('连接成功', res)
        // 设置连接状态
        connectStatus = 1
        // 心跳
        clearInterval(heartListen)
        heartListen = setInterval(() => {
          if (connectStatus === 0) {
            console.log('监听到没心跳了,抢救一下')
            clearInterval(heartListen)
            that.reconnect()
          } else {
            //发送信息(后端指定的,我这儿是0)
            wx.sendSocketMessage({
              data: '0',
              success: function (ret) {
                console.log('发送', ret)
              },
              fail: function (resp) {}
            });
          }
        }, 55000)
      },
      fail: err => {
        console.error('连接失败')
      }
    })
    // 监听webSocket错误
    wx.onSocketError(res => {
      console.log('index-监听到 WebSocket 打开错误,请检查!')
      // 修改连接状态
      connectStatus = 0
    })
    // 监听WebSocket关闭
    wx.onSocketClose(res => {
      console.log('监听到 WebSocket 已关闭!')
      connectStatus = 0
    })
    // websocket打开
    wx.onSocketOpen(res => {
      console.log('监听到 WebSocket 连接已打开!')
    })
    // 收到websocket消息
    wx.onSocketMessage(res => {
      if (res.data!=1){
        var resdata = JSON.parse(res.data)
      }else{
        var resdata = res
      }
      that.getSocketMsg(resdata)  // 收到的消息为字符串,需处理一下
    })
  },
  /* 收到消息 */
  getSocketMsg(data) {
  // 收到的信息是字符串,需要JSON.parse()转成json
    console.log('收到消息', data)
    let that = this
    // let dataInfo = JSON.parse(data)
   ...
    // 此处根据数据返回写入对应业务需求的逻辑
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.connectSocket()
  },
})

html5 WebSocket的Js实例教程可以参考以下地址
https://www.cnblogs.com/tinywan/p/5894403.html

相关文章

  • 小程序 webSocket 接入

    业务需求要求发送公告通知实时推送在线的所有用户以及一些数据实时统计(订单量)因此记录一下该功能的实现 html5 ...

  • 微信小程序WebSocket开发

    微信小程序WebSocket开发 让我们来实现一个简单的微信小程序WebSocket。WebSocket是一种没有...

  • 原生小程序接入echarts动态改变数据

    原生小程序接入echarts插件。点击进入echarts官网介绍接入小程序详细介绍。动态塞数据如下: wxml: ...

  • nginx反向代理webSocket配置

    最近在做项目的时候用到了webSocket协议,而且是在微信小程序中用到了webSocket,微信小程序中使用ws...

  • 小程序 websocket

    一、websocket 建立即时通讯 WebSocket是什么(简述) 微信的WebSocket接口和HTML5的...

  • 小程序WebSocket

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api...

  • QQ小程序接入echarts

    echarts官方已支持微信小程序的接入,但是并没有QQ小程序的接入指引,在某个QQ小程序的需求中又需要绘制数据图...

  • 微信集成高德地图

    微信小程序之:小程序接入高德地图SDK - 简书

  • 小程序部署流程

    小程序部署流程: 一、 注册小程序(小程序接入指南) 二、创建小程序项目(简易教程·小程序) 三、部署开发环境(开...

  • 微信小程序 WebSocket 使用非 443 端口连接

    前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小...

网友评论

      本文标题:小程序 webSocket 接入

      本文链接:https://www.haomeiwen.com/subject/cgucohtx.html