微信小程序使用socketio建立websocket双向通信踩坑总结（后端使用flask）

前端界面如下

前端实现如下

 1. 首先明确一点，微信小程序并不能直接使用原生的api来使用socketio
 2. 需要下载weapp.socket.io文件,链接地址如下：https://blog-static.cnblogs.com/files/sanyekui/weapp.socket.io.js，此文件自动带着心跳保持websocket链接不断
 3. 下载完的js文件放到项目里的某个目录下，比如在项目根目录里新建lib文件夹，将js文件保存为weapp.socket.io.js
 4.在需要通信的小程序js文件里引入weapp.socket.io文件
 5.在页面onShow的生命周期里建立websocket链接，页面销毁的时候onUpload销毁链接，
 5.代码如下：
 const io = require('../../lib/weapp.socket.io.js')
 let socketUrl = 'wss://...',//该变量的值为你需要链接的wss地址
 initWebSocketIo(){
    
    
        const socket = (this.socket = io(socketUrl,{
    
    
            transports: ['websocket'], // 此项必须设置
            extraHeaders: {
    
    
              token: wx.getStorageSync('token'), // header增加了token
            },
            reconnectionAttempts: 3, // 失败后重新连接次数，一直失败总共尝试四次
            reconnectionDelay: 2000, // 重新连接间隔时间毫秒
            forceNew:true,
        }))
        socket.on('connect', () => {
    
    
            // this.setData({ socketMessage: socketMessage += 'SOCKET连接成功 → \n\n' })
            console.log('SOCKET连接成功');
            // 此处修改为与server约定的数据、格式
            // var sendMessage = '{"token":"v3jsoc8476shNFhxgqPAkkjt678","client":"发送内容"}'
        })
        socket.on('connect_timeout', d => {
    
    
            // this.setData({ socketMessage: socketMessage += 'SOCKET连接超时 → \n\n' })
            console.log('SOCKET连接超时');
        })    
        socket.on('reconnect', attemptNumber => {
    
    
            // this.setData({ socketMessage: socketMessage += 'SOCKET正在重连 → \n\n' })
            console.log(socket.id);
            console.log(attemptNumber);
            console.log('SOCKET正在重连');
        }) 
        socket.on('reconnect_failed', () => {
    
    
            // this.setData({ socketMessage: socketMessage += 'SOCKET重连失败 → \n\n' })
            console.log('SOCKET重连失败');
        }) 
        // socket.on('reconnect_attempt', () => {
    
    
        //     // this.setData({ socketMessage: socketMessage += 'SOCKET正在重连 → \n\n' })
        //     console.log('SOCKET正在重连');
        // })                      
        socket.on('disconnect', reason => {
    
    
            // this.setData({ socketMessage: socketMessage += 'SOCKET连接断开 → \n\n' })
            console.log('SOCKET连接断开');
        }) 
        socket.on('error', err => {
    
    
            // this.setData({ socketMessage: socketMessage += 'SOCKET连接错误 → \n\n' })
            console.log(error,'错误信息');
            console.log('SOCKET连接错误');
        }) 
        socket.on('hebao_receive', (data) => {
    
    
            // this.setData({ socketMessage: socketMessage += '服务器返回数据 → \n\n' })
            this.socketReceiveMessage(data)
            // callback('确认消息已接收')
        })           
     }, 
  /**
   * 断开socket
   */
  socketStop() {
    
    
    if (this.socket) {
    
    
      this.socket.close()
      this.socket = null
    }
  },
   /**
   * 发送消息
   */
  socketSendMessage(sendStr) {
    
    
    if (this.socket) {
    
    
      this.socket.emit('hebao_stream', sendStr);
      console.log('向服务端发送消息');
    }
  }, 
  //接收消息
  socketReceiveMessage(receivedStr){
    
    
  	//其中receivedStr是后端传给我们的消息值
  }