微信小程序丨基于Socket.io.js，实现聊天功能

码脑

发布于 2019-04-11 15:05:30

7.2K0

发布于 2019-04-11 15:05:30

文章被收录于专栏：大前端大前端

需求是 client 与 server 以 socket 方式连接对话，场景为 client 发送一条消息后，server 会返回多条消息且非同时返回。

使用微信原生的 WebSocket 及其提供的 API 后多环境调试均为能连接成功，此时考虑在小程序中集成更加成熟且使用方便的 Socket.io.js ，过程简单使用方便，很赞！

配置服务器域名

微信公众平台：https://mp.weixin.qq.com

引入资源文件

本篇配套资源下载：https://pan.baidu.com/s/1PLC5BoBNhM6KtPu1O1DWpg github最新资源下载：https://github.com/socketio/socket.io

示例代码

代码部分包含四个主要方法，分别为：启动连接：socketStart() 发送数据：socketSendMessage() 接收数据：socketReceiveMessage() 断开连接：socketStop()

使用时请将变量socketUrl修改为你的服务器地址
确保你的服务器地址已在微信公众平台配置
使用时请将变量sendMessage修改为与服务器约定的格式

// socket 连接插件
const io = require('../../utils/weapp.socket.io.js')
// socket 连接地址
var socketUrl = 'wss://www.贵司服务器地址.com'
// socket 状态更新
var socketMessage = ''
// 上下文对象
var that


Page({

  /**
   * 生命周期函数--监听页面加载
   */
  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约定的数据、格式
      var sendMessage = '{"token":"v3jsoc8476shNFhxgqPAkkjt678","client":"发送内容"}'
      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 += '服务器返回数据 → \n\n' })
      that.socketReceiveMessage(d)
    })

  },

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

  /**
   * 发送消息
   */
  socketSendMessage: function (sendStr) {
    if (this.socket) {
      this.setData({ socketMessage: socketMessage += '向服务器发送数据 → ' + sendStr + '\n\n'})
      this.socket.emit('message', sendStr);
    }
  },

  /**
   * 接收消息
   */
  socketReceiveMessage: function (receivedStr) {
    this.setData({ socketMessage: socketMessage += '服务器返回数据 → ' + receivedStr + '\n\n'})
    this.socketStop();
  },
})