微信小程序使用Socket的实例


Posted in Javascript onSeptember 19, 2017

微信小程序使用Socket的实例

首先,一个小程序同时只能有一个WebSocket连接,如果当前已经存在一个WebSocket连接,会关闭当前连接,并重新建立一个连接。

其次,如果使用了appID,协议必须是 wss://...

最近团队用小程序做行情,在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接,

时间紧迫,抓耳挠腮,遂引用了socket-io(基于小程序的websocket仿写的socket-io,并非官方的socket-io,传送门),使用方法:

1、先在utils文件夹粘贴一个io的js

2、然后 npm install wxapp-socket-io

3、config文件夹下新建一个socket.js,对socket连接进行封装,如下:

const io = require('../utils/io.js')
let url = 'wss://......'
let wsStatus = false
let onSocket = null
export const connect = function(cb){
  if(!onSocket){
    onSocket = io(url)
    onSocket.on('connect', function (res) {
      cb(true,onSocket)
      wsStatus = true
    })
    setTimeout(function(){
      if(!wsStatus){
        cb(false,onSocket)
      }
    },10000)
  }else{
    cb(true,onSocket)
  }
}

4、在要引用的页面调用,全局封装订阅方法

let openSocket = require('../../config/socket')
let app = getApp()
let socket = null
Page({
data: {
  zl: [[422, 400, 468, 834, 785, 446, 845, 517, 630, 797, 890, 529, 553, 425, 469, 470, 837, 841, 521, 525], [422, 400, 468, 834, 785, 446, 845, 517, 630, 797, 890, 529, 553, 425, 469, 470, 837, 841, 521, 525]]
},
onLoad: function () {
  let that = this;
  //socket调用
  openSocket.connect(function (status, ws) {
    if (status) {
      socket = ws
      this.subscribe('zl')//对封装好对订阅方法进行调用
      socket.on('broadcast', function (msg) {//广播
        console.log("broadcast");
        console.log(msg);
      })
    } else {
      alert("socket 连接失败")
    }
  });
},
subscribe: function (type) {
  if (socket) {
    let eis = this.data[type]
    if (eis && eis.length > 0) {
      let param = {//仅供参考,根据接口自行更改
        eis: eis.join(',')
      }
      socket.emit('subscribe', JSON.stringify(param));
    }
  }
}
});

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
关于延迟加载JavaScript
May 05 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 #Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 #Javascript
详解ES6之async+await 同步/异步方案
Sep 19 #Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 #Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
You might like
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python使用thrift教程的方法示例
2019/03/21 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
python如何更新包
2020/06/11 Python
python实现图片转字符画的完整代码
2021/02/21 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
英语自我介绍演讲稿
2014/09/01 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server