微信小程序使用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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
Jan 19 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
echarts多条折线图动态分层的实现方法
May 24 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python Requests 基础入门
2016/04/07 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
大学生简历中个人的自我评价
2013/10/06 职场文书
新学期决心书
2014/03/11 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
教育合作协议范本
2014/10/17 职场文书
李强为自己工作观后感
2015/06/11 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers