需求是 client 與 server 以 socket 方式連接對話，場景為 client 發(fā)送一條消息后，server 會返回多條消息且非同時返回。

使用微信原生的 WebSocket 及其提供的 API 后多環(huán)境調(diào)試均為能連接成功，此時考慮在小程序中集成更加成熟且使用方便的 Socket.io.js ，過程簡單使用方便，很贊！

配置服務器域名

微信公眾平臺：https://mp.weixin.qq.com

引入資源文件

本篇配套資源下載：https://pan.baidu.com/s/1PLC5BoBNhM6KtPu1O1DWpg

github最新資源下載：https://github.com/socketio/socket.io

示例代碼

代碼部分包含四個主要方法，分別為：
啟動連接：socketStart()
發(fā)送數(shù)據(jù)：socketSendMessage()
接收數(shù)據(jù)：socketReceiveMessage()
斷開連接：socketStop()

• 使用時請將變量socketUrl修改為你的服務器地址
• 確保你的服務器地址已在微信公眾平臺配置
• 使用時請將變量sendMessage修改為與服務器約定的格式

// socket 連接插件
const io = require('../../utils/weapp.socket.io.js')
// socket 連接地址
var socketUrl = 'wss://www.貴司服務器地址.com'
// socket 狀態(tài)更新
var socketMessage = ''
// 上下文對象
var that


Page({

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    that = this
    this.socketStart();
  },

  /**
   * 啟動socket
   */
  socketStart: function () {

    // 設置socket連接地址 socketUrl
    const socket = (this.socket = io(
      socketUrl,
    ))

    socket.on('connect', () => {
      this.setData({ socketMessage: socketMessage += 'SOCKET連接成功 → \n\n' })

      // 此處修改為與server約定的數(shù)據(jù)、格式
      var sendMessage = '{"token":"v3jsoc8476shNFhxgqPAkkjt678","client":"發(fā)送內(nèi)容"}'
      this.socketSendMessage(sendMessage);
    })

    socket.on('connect_error', d => {
      this.setData({ socketMessage: socketMessage += 'SOCKET連接失敗 → \n\n' })
    })

    socket.on('connect_timeout', d => {
      this.setData({ socketMessage: socketMessage += 'SOCKET連接超時 → \n\n' })
    })

    socket.on('disconnect', reason => {
      this.setData({ socketMessage: socketMessage += 'SOCKET連接斷開 → \n\n' })
    })

    socket.on('reconnect', attemptNumber => {
      this.setData({ socketMessage: socketMessage += 'SOCKET正在重連 → \n\n' })
    })

    socket.on('reconnect_failed', () => {
      this.setData({ socketMessage: socketMessage += 'SOCKET重連失敗 → \n\n' })
    })

    socket.on('reconnect_attempt', () => {
      this.setData({ socketMessage: socketMessage += 'SOCKET正在重連 → \n\n' })
    })

    socket.on('error', err => {
      this.setData({ socketMessage: socketMessage += 'SOCKET連接錯誤 → \n\n' })
    })

    socket.on('message', function (d) {
      this.setData({ socketMessage: socketMessage += '服務器返回數(shù)據(jù) → \n\n' })
      that.socketReceiveMessage(d)
    })

  },

  /**
   * 斷開socket
   */
  socketStop: function () {
    if (this.socket) {
      this.socket.close()
      this.socket = null
    }
  },

  /**
   * 發(fā)送消息
   */
  socketSendMessage: function (sendStr) {
    if (this.socket) {
      this.setData({ socketMessage: socketMessage += '向服務器發(fā)送數(shù)據(jù) → ' + sendStr + '\n\n'})
      this.socket.emit('message', sendStr);
    }
  },

  /**
   * 接收消息
   */
  socketReceiveMessage: function (receivedStr) {
    this.setData({ socketMessage: socketMessage += '服務器返回數(shù)據(jù) → ' + receivedStr + '\n\n'})
    this.socketStop();
  },
})

聊天功能實現(xiàn)效果