微信小程序使用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 相关文章推荐
js动态创建表格,删除行列的小例子
Jul 20 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
微信小程序实现简易table表格
Jun 19 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 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
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
修改发贴的编辑功能
2007/03/07 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
js里面的变量范围分享
2020/07/18 Javascript
Python 常用string函数详解
2016/05/30 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
浅谈Python __init__.py的作用
2020/10/28 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
怎样声明接口
2014/09/19 面试题
什么是.net
2015/08/03 面试题
电子技术专业中专生的自我评价
2013/12/17 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android