微信小程序 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 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
用JS剩余字数计算的代码
Jul 03 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
学习php开源项目的源码指南
2014/12/21 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
Python中的super()方法使用简介
2015/08/14 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
酒鬼酒广告词
2014/03/21 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
首都博物馆观后感
2015/06/05 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript