Parsing WeChat applet SocketIO instance-Mini Program Development-php.cn

Parsing WeChat applet SocketIO instance

高洛峰

Release： 2017-03-31 14:01:19

Original

3544 people have browsed it

This article mainly introduces the relevant information of the WeChat applet SocketIO. Here is a simple example for everyone. Friends in need can refer to it

Simple example of the WeChat applet SocketIO:

Nowadays, good people are working on WeChat mini programs. ScoketIO is the network communication of WeChat. Its importance is self-evident. Here I will tell you how to use it and what to pay attention to!

SocketIO implementation of WeChat applet, based on the implementation of CFETram, improve the

const emitter = require(&#39;./emitter.js&#39;);

/** socket.io 协议常量 */
var packets = {
  open:   0  // non-ws
 , close:  1  // non-ws
 , ping:   2
 , pong:   3
 , message: 4
 , upgrade: 5
 , noop:   6
};
var events = { 
  CONNECT: 0,
  DISCONNECT: 1,
  EVENT: 2,
  ACK: 3,
  ERROR: 4,
  BINARY_EVENT: 5,
  BINARY_ACK: 6
};

const PING_CHECK_INTERVAL = 2000;


class WxSocketIO {
  connect(url) {
    return new Promise((resolve, reject) => {
      wx.onSocketOpen((response) => {
        this.isConnected = true;
        //this.ping();
        resolve(response);
      });
      wx.onSocketError(error => {
        if (this.isConnected) {
          this.fire(&#39;error&#39;, error);
        } else {
          reject(error);
        }
      });
      wx.onSocketMessage(message => this._handleMessage(message));
      wx.onSocketClose(result => {
        if (this.isConnected) {
          this.fire(&#39;error&#39;, new Error("The websocket was closed by server"));
        } else {
          this.fire(&#39;close&#39;);
        }
        this.isConnected = false;
        this.destory();
      });
      wx.connectSocket({
        url: `${url}/?EIO=3&transport=websocket`
      });
    });
  }
  ping() {
    setTimeout(() => {
      if (!this.isConnected) return;
      wx.sendSocketMessage({
        data: [packets.ping, &#39;probe&#39;].join(&#39;&#39;)
      });
    }, PING_CHECK_INTERVAL);
  }
  close() {
    return new Promise((resolve, reject) => {
      if (this.isConnected) {
        this.isConnected = false;
        wx.onSocketClose(resolve);
        wx.closeSocket();
      } else {
        reject(new Error(&#39;socket is not connected&#39;));
      }
    });
  }
  emit(type, ...params) {
    const data = [type, ...params];
    wx.sendSocketMessage({
      data: [packets.message, events.EVENT, JSON.stringify(data)].join("")
    });
  }
  destory() {
    this.removeAllListeners();
  }
  _handleMessage({ data }) {
    const [match, packet, event, content] = /^(\d)(\d?)(.*)$/.exec(data);
    if (+event === events.EVENT) {
      switch (+packet) {
        case packets.message:
          let pack;
          try {
            pack = JSON.parse(content);
          } catch (error) {
            console.error(&#39;解析 ws 数据包失败：&#39;)
            console.error(error);
          }
          const [type, ...params] = pack;
          this.fire(type, ...params);
          break;
      }
    }
    else if (+packet == packets.pong) {
      this.ping();
    }
  }
};

emitter.setup(WxSocketIO.prototype);

module.exports = WxSocketIO;

Copy after login

DEMO

project Attached is a DEMO project of a WeChat applet that demonstrates access to the Scoket.IO official demo chat room for convenient testing. Please refer to the official documentation for detailed usage.

How to use

const opts = {}
const socket = this.globalData.socket = new WxSocketIO()
socket.connect(&#39;ws://chat.socket.io&#39;, opts)
.then(_ => {
 console.info(&#39;App::WxSocketIO::onOpen&#39;)
 console.info(&#39;App:onShow:&#39;, that.globalData)
})
.catch(err => {
 console.error(&#39;App::WxSocketIO::onError&#39;, err)
})
其中socket.connect(ws_url, opts)中，opts目前可选值是path，用来指定使用socket.io时默认的path，比如设置opts为下列值：

{
 query: &#39;fanweixiao&#39;,
 with: &#39;mia&una&#39;,
}

Copy after login

The above is the detailed content of Parsing WeChat applet SocketIO instance. For more information, please follow other related articles on the PHP Chinese website!