微信小程序 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里的each使用方法详解
Dec 22 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
简单谈谈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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python中str内置函数用法总结
2020/12/27 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
大学学年自我鉴定
2013/10/28 职场文书
医学生自荐信范文
2013/12/03 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
社区党员先进事迹
2014/01/22 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
党校学习心得体会范文
2014/09/09 职场文书
武侯祠导游词
2015/02/04 职场文书
公司考勤管理制度
2015/08/04 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android