微信小程序 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 相关文章推荐
小议Javascript中的this指针
Mar 18 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
浅入深出Vue之自动化路由
Aug 06 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
mysql建立外键
2006/11/25 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
jquery实用代码片段集合
2010/08/12 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JavaScript手机振动API
2016/06/11 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python 监测文件是否更新的方法
2019/06/10 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Python调用C语言程序方法解析
2020/07/07 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
教学实习自我评价
2014/01/28 职场文书
学生自我评语大全
2014/04/18 职场文书
合作协议书格式
2014/08/19 职场文书
领导班子整改措施
2014/10/24 职场文书
党员证明模板
2015/06/19 职场文书
小学数学国培研修日志
2015/11/13 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python