本文主要和大家介绍微信小程序使用Socket的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下,希望能帮助到大家。

微信小程序使用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));

}

}

}

});

相关推荐:

php socket 小程序,实例详解微信小程序如何使用Socket相关推荐

  1. 详解微信小程序开发(项目从零开始)

    关注公众号 风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...

  2. 详解微信小程序页面间传递信息的三种方式

    详解微信小程序页面间传递信息的三种方式 在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存 将要存储的数据使用以下方法放入缓存 wx.setStorag ...

  3. 用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法

    详解微信小程序canvas圆角矩形的绘制的方法 发布时间:2020-10-04 18:20:31 来源:脚本之家 阅读:103 作者:清夜 微信小程序允许对普通元素通过 border-radius 的 ...

  4. java写exe程序实例,java实现可安装的exe程序实例详解

    java实现可安装的exe程序实例详解 通过编写java代码,实现可安装的exe文件的一般思路: 1.在eclipse中创建java项目,然后编写java代码,将编写好的java项目导出一个.jar格 ...

  5. java.exe 安装程序_java实现可安装的exe程序实例详解

    java实现可安装的exe程序实例详解 通过编写Java代码,实现可安装的exe文件的一般思路: 1.在eclipse中创建java项目,然后编写Java代码,将编写好的Java项目导出一个.jar格 ...

  6. anychat java_AnyChat的视频会议程序实例详解

    AnyChat(全名叫Anychat SDK),也叫音视频互动开发平台:是一套跨平台的即时通讯解决方案,基于先进的H.264视频编码标准.AAC音频编码标准与P2P技术,整合了佰锐科技在音视频编码.多 ...

  7. 详解微信小程序地图组件实例:远征军墓地分布图小程序

    先上效果图,有兴趣再往下看. 1是主页面,点一下,进入2,可以看到地图底图上有墓地分布的点位,划拉划拉放大缩小,把缅甸那块放大了,可以看到墓地点位,随便点一个点位,浮出墓地名称"西保火车站墓 ...

  8. 本地缓存需要高时效性怎么办_详解微信小程序缓存--缓存时效性

    关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...

  9. java 走马灯程序,详解微信小程序实现跑马灯效果(附完整代码)

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: 一个人活着就是为了让更多的人更好的活着! Wxss代码: /*首页跑 ...

最新文章

  1. java 在数组末尾添加元素_Java集合05——LinkedList
  2. springboot获取payload_Spring Boot 使用 JSR303 实现参数验证
  3. 计算机视觉与深度学习 | 开源SLAM、视觉里程计综述(SLAM、Visual Odometry)
  4. 网易10万+课程迅速刷屏又迅速被封:“违规”背后的思考
  5. [剑指offer]面试题第[28]题[Leedcode][JAVA][第101题][对称二叉树][队列][递归]
  6. 【Linux】Linux JSON 格式化输出
  7. 网络布线指南:光纤基础知识大扫盲
  8. Android开发学习之路-带文字的图片分享
  9. 小甲鱼python课后题和答案简书_小甲鱼Python入门 10讲 答案
  10. Linux系统编程——进程间通信概述
  11. Android fragment原因,Android总结之Fragment
  12. 使用python对微信好友进行数据分析
  13. 索尼 电视 android 8,索尼电视停止安卓8.0固件下载:因存在无法连接Wi-Fi的情况...
  14. 生成一个6位数的随机密码,且需要包括字符、数字、特殊符号
  15. java从键盘读入数据_关于Java中从键盘读入各种数据的方式
  16. MyExcel.net 使用手册
  17. HBA卡,HCA卡,IB卡,以太网卡,万兆网卡
  18. ⾯板数据分析、空间计量、空间杜宾模型学习资料
  19. 深度学习图像分类:Kaggle植物幼苗分类(Plant Seedlings Classification)完整代码
  20. Revit插件快速提高建模的效率,分别都有那种功能revit插件

热门文章

  1. 最后的配置部分:LNMP+Tomcat
  2. 机器人学 —— 机器人感知(Mapping)
  3. ios 调用系统应用的方法 应用间跳转的方法
  4. content的定义
  5. 99年毕业设计获优的程序-图书管理程序 续
  6. JAVA单例模式 关于延迟加载问题
  7. 实验十四 团队项目评审课程学习总结
  8. 转:OWASP发布Web应用程序的十大安全风险
  9. 万源之源之drupal7
  10. 设计模式的七大设计原则:其六:迪米特法则