微信小程序 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 ajax jsonp跨域调用实例代码
Dec 11 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
keep-alive保持组件状态的方法
Dec 02 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
简单谈谈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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php汉字转拼音的示例
2014/02/27 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
ThinkPHP路由详解
2015/07/27 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
用vue写一个日历
2020/11/02 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
python抓取网页中的图片示例
2014/02/28 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
深入理解python try异常处理机制
2016/06/01 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
中间件分为哪几类
2012/03/14 面试题
2014年教师培训的自我评价
2014/01/03 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
教师党员承诺书
2014/03/25 职场文书
一年级学生期末评语
2014/04/21 职场文书
开国大典观后感
2015/06/04 职场文书