微信小程序如何连接websocket

这篇具有很好参考价值的文章主要介绍了微信小程序如何连接websocket。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在需要启用的地方调用app.js中的openScoket()函数;停用的地方调用closeSocket()函数

// app.js
App({
    onLaunch() {
        // 如果存在相关信息,连接websocket
        if ( this.globalData.socketStatus === 'closed') {
            this.openScoket();
        }
    },
    // 打开websocket连接
    openScoket() {
        const token = wx.getStorageSync('yun_token').token || "";
        const uuid = wx.getStorageSync('schoolMsg').uuid || "";
        // 打开信道(通过 WebSocket 连接发送数据。需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。)
        wx.connectSocket({
            url: "连接的url,注意是wss开头,这个地址也可以通过拼接携带参数",
            header: { //请求头
                'content-type': 'application/json',
                'Access-Token': token, //携带token认证字段
            },
            timeout: 7000,
            success: () => {
                console.log("websocke连接成功");
            },
            fail: (err) => {
                if (err) {
                    console.log("wx.connectSocket连接失败", err)
                }
            },
            complete: () => {
                // console.log("websocke连接完成")
            }
        });
        //监听 WebSocket 连接打开
        wx.onSocketOpen(() => {
            console.log('WebSocket 已打开连接,并且连接成功');
            this.globalData.socketStatus = 'connected';
        })
        //断开时的动作
        wx.onSocketClose(() => {
            console.log('WebSocket 已断开');
            this.globalData.socketStatus = 'closed';
            //断线重连
            this.reconnect();
        })
        //报错时的动作
        wx.onSocketError(error => {
            console.error('socket error出错了:', error);
          // this.globalData.socketStatus = 'closed';
          //  this.reconnect();
        })
        // 监听服务器推送的消息
        wx.onSocketMessage(message => {
            //把JSONStr转为JSON
            message = message.data.replace(" ", "");
            if (typeof message != 'object') {
                message = message.replace(/\ufeff/g, ""); //重点
                const msg = JSON.parse(message);
                message = msg;
            }
            //callback函数对服务端发送的消息进行处理
            this.globalData.callback(message);
            // console.log("监听到如下数据发送变化:", message);
        })
    },
    //关闭websocket连接
    closeSocket() {
        if (this.globalData.socketStatus === 'connected') {
            wx.closeSocket({
                success: () => {
                    this.globalData.socketStatus = 'closed';
                    console.log("websocket连接已关闭")
                }
            })
        }
    },
    //发送消息函数
    sendMessage(data) {
        if (this.globalData.socketStatus === 'connected') {
            const msg = JSON.stringify({
                
            })
            wx.sendSocketMessage({
                data: msg
            })
        }
    },
    // 断线重连
    reconnect() {

        let timer = null;
        if (this.globalData.socketStatus === 'closed') {
            console.log("断线重连中......");
            timer && clearTimeout(timer);
            timer = setTimeout(() => {
                this.openScoket();
            }, 500)
        } else {
            this.closeSocket();
        }
    },
    onHide() {
        // 断开websocket连接
        this.closeSocket();
    },
    //app 全局属性监听
    globalData: {
        socketStatus: 'closed',
        callback: function () {}
    }
})

callback函数在各页面中的应用方法文章来源地址https://www.toymoban.com/news/detail-612563.html

const app = getApp();

Page({
  wacthWebsocket() {
      const that = this;//这里需要注意this指向问题
      app.globalData.callback = function (msg) {
         //这里写对msg进行处理的业务逻辑
      }
   },

//在需要启用这个方法的地方调用
 onShow() {  
        this.wacthWebsocket();
    },
})

