微信小程序socket长链接实现

实现微信小程序进行websocket实时双向通信

下载weapp.socket.io.js

在项目中引入weapp.socket.io.js文件

在 utils 文件中建立 socket.js 文件

socket.js

const io = require("./weapp.socket.io.js"); // 引入 socket.io
const urlConfig = require('./urlConfig.js');

let wsStatus = false;
let onSocket = null;
//urlConfig.socketServer -- ws://192.168.41.189:3000
onSocket = io(urlConfig.socketServer, {
  transports: ['websocket']
}) // 连接 socket

export const connect = function (cb) {
  if (!onSocket) {
    onSocket.on('connect', function (res) { // 监听socket 是否连接成功
      cb(true, onSocket)
      wsStatus = true;
    })
    // onSocket.on('login', function (res) {
    //   console.log(res)
    // })
    setTimeout(function () { // 超时10秒，返回false
      if (!wsStatus) {
        cb(false, onSocket)
      }
    }, 10000)
  } else {
    cb(true, onSocket)
  }
}

在页面js中使用

const app = getApp();
const socket = require("../../utils/socket.js");

Page({
  onLoad: function (options) {
    this.getWxSocket();
  },
  getWxSocket() {
    // 监听socket 是否连接成功
    socket.connect((status, ws) => {
      // 连接成功
      console.log(status, ws)
      if (status) {
        // 向服务端发送消息
        ws.emit('login', {
          userId: 'Hello World'
        }); // 参数一：发送消息的socket名，参数二: 发送的数据

        // 接受服务端传来的消息
        ws.on('login_ack', (res) => { // 参数一：接收消息的socket名，参数二：返回的信息 function 
          console.log(res)
        });
      } else {
        // ...连接超时
      }
    })
  },

})

效果：