微信小程序使用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得到网页中所有的div的id
Oct 19 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
VUE安装使用教程详解
Jun 03 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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
mac下安装nginx和php
2013/11/04 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
scrapy爬虫实例分享
2017/12/28 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python numpy存取文件的方式
2020/04/01 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
keras实现多种分类网络的方式
2020/06/11 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
数控技术专业毕业自荐书范文
2014/02/05 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript