微信小程序 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 相关文章推荐
JQuery select控件的相关操作实现代码
Sep 14 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
js实现日历的简单算法
Jan 24 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
vue-lazyload使用总结(推荐)
Nov 01 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实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python简易远程控制单线程版
2018/06/20 Python
python之django母板页面的使用
2018/07/03 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python批量修改ssh密码的实现
2019/08/08 Python
python实现飞机大战小游戏
2019/11/08 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
Hammitt官网:设计师手袋
2020/05/23 全球购物
毕业留言寄语大全
2014/04/10 职场文书
家长对孩子的评语
2014/04/18 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
大学生受助感言
2015/08/01 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
Java字符串逆序方法详情
2022/03/21 Java/Android