小程序WebSocket详解

3.13发送和接收数据

我们可以使用wx.sendSocketMessage()方法向服务器发送数据，使用wx.onSocketMessage()方法监听服务器发送的数据。

wx.sendSocketMessage({
  data: 'Hello, WebSocket!'
})
wx.onSocketMessage(function(res) {
  console.log('接收到服务器发送的数据:', res.data)
})

3.4关闭WebSocket连接

使用wx.closeSocket()方法关闭WebSocket连接。

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

4，示例代码

下面是一个简单的小程序聊天室的示例代码：

// 1. 创建WebSocket连接
wx.connectSocket({
  url: 'wss://example.com/ws'
})
// 2. 监听WebSocket连接状态
wx.onSocketOpen(function() {
  console.log('WebSocket连接已打开')
})
wx.onSocketError(function(res) {
  console.log('WebSocket连接打开失败:', res)
})
wx.onSocketClose(function() {
  console.log('WebSocket连接已关闭')
})
// 3. 发送和接收数据
wx.sendSocketMessage({
  data: 'Hello, WebSocket!'
})
wx.onSocketMessage(function(res) {
  console.log('接收到服务器发送的数据:', res.data)
})
// 4. 关闭WebSocket连接
wx.closeSocket()

5，Dome示例

为了帮助大家更好地理解小程序的WebSocket，下面使用小程序聊天室的Dome来演示WebSocket的具体使用方法。

5.1创建一个新的小程序

打开微信开发者工具，创建一个新的小程序项目。

如果没有申请小程序的话，可以在微信公众平台申请，或者直接点测试号，尝试在本地写一写练练手。关于小程序具体申请步骤我这里就不做过多赘述了，大家可以参考这篇文章。

5.2编写前端代码

在小程序的pages文件夹下，创建一个新的页面“chat”，然后在该页面的wxml文件中编写前端代码，用于显示聊天室的聊天内容和发送消息的输入框：