微信小程序使用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 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
JavaScript实现省份城市的三级联动
Feb 11 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
js继承实现方法详解
2016/12/16 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python仿抖音表白神器
2019/04/08 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python实现超市商品销售管理系统
2019/10/25 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
Internet体系结构
2014/12/21 面试题
高中同学聚会邀请函
2014/01/11 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
经管应届生求职信范文
2014/05/18 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
个人廉政承诺书
2015/04/28 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
《假如》教学反思
2016/02/17 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL