workman(五)打通微信小程序webscoket通信

简介: 我这里使用微信小程序来测试webscoket的链接。这里还是有挺多坑的。

我这里使用微信小程序来测试webscoket的链接。这里还是有挺多坑的。

一:wss与ws的区别

如果是普通的web网站使用标题的这两种协议哪一个都是可以的,但是微信小程序必须使用wss链接,如下图所示:

image.png

Wss和ws的区别其实就是https与http的区别,前者是后者的加密版本。

因为wss有加密证书,所以在使用的时候,链接不能写的太随意,否则可能找不到证书。

比如:ws的链接你可以这样写

ws://api.xxxxx.net:8102/webscoket

但是wss只能这样写

wss://api.xxxxx.net/webscoket

像ws那样域名拼端口号写的话,找不到ssl证书,会报错。

至于再详细的wss与ws的区别,这里就不展开说了,有兴趣,请自行百度~

二:微信小程序webscoket通讯

微信小程序对webscoket的支持封装了一堆的函数,我这里也是照着官方文档写的。

请移步《微信小程序官方文档

下边大概放一下我测试使用的代码,我将webscoket封装成了一个函数,在小程序生命周期函数中直接调用的:

scss

复制代码

// pages/livechat/livechat.js
const app = getApp();
const utils = require('../../utils/util');
Page({
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var self = this;
    self.onWorker();
  },
  // 创建WebSocket连接
onWorker: function () {
  // 初始化
  wx.connectSocket({
    url: 'wss://xxxx.xxxx/xxxx,// 你的域名
    success(res) {
      console.log('success', res)
    },
    fail(res) {
      console.log('fail', res)
    }
  })
  // 连接成功
  wx.onSocketOpen(function (res) {
    wx.sendSocketMessage({
      // data: JSON.stringify({ type: 'message', data: '这是一条测试消息' }),
      data: '这是一条测试消息'
    })
  })
  // 接收数据
  wx.onSocketMessage(function (data) {
    console.log(data);
    // var objData = JSON.parse(data.data); // 注意这里有时会报错
    // console.log(objData);
  })
  // 连接失败
  wx.onSocketError(function () {
    console.log('websocket连接失败!');
  })
  // 断开连接
  wx.onSocketClose(function (res) {
    console.log('WebSocket 已关闭!')
  })
},
})

最后效果如下图所示:

image.png

至此,webscoket通讯就已经打通了,当然,这只是测试,具体的业务逻辑,还需要再想想。

有好的建议,请在下方输入你的评论。

欢迎访问个人博客 guanchao.site

欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”

目录
相关文章
|
4月前
|
设计模式 小程序 API
小程序之页面通信&派发通知
小程序之页面通信&派发通知
|
9月前
|
小程序 PHP
微信公众号开发(一)打通服务器与微信之间的通信
说来惭愧PHP做了这么久,好像就没有从头开发过一个微信公众号,这次刚好有机会从头接入开发一个完整的公众号,也不能说完整,但是这些微信的接口我基本上都试一试~看看大概是什么情况。 首先:打通服务器与微信之间的通信。
108 0
|
11月前
|
小程序 安全 网络安全
申请免费 SSL 证书为您的小程序加密通信
申请免费 SSL 证书为您的小程序加密通信
192 0
|
4月前
|
XML 人工智能 数据安全/隐私保护
【Python+微信】【企业微信开发入坑指北】1. 数据链路打通:接收用户消息处理并回复
【Python+微信】【企业微信开发入坑指北】1. 数据链路打通:接收用户消息处理并回复
77 0
|
4月前
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【4月更文挑战第12天】本文探讨了小程序全栈开发中WebSocket实时通信的实践,WebSocket作为实现双向实时通信的协议,其长连接特性和双向通信能力在实时聊天、推送、游戏和监控等场景中发挥关键作用。开发者需注意安全性、性能和兼容性问题,以优化用户体验并确保小程序稳定运行。通过掌握WebSocket,开发者能提升小程序的功能性和用户体验。
116 0
|
4月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
4月前
|
JSON 小程序 JavaScript
【微信小程序】-- 宿主环境 & 通信模型 & 运行机制介绍(五)
【微信小程序】-- 宿主环境 & 通信模型 & 运行机制介绍(五)
|
4月前
|
小程序 JavaScript
钉钉小程序嵌入的vue页面怎么与钉钉小程序通信
在vue中使用官方提供的<script>标签无法引入https://appx/web-view.min.js,求大佬指教
|
4月前
|
JavaScript 前端开发 小程序
Vue、React和小程序中的组件通信:父传子和子传父的应用
Vue、React和小程序中的组件通信:父传子和子传父的应用
68 0
|
10月前
|
前端开发 JavaScript 小程序
Vue、React和小程序中的组件通信:父传子和子传父
Vue、React和小程序中的组件通信:父传子和子传父
62 0