微信小程序 - 使用 weapp.socket.io - 客户端

 

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

下载 weapp.socket.io.js 

 

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

 

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

 

在 socket.js 文件中写入：

const io = require("../lib/weapp.socket.io.js");  // 引入 socket.io
const App = getApp();

let wsStatus = false;
let onSocket = null;
onSocket = io("wss://xxxxx(socket路径)", { 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中使用

//index.js

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

Page({
  data: {
    motto: \'Hello World\',
  },

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


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