微信小程序websocket

微信小程序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的前后端应用

原文地址:https://www.cnblogs.com/w53064/p/10416578.html

时间: 2024-11-09 02:44:30

微信小程序websocket的相关文章

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

前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小程序中不允许使用带端口的 wss 连接,只能使用 443 端口.想使用其他端口就需要在服务器做一层代理,本文以 Ubuntu 16.04 服务器为例,使用 nginx 做 Web Server .本文参考了 如何在微信小程序的websocket上使用mqtt协议 ,在此感谢原作者. 步骤 安装 nginx 及配置的过程不再赘述,nginx 需要处理微信小程序 WebSocket 不支

微信小程序-WebSocket应用

为何有 HTTP 协议还需要 WebSocket ? Http协议 有个缺陷:通信只能由客户端发起.举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.HTTP 协议做不到服务器主动向客户端推送信息.(单向请求)注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦.我们只能使用"轮询":每隔一段时候,就发出一个询问,了解服务器有没有新的信息.最典型的场景就是聊天室.轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开).因此,工程

微信小程序webSocket生命周期

测试的环境:vivo z5  Android9.0   webSocket未实现团活 当小程序前后端之间建立webSocket后,我测试过以下4种情况. webSocket建立的小程序页面,亮屏且前后台之间无websocket交互.------  5分钟后,服务端主动断开websocket连接,小程序端触发wx.onSocketClose(),未触发wx.onSocketError(); webSocket建立的小程序页面,熄屏且前后台之间无websocket交互.------  5分钟后,服务

微信小程序监听WebSocket消息事件wx.onSocketMessage(CALLBACK)

微信小程序WebSocket消息wx.onSocketMessage(CALLBACK) wx.onSocketMessage(CALLBACK) ? 监听WebSocket接受到服务器的消息事件 CALLBACK返回参数: 参数 类型 说明 data String 服务器返回的消息 示例代码: wx.connectSocket({ url:"qkxue.net" }); wx.onSocketMessage(function(res){ console.log("收到服务器

微信小程序开发交流与推广

一.请加微信群: 请扫描下方的二维码加“微信小程序交流推广群”,由于微信群的限制,超过 100 人就不能扫码加群,大家可以先添加微信号:us9488 并备注“微信小程序”,然后拉你入群. 二.官方文档: 微信小程序介绍 微信小程序设计指南 微信小程序开发文档 微信小程序运营规范 微信小程序开发者社区 三.微信小程序解决方案: 微信小程序会话管理场景 微信小程序文件上传下载应用场景 微信小程序WebSocket长连接应用场景 微信小程序视频应用场景 四.代码: 会话管理场景 文件上传下载应用场景

微信小程序小应用资源汇总整理

微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribbble - 微信小程序-Dribbble wechatApp-demo - 微信小程序 DEMO weapp-ide-crack - 微信小应用资源破解 API - API 文档 weapp-quick - 微信小应用示例代码 wea

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

开源项目 wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribbble - 微信小程序-Dribbble wechatApp-demo - 微信小程序 DEMO weapp-ide-crack - 微信小应用资源破解 API - API 文档 weapp-quick - 微信小应用示例代码 weapp-gold - 掘金主页 微信小应用示例 weapp-douban - 豆瓣电影 微信小程序 wechat-app-zhihudaily - 微信小程序版的知乎

微信应用号小程序WebSocket连接wx.connectSocket(OBJECT)

微信应用号小程序Socket连接wx.connectSocket(OBJECT) wx.connectSocket(OBJECT) ? 创建一个 WebSocket 连接:一个微信小程序同时只能有一个WebSocket连接,如果当前已存在一个WebSocket连接,会自动关闭该连接,并重新创建一个WebSocket连接. OBJECT参数说明: 参数 类型 必填 说明 url String 是 开发者服务器接口地址,必须是HTTPS协议,且域名必须是后台配置的合法域名 data Object 否

微信小程序? 监听WebSocket关闭wx.onSocketClose(CALLBACK)

微信小程序? 监听WebSocket关闭wx.onSocketClose(CALLBACK) wx.onSocketClose(CALLBACK) ? 监听WebSocket关闭 wx.connectSocket({ url:"qkxue.net" }); //注意这里有时序问题, //如果wx.connectSocket还没回调wx.onSocketOpen,而先调用wx.closeSocket,那么就做不到关闭WebSocket的目的 //必须在WebSocket打开期间调用wx.