微信小程序websocket


微信小程序带有websocket可以提供使用,但是官方文档写的东西很少,而且小程序后台能力弱这一点也是十分的坑爹,这就导致了socket长连接一切后台就会出现断开的情况,并且难受的是.这个时候你重新调用链接函数也会链接不上,可能直接影响到你的业务逻辑

解决方法就是手动关闭和开启链接,不要让链接在程序切后台的时候被关掉,代码如下↓

  • onHide监听程序进入后台的时候,手动关闭链接
  onHide: function() {
    var that = this;
    console.log('程序进入了后台');
    that.closeSocket();
  }
  • onShow监听程序进入后台的时候,手动开启链接
 onShow: function() {
    var that = this;
    that.connectSocket();
  }
  • connectSocket函数
/**
   * 链接会话,
   * 每间隔一秒链接一次,知道链接成功后停止链接
   */
  connectSocket() {
    var that = this;
    var wss_linker = setInterval(function() {
      if (that.globalData.user) {
        that.globalData.socketTask = wx.connectSocket({
          url: that.globalData.socket_url + that.globalData.user.userId,
          fail: function(res) {
            wx.showModal({
              title: '提示',
              content: 'socket链接异常,请删除程序重试',
            })
          }
        })
        //监听链接开启
        that.globalData.socketTask.onOpen(function(res) {
          that.globalData.isConnect = true;
          var keep_msg = "keep_connect";
          that.globalData.keepConnectInterval = setInterval(function() {
            wx.sendSocketMessage({
              data: keep_msg,
            })
            console.log(keep_msg)
            if (JSON.stringify(that.globalData.newMsg) == "{}") {
              that.globalData.have_new_msg = false;
            }
          }, 1000)

          //获取离线消息
          that.get_old_msg(res => {
            // 获取在线消息
            that.globalData.socketTask.onMessage(function(res) {
              var storage_msg = [];
              var msg_obj = JSON.parse(res.data);
              if (msg_obj.code && msg_obj.code == -1) {
                wx.showModal({
                  title: '发送通知',
                  content: msg_obj.msg,
                })
                // that.globalData.flag=true;
              } else {
                wx.showToast({
                  title: 'You got a msg'
                })
                // 处理时间
                that.format_date(msg_obj.chatTime, res => {
                  msg_obj.chatTime = res
                  var chatRequestUserId = msg_obj.chatRequestUserId + "";
                  // 把获取的消息存入缓存
                  that.set_chat_storage(chatRequestUserId, msg_obj);
                  that.update_unread_msg(chatRequestUserId, msg_obj);
                })
              }
            })
          })
          console.log('webSocket is open');
        })

        that.globalData.socketTask.onClose(function(res){
          that.globalData.isConnect = false;
        })
        clearInterval(wss_linker); //停止计时器
      } else {
        console.log('还没有链接')
      }
    }, 1000)
  }
  • closeSocket函数
  /**
   * 关闭socket
   */
  closeSocket(){
    var that=this;
    that.globalData.socketTask.close();
    clearInterval(that.globalData.keepConnectInterval);
  }

在connectSocket函数中,将建立socket链接返回的socketTask储存在全局变量,用以后续的消息监听、消息发送和socket断开。同时,这里用了全局变量,是为了保持链接一直只有一个。减少程序
错误的情况


ps:这个项目要求在小程序里面做一个聊天的模块=-= 不过也借此熟悉了socket的前后端应用

微信小程序websocket的更多相关文章

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

    前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小程序中不允许使用带端口的 wss 连接,只能使用 443 端口.想使用其他端口就需要在 ...

  2. 微信小程序-WebSocket

    wx.connectSocket(OBJECT) 创建一个 WebSocket 连接:一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该 ...

  3. 微信小程序-WebSocket应用

    为何有 HTTP 协议还需要 WebSocket ? Http协议 有个缺陷:通信只能由客户端发起.举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.HTTP 协议做不 ...

  4. 快速上手微信小程序webSocket

    WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSocket API也被W3 ...

  5. 微信小程序WebSocket报错:Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

    Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was ...

  6. 微信小程序(应用号)资源汇总整理

    微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...

  7. 微信小程序(应用号)开发资源汇总整理 - 一直更新中

    开源项目 wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribbble - 微信小程序-Dribbble wechatApp-demo - 微信小程序 DEMO ...

  8. 黄聪:微信小程序(应用号)资源汇总整理(转)

    微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

随机推荐

  1. C语言实现将彩色BMP位图转化为二值图

    CTF做了图片的隐写题,还没有形成系统的认识,先来总结一下BMP图的组成,并通过将彩色图转为二值图的例子加深下理解. 只写了位图二进制文件的格式和代码实现,至于诸如RGB色彩和调色板是什么的一些概念就 ...

  2. Java : 传值or传引用?

    那看看这句经典名言:O'Reilly's Java in a Nutshell by David Flanagan (see Resources) puts it best: "Java m ...

  3. MySQL死锁检测和回滚

    最近碰到“TOO DEEP OR LONG SEARCH IN THE LOCK TABLE WAITS-FOR GRAPH, WE WILL ROLL BACK FOLLOWING TRANSACT ...

  4. Oracle表闪回功能

    1.启用表闪回首先要在表上支持行移动(在数据字典中设置标识来标识该操作可能会改变行ID,即同一条数据闪回成功后主键都一样,但行ID其实已经发生变化了) SQL> alter table base ...

  5. 【模板】 全排列 && 有重复元素的全排列

    全排列 #include<bits/stdc++.h> using namespace std; ]; void print (int n){ ;i<=n;i++) cout< ...

  6. Media change: please insert the disc labeled

    问题描述和重现步骤: 今天安装完Ubuntu后准备安装openssh-server apt-get install openssh-server 结果发现下面的错误. Media change: pl ...

  7. BZOJ4977: [[Lydsy1708月赛]跳伞求生

    传送门 直接贪心 考虑到 \(n\) 个人的贡献都是 \(a_i\),另外 \(m\) 个人的贡献都是 \(c_i-b_i\) 首先 \(a_i>b_j\) 的限制不好做,所以将 \(a,b\) ...

  8. CF 827E Rusty String FFT

    传送门 如果没有碍事的?的话,判定字符串的循环节直接用KMP的失配数组就可以搞定.现在有了碍事的?,我们就需要考虑更通用的算法. 考虑KMP失配数组判定字符串循环节的本质,发现判定\(k\)是否为字符 ...

  9. JS基础(三)

    25.使用JS操作CSS样式 DHTML表示动态HTML(Dynamic HTML,DHTML),不是标记语言,只是一种由微软提出的网页脚本化概念,目标是结合JS+HTML+CSS设计动态特效,得到很 ...

  10. css之背景(background)家族

    背景(background)是css中很重要的一部分,也是css的基础知道之一,现在来回顾css2中5个属性与css3中新增的3个属性和2个功能. CSS2_背景(background)前传 家族成员 ...