2024年最新小程序WebSocket详解_微信小程序 websocket(1)，2024年最新BAT大厂面试基础题集合

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

低延迟：WebSocket连接在建立后，通信双方可以实时地互相发送数据，不需要等待服务器的响应；
双向通信：WebSocket连接是双向的，服务器和浏览器都可以发送数据，比HTTP请求响应模式更加灵活；
节省网络带宽：WebSocket连接只需要建立一次，之后通信双方可以在同一个TCP连接上进行通信，减少了网络通信的开销；
更加安全：WebSocket连接支持加密传输，可以保证数据传输的安全性。

3，实现步骤

3.1 创建WebSocket连接

在小程序中，我们可以使用wx.connectSocket()方法创建WebSocket连接。该方法需要传入一个对象参数，其中url表示WebSocket连接的地址。

wx.connectSocket({
  url: 'wss://example.qq.com',//示例url，别忘了自己换
  header:{
    'content-type': 'application/json'
  },
  protocols: ['protocol1']
})

3.2 监听WebSocket连接状态

我们可以使用wx.onSocketOpen()、wx.onSocketError()、wx.onSocketClose()方法监听WebSocket连接状态。当连接打开、出错或关闭时，这些方法会自动触发相应的回调函数。

wx.onSocketOpen(function() {
  console.log('WebSocket连接已打开')
})
wx.onSocketError(function(res) {
  console.log('WebSocket连接打开失败:', res)
})
wx.onSocketClose(function() {
  console.log('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文件中编写前端代码，用于显示聊天室的聊天内容和发送消息的输入框：

<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) {


![img](https://img-blog.csdnimg.cn/img_convert/4395b2b58d7ff52a29de920ab68efd1d.png)
![img](https://img-blog.csdnimg.cn/img_convert/098014cce3741ced2aaca3a79f00d123.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

319)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**