微信小程序 SocketIO 实例讲解


Posted in Javascript onOctober 13, 2016

微信小程序 ScoketIO 简单实例:

现在好的人在搞微信小程序,ScoketIO 是微信的网络通信,它的重要性不言而喻,这里给大家讲讲如何使用以及注意事项!

微信小程序 的SocketIO 实现,基于CFETram 的实现基础上完善

const emitter = require('./emitter.js');

/** 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('error', error);
        } else {
          reject(error);
        }
      });
      wx.onSocketMessage(message => this._handleMessage(message));
      wx.onSocketClose(result => {
        if (this.isConnected) {
          this.fire('error', new Error("The websocket was closed by server"));
        } else {
          this.fire('close');
        }
        this.isConnected = false;
        this.destory();
      });
      wx.connectSocket({
        url: `${url}/?EIO=3&transport=websocket`
      });
    });
  }
  ping() {
    setTimeout(() => {
      if (!this.isConnected) return;
      wx.sendSocketMessage({
        data: [packets.ping, 'probe'].join('')
      });
    }, PING_CHECK_INTERVAL);
  }
  close() {
    return new Promise((resolve, reject) => {
      if (this.isConnected) {
        this.isConnected = false;
        wx.onSocketClose(resolve);
        wx.closeSocket();
      } else {
        reject(new Error('socket is not connected'));
      }
    });
  }
  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('解析 ws 数据包失败:')
            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;

DEMO

项目附了一个微信小程序的DEMO 项目演示了接入 Scoket.IO 官方的演示聊天室,以便方便测试,关于详细用法还请参考官方文档。

How  to use

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

{
 query: 'fanweixiao',
 with: 'mia&una',
}

完整实例地址:https://github.com/fanweixiao/wxapp-socket-io

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
通过url查找a元素并点击
Apr 09 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
详解JS ES6编码规范
May 07 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 #Javascript
使用jquery如何获取时间
Oct 13 #Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 #Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 #Javascript
js给table赋值的实例代码
Oct 13 #Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 #Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 #Javascript
You might like
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
JS实现页面打印功能
2017/03/16 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
Python如何判断数独是否合法
2016/09/08 Python
Python中动态创建类实例的方法
2017/03/24 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python 检查文件mime类型的方法
2018/12/08 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Python生成器常见问题及解决方案
2020/03/21 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
教师专业自荐书范文
2014/02/10 职场文书
法人授权委托书格式
2014/04/08 职场文书
反对邪教标语
2014/06/30 职场文书
物业保安岗位职责
2014/07/02 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android