小程序WebSocket详解_微信小程序 websocket(1)

2024-06-19 小程序 0

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文件中编写前端代码，用于显示聊天室的聊天内容和发送消息的输入框：

<view class="container">  <!-- 聊天内容 -->  <scroll-view class="chat-content" scroll-y="true" scroll-into-view="{{scrollIntoView}}">    <view wx:for="{{messages}}" wx:key="{{index}}" class="message-item">      {{item}}    </view>  </scroll-view>  <!-- 发送消息 -->  <view class="send-message">    <input class="message-input" placeholder="请输入消息" bindinput="onInput" value="{{inputValue}}"/>    <button class="send-btn" bindtap="sendMessage">发送</button>  </view></view>

该页面包含一个scroll-view组件用于显示聊天内容，一个input组件用于输入消息，还有一个button组件用于发送消息。

5.3 编写前端JS代码

在小程序的pages文件夹下，找到chat页面的js文件chat.js，然后编写前端JS代码，用于连接WebSocket服务器、发送和接收消息。

Page({  //*/* /* 页面的初始数据 /*/  data: {    inputValue: '',  // 输入框的值    messages: [],  // 聊天记录    scrollIntoView: '',  // 滚动到指定位置    socketOpen: false,  // WebSocket连接状态    socketMsgQueue: [],  // WebSocket消息队列    url: 'wss://example.com/ws'  // WebSocket服务器地址  },  //*/* /* 生命周期函数--监听页面加载 /*/  onLoad: function (options) {    this.connectWebSocket()  // 连接WebSocket服务器  },  //*/* /* 生命周期函数--监听页面卸载 /*/  onUnload: function () {    wx.closeSocket()  // 关闭WebSocket连接  },  //*/* /* 连接WebSocket服务器 /*/  connectWebSocket: function () {    var that = this    wx.connectSocket({      url: that.data.url,      success: function (res) {        console.log('WebSocket连接成功')      },      fail: function (res) {        console.log('WebSocket连接失败:', res)      }    })    wx.onSocketOpen(function (res) {      console.log('WebSocket连接已打开')      that.setData({        socketOpen: true      })      for (var i = 0; i < that.data.socketMsgQueue.length; i++) {        that.sendSocketMessage(that.data.socketMsgQueue[i])      }      that.setData({        socketMsgQueue: []      })    })    wx.onSocketError(function (res) {      console.log('WebSocket连接打开失败:', res)    })    wx.onSocketClose(function (res) {      console.log('WebSocket连接已关闭:', res)      that.setData({        socketOpen: false      })    })    wx.onSocketMessage(function (res) {      console.log('接收到服务器发送的数据:', res.data)      var messages = that.data.messages      messages.push(res.data)      that.setData({        messages: messages,        scrollIntoView: 'message-' + messages.length      })    })  },  //*/* /* 发送消息 /*/  sendMessage: function () {    if (!this.data.socketOpen) {      wx.showToast({        title: 'WebSocket未连接',        icon: 'none'      })      return    }    var message = this.data.inputValue    if (message == '') {      wx.showToast({        title: '消息不能为空',        icon: 'none'      })      return    }    this.sendSocketMessage(message)    this.setData({      inputValue: ''    })  },  //*/* /* 发送WebSocket消息 /*/  sendSocketMessage: function (message) {    if (this.data.socketOpen) {      wx.sendSocketMessage({        data: message      })    } else {      this.data.socketMsgQueue.push(message)    }  },  //*/* /* 监听输入框变化 /*/  onInput: function (e) {    this.setData({      inputValue: e.detail.value    })  }})

onLoad生命周期函数中，调用connectWebSocket方法连接WebSocket服务器，当然在页面销毁的时候需要在onUnload生命周期函数中，调用wx.closeSocket()方法关闭WebSocket连接。
在connectWebSocket方法中，使用wx.connectSocket方法连接WebSocket服务器。当连接成功、失败或关闭时，分别使用wx.onSocketOpen、wx.onSocketError和wx.onSocketClose方法监听WebSocket连接状态。当接收到服务器发送的消息时，使用wx.onSocketMessage方法监听WebSocket消息。
在sendMessage方法中，判断WebSocket连接状态，如果未连接则弹出提示，否则发送消息，并清空输入框中的内容。
在sendSocketMessage方法中，判断WebSocket连接状态，如果已连接则直接发送消息，否则将消息加入WebSocket消息队列中。
在onInput方法中，监听输入框的变化。