到了这里,关于微信小程序如何连接websocket的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序如何使用原生Websocket api与Asp.Net Core SignalR 通信

    如题,这可能算是.net 做小程序的服务端时,绕不开的一个问题,老生常谈了。同样的问题,我记得我2018/19年的一个项目的解决方案是: 修改官方的SignalR.js的客户端 :把里面用到浏览器的Websocket改成微信小程序的官方api的。目前网上也有不少这样的方案,已经改好开源了;

    2024年02月09日
    浏览(74)
  • 微信小程序数据库放哪?如何通过阿里云服务器进行连接?

    微信小程序数据库放哪?如何通过阿里云服务器进行连接? 微信小程序开发者在构建应用程序时,通常需要考虑数据库的存储位置。对于微信小程序而言,数据库的选择对于应用的性能和稳定性至关重要。本文将介绍微信小程序数据库的放置位置以及如何通过阿里云服务器进

    2024年02月05日
    浏览(74)
  • 微信小程序全局websocket

    全篇干货无废话 实现微信小程序全局websocket 含掉线重连,心跳保活等机制,可做参考示例 app.js

    2024年02月09日
    浏览(44)
  • 微信小程序websocket的使用

      感谢大家的点赞和转发,欢迎大家关注本人的博客。试用期指导,项目开发,简历优化,毕业设计/论文,欢迎添加本人微信。  新人作者,欢迎关注和收藏👏🏻👏🏻 微信小程序中使用websocket分为两步:  2.1发起请求建立一个socket连接 这里是通过微信自带的一个wx.conn

    2024年04月12日
    浏览(51)
  • 微信小程序 WebSocket 通信 —— 在线聊天

             * 源码已经上传到资源处,需要的话点击跳转下载 |  源码下载         在Node栏目就讲到了Socket通信的内容,使用Node实现Socke通信,还使用两个流行的WebSocket 库,ws 和 socket.io,在小程序中的WebSocket接口和HTML5的WebSocket基本相同,可以实现浏览器与服务器之间的

    2024年02月01日
    浏览(50)
  • springboot+websocket+微信小程序实现评论区功能

    1. 什么是WebSocket? WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器 全双工通信 ,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是: WebSocket 是一种 双向通信协议 ,在建立连接后,WebSo

    2024年04月16日
    浏览(64)
  • 微信小程序websocket使用protobuf,发送arraybuffer

    ❤️砥砺前行,不负余光,永远在路上❤️ 这是一次继前文websocket的一个更新:小程序中使用websocket,区分房间、空间 现在遇到了一个需求是小程序接入 io-game 的websocket 和unity 游戏端同时使用一个websocket,io-game那边收发websocket消息都是采用 Protobuf 处理的。 参考项目:htt

    2024年02月15日
    浏览(47)
  • 微信小程序 | 基于小程序+Java+WebSocket实现实时聊天功能

    此文主要实现在小程序内聊天对话功能,使用Java作为后端语言进行支持,界面友好,开发简单。 2.1、注册微信公众平台账号。 2.2、下载安装IntelliJ IDEA(后端语言开发工具),Mysql数据库,微信Web开发者工具。 1.创建maven project 先创建一个名为SpringBootDemo的项目,选择【New Proje

    2024年02月02日
    浏览(56)
  • 微信小程序WebSocket实现stream流式聊天对话功能

    要在微信小程序实现聊天对话功能,回话是流式应答,这里使用了WebSocket技术。WebSocket大家应该都很熟悉,使用wx.connectSocket就可以了。这里可能需要注意下的是流式应答,后端如何发送,前端如何接收。直接上代码: 可以扫码体验: 后端关键代码: 小程序ts代码: 可以扫码

    2024年04月10日
    浏览(86)
  • SpringBoot实现Websocket聊天交友微信小程序(一)

    记录一下我开发一个交友微信小程序并且上线运营的心得体会。 2022年10月1日上线的,到目前终于实现每天收益300左右。 界面比较简洁,功能有动态,动态可以选择话题,相册,相册可以设置看广告解锁,私信,私信可以发图片,发语音。还有会员功能。前端用的uniapp,UI框

    2024年02月03日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包