我这里使用微信小程序来测试webscoket的链接。这里还是有挺多坑的。
一:wss与ws的区别
如果是普通的web网站使用标题的这两种协议哪一个都是可以的,但是微信小程序必须使用wss链接,如下图所示:
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 已关闭!') }) }, })
最后效果如下图所示:
至此,webscoket通讯就已经打通了,当然,这只是测试,具体的业务逻辑,还需要再想想。
有好的建议,请在下方输入你的评论。
欢迎访问个人博客 guanchao.site
欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”