前后端WebSocket使用注意事项
1.域名配置
微信小程序硬性要求
2.Https证书
微信小程序硬性要求
3.Nginx配置
Nginx配置,跟普通接口不太一样。WebSocket需要一些特殊配置。
如果是集群
,记得配置会话保持
或haspip
4.后端
后端我使用的是Netty-Socket-IO
框架配合SpringBoot
。
后端代码可以看我的这篇文章
5.小程序端
测试代码
wx.connectSocket({
// 小程序端,必须使用wss协议,也就是说服务器必须要配置https证书。
url: 'wss://*****/socket.io/?userId=123&EIO=3&transport=websocket',
success: function (res) {
console.log('Socket连接成功:', res);
},
fail: function (res) {
console.error('连接失败:', res);
},
})
wx.onSocketOpen(() => {
console.log('监听到 WebSocket 连接已打开!');
wx.sendSocketMessage({
data: "2probe"
});
})
wx.onSocketError(data => {
console.log(data);
})
wx.onSocketMessage(data => {
let code = data.data.substr(0, 1);
console.log(code)
if (code === "0") {
let d1 = {
"sid": JSON.parse(data.data.substr(1, data.data.length)).sid
};
wx.sendSocketMessage({
data: d1})
}else if (code === "3"){
setTimeout((function callback() {
wx.sendSocketMessage({
data: "2"
});
}).bind(this), 5000)
}else if (code === "2") {
wx.sendSocketMessage({
data: "3"
});
}
console.log(data)
})
7.H5客户端
测试代码
<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('https://*********.cn/socket.io?userId=1', {
'reconnection delay' : 2000,
'force new connection' : true
});
socket.on('message', function(data) {
// here is your handler on messages from server
console.log(data)
});
socket.on('chatevent', function(data) {
// here is your handler on chatevent from server
console.log(data)
});
socket.on('connect', function() {
// connection established, now we can send an objects
// send json-object to server
// '@class' property should be defined and should
// equals to full class name.
// var obj = {
'@class' : 'com.sample.SomeClass'
// }
// socket.json.send(obj);
// send event-object to server
// '@class' property is NOT necessary in this case
var event = {
}
// socket.emit('someevent', event);
});
</script>
socket.io.js
,自动保持回话。
6.注意事项
小程序端的WebSocket需要自行维护链接。
小程序端想要自行维护回话,需要根据协议自行开发。
Socket协议
0:open
1:close
2:ping
3:pong
4:message
5:upgrade
6:noop
可以从上图看出,H5端的js封装了2、3
的协议回话。