微信小程序 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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
JS中的函数与对象的创建方式
May 12 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实现下载功能的代码
2012/09/29 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php实现多城市切换特效
2015/08/09 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript实现当前页导航激活的方法
2015/02/27 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
Python中的pprint折腾记
2015/01/21 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
九州传奇上机题
2014/07/10 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
机械专业应届生求职信
2013/09/21 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
信息技术课后反思
2014/04/27 职场文书
入党介绍人评语
2014/05/06 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
Python天气语音播报小助手
2021/09/25 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript