2024年鸿蒙最新小程序WebSocket详解_微信小程序 websocket(3)，15个经典面试问题答案

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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

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方法中，监听输入框的变化。

5.4 PS

css样式有点长，界面美化也没有什么太大难度，我就不写了，大家随意发挥。页面布局也可以灵活调整，如果确实需要的话，可以给我留言。

6，避坑指南！！！

在使用微信小程序的WebSocket时，需要注意以下几个方面，避免掉进坑里：

6.1 安全限制：

微信小程序的WebSocket只支持wss和https协议，不支持ws和http协议。同时，要求服务器必须使用与小程序域名相同的HTTPS证书。

6.2 长连接限制：

微信小程序的WebSocket连接存在时限，超过一定时间会自动断开，需要开发者自行维护长连接。同时，小程序后台最长只能保持5分钟的连接，超过时间也会自动断开。

6.3 数据大小限制：

微信小程序的WebSocket传输数据大小有限制，单次发送数据最大不能超过1MB，同时建议分包发送。

6.4 API兼容性：

微信小程序的WebSocket API与标准的WebSocket API有所不同，需要开发者仔细查阅文档并进行兼容性处理。

6.5 兼容性测试：

不同版本的微信客户端对小程序WebSocket的支持可能存在差异，需要在不同客户端上进行兼容性测试。

总之，在使用微信小程序的WebSocket时，需要充分了解其特点和限制，避免出现安全问题、连接断开、数据传输失败等情况。同时，建议使用第三方库或框架来简化WebSocket的使用和维护，减少出错的可能性。

7，总结

实际上官方更加推荐的是推荐使用 SocketTask 的方式去管理 webSocket 链接，每一条链路的生命周期都更加可控，同时存在多个 webSocket 的链接的情况下使用 wx 前缀的方法可能会带来一些和预期不一致的情况，不过我手里正好有之前写好的现成的dome，所以大家可以参考一下，通过以上内容相信大家已经基本上对小程序的WebSocket有了一定了解，它是一种非常强大的网络通信协议，它可以帮助我们实现实时数据传输和双向通信，为小程序的开发提供了很大的便利，希望本文可以帮到大家，同时也欢迎大家多留言相互交流。

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

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

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

48080)]

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

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

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