微信小程序WebSocket接口以及在小程序中的使用。

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

一、连接wx.connectSocket

示例:

wx.connectSocket({
  url: 'xxx.com',
  data:{
    x: '',
    y: ''
  },
  header:{ 
    'content-type': 'application/json'
  },
  method:"GET"
})

这里要注意url中的接口不是http://.xxx或者https://.xxx开头的,而是以ws://xxx.com或者wss://.xxx开头的,要不然就会连接失败

二、wx.onSocketOpen和wx.onSocketError

他们是监听监听wx.connectSocket的连接成功与否的

代码如下(示例):

     //连接成功
     wx.onSocketOpen((res) => {
      console.log('WebSocket 成功连接', res)
    })
    //连接失败
    wx.onSocketError((err) => {
      console.log('websocket连接失败', err);
    })

三、wx.onSocketMessage

这里是接收服务器的消息的(也就是聊天时对面发来的消息)
代码如下(示例):

//连接WebSocket 
wx.connectSocket({
  url: 'xxx.com',
  data:{
    x: '',
    y: ''
  },
  header:{ 
    'content-type': 'application/json'
  },
  method:"GET"
    })
    wx.onSocketOpen((res) => {
      console.log('WebSocket 成功连接', res)
      wx.onSocketMessage(function(res) {
        console.log('收到服务器内容:', res)
        //不需要考虑如何触发,当服务器发送消息时自动接收
        })
    })

四、wx.sendSocketMessage

//这是发送消息的事件
 sendSocketMessage() {
   let msg={
    msg:this.data.inputVal,//这是聊天的内容
    toUser:this.data.user1.id//这是聊天的id
   }
  wx.sendSocketMessage({
    data: JSON.stringify(msg),//这里根据后台的格式发送数据,好像这个需要转换成字符串。
    success:(res)=>{
    console.log("消息发送成功", res)
    },
    fail(res) {
    console.log("消息发送失败", res)
    }
    })
},

五、wx.closeSocket

关闭WebSocket连接。

六、wx.onSocketClose

监听WebSocket关闭。

wx.connectSocket({
  url: 'test.php'
})

//注意这里有时序问题,
//如果 wx.connectSocket 还没回调 wx.onSocketOpen,而先调用 wx.closeSocket,那么就做不到关闭 WebSocket 的目的。
//必须在 WebSocket 打开期间调用 wx.closeSocket 才能关闭。
wx.onSocketOpen(function() {
  wx.closeSocket()
})

wx.onSocketClose(function(res) {
  console.log('WebSocket 已关闭!')
})

})文章来源地址https://www.toymoban.com/news/detail-486998.html

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

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

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

相关文章

  • 微信小程序websocket的使用

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

    2024年04月12日
    浏览(47)
  • 微信小程序UV、PV量解释以及接口调用频率

    微信小程序UV、PV量 浏览量(PV): 即通常说的Page View(PV),用户每打开一个网站页面就被记录1次。用户多次打开同一页面,浏览量值累计。 微信小程序中PV是打开小程序的打开次数。 访客数(UV): 一天之内网站的独立访客数(以Cookie为依据),一天内同一访客多次访问网站只计算

    2024年02月16日
    浏览(44)
  • WebSocket心跳重连在微信小程序中的实现与服务器端

    WebSocket技术是一种在浏览器和服务器之间建立持久化连接的通信协议。在微信小程序中,通过WebSocket可以实现实时的双向通信。然而,由于网络等各种因素的不稳定性,WebSocket连接可能会出现断开的情况。为了保证连接的可靠性,我们可以通过心跳机制和重连机制来处理Web

    2024年03月18日
    浏览(51)
  • 微信小程序websocket使用protobuf,发送arraybuffer

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

    2024年02月15日
    浏览(44)
  • 微信小程序-关于新版隐私协议接口wx.onNeedPrivacyAuthorization的适配解读以及实现代码

    代码插件已集成,即插即用, 五分钟集成进项目, 免费下载 ,欢迎大家交流  微信小程序用户隐私保护协议弹窗插件下载 官方公告地址:关于小程序隐私保护指引设置的公告 | 微信开放社区 1、首先看一下这个网址,里边包含涉及到的隐私的接口,这些接口都要适配一下,否则将会

    2024年02月10日
    浏览(49)
  • 微信小程序调用本地http接口设置以及django 遇到的csrf 403错误解决方法

    1) 如果微信小程序需要和本地localhost端口进行通信联调。首先需要设置微信小程序为 ”不校验合法域名…“设置,这样就可以跳过域名安全检测,不然会出现网站不在安全名单内: 2)此时调用之后,后端会出现如下错误: 这是因为:在微信小程序端对Django后台进行POST请求

    2024年02月07日
    浏览(56)
  • H5套壳微信小程序跳转H5以及配置服务器接口域名和业务域名

    一、H5套壳微信小程序跳转H5 基本语法: web-view src=\\\"https://你的域名\\\"/web-view 1. 其中,url必须在管理后台加进业务域名,并且是https开头的。 使用了web-view,页面将不能放置其他元素,因为web-view会铺满整个页面 电脑端调试,需要在开发者工具的项目设置里把基础库版本改为最

    2024年02月07日
    浏览(45)
  • 微信小程序-关于新版隐私协议接口wx.onNeedPrivacyAuthorization getPrivacySetting requirePrivacyAuthorize的适配解读以及实现代码

    代码插件已集成,即插即用, 五分钟集成进项目, 免费下载 ,欢迎大家交流  微信小程序用户隐私保护协议弹窗插件下载 官方公告地址:关于小程序隐私保护指引设置的公告 | 微信开放社区 1、首先看一下这个网址,里边包含涉及到的隐私的接口,这些接口都要适配一下,否则将会

    2024年02月10日
    浏览(43)
  • Ant Design Mini 在小程序中的使用

    今天来给大家分享一下 Ant Design Mini 在原生小程序中或者uniapp中的使用 目录 在原生微信小程序中使用 在 uni-app 中使用 在支付宝小程序中引用 在微信小程序中引用 1. 安装依赖 npm i antd-mini --save 2. 构建 npm 安装好依赖以后,点击开发者工具中的菜单栏:工具 -- 构建 npm 3. 在项

    2024年04月09日
    浏览(81)
  • 微信小程序关于wxs语法、以及能否引入js中的方法(不能调用)

    页面中使用wxs 或者  参考:WXS | 微信开放文档 wxs能引入外部js文件吗 | 微信开放社区 微信小程序中的WXS语法 1、WXS 中不支持let和const,不支持箭头函数。 2、变量命名必须符合下面两个规则: 首字符必须是:字母(a-zA-Z),下划线(_) 剩余字符可以是:字母(a-zA-Z),下划

    2024年02月06日
    浏览(64)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包