关闭

微信小程序Socket的实现_基于socket-io

时间: 2018-07-06阅读: 9073标签: 小程序

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。


下面就介绍wxapp-socket-io基于socket-io的实现:

wxapp-socket-io的安装:

npm i weapp.socket.io

或者

git clone https://github.com/wxsocketio/weapp.socket.io.git


实现步骤:

1、小程序目录新建lib目录,把weapp.socket.io.js放入里面。


2、在utils目录下新建文件sockte.js代码如下:

const io = require("../lib/weapp.socket.io.js")
const App = getApp()

let wsStatus = false
let onSocket = null

export const connect = function (cb) {
  if (!onSocket) {
    onSocket = io(App.globalData.socket)//socket的地址
    onSocket.on('connect', function (res) {
      cb(true, onSocket)
      wsStatus = true
    }) 
    setTimeout(function () {//超时
      if (!wsStatus) {
        cb(false, onSocket)
      }
    }, 10000)
  } else {
    cb(true, onSocket)
  }
}

说明:在globalData中配置socket的地址。需要注意的在开发过程中如果是http对应的是ws://,上线后为https才使用wss://。


3、在需要使用的页面。代码如下:

const socket = require("../../utils/socket.js")
videoCallSocket: function (fn) {/**判断接听,挂断,超时的Websocket */  

socket.connect((status, ws) => {
  let data = {}//数据
  this.ws = ws
  if (status) {
    ws.emit('login', JSON.stringify(data), res => {
      if (res.resultCode == 2000) {
        //登录成功
      }
    })
    ws.on('callRequest', res => {
       //code
    }
  })
},


4、判断socket链接断开

ws.on('disconnect', (reason) => { //socket断开连接
    console.log("socket断开,网络连接失败")
})


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/913

关闭

微信小程序picker组件两列关联使用方式

在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变

微信小程序实现右侧菜单的功能效果

这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件

个人怎么做微信小程序

据说移动互联网的轻量级应用是微信applet。简而言之,applet是基于微信平台的应用程序。目前,小方案的主题非常重要。它通知主要媒体和新闻,以及小程序如何打开。它也在增加,甚至个人也可以开发它

了解小程序

顾名思义,「小程序」本质上与我们平常经常使用的 app 和操作系统一样,都是一段电脑程序。你可以将小程序理解为「运行在微信上的 app」。与普通的 app 不同的是,小程序的语言使用网页前端的技术栈

小程序web-view关闭后,页面音频没有关闭

在web-view的src中,引入了一个HTML5页面,这个页面有个自动播放的音频。在小程序中,点击右上角关闭小程序后,web-view页面中的音频依然会播放。

小程序组件开发_小程序实现自定义组件的多种方式

在小程序中,目前也支持简单的组件化编程,可以把页面通用功能模块抽象成自定义组件,以以便在不同的页面中复用,提供代码可读性,降低维护成本,这篇文章主要讲解小程序实现组件开发的多种方式

在微信小程序中保存网络图片

在小程序的文档中我们得知,wx.saveImageToPhotosAlbum 是用来保存图片到相册的。 但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径,不支持网络图片路径,意味着我们不能直接调用这个接口。

记一次小程序样式优化重构

在开发的过程中遇到了一些问题,但是最终减少了不少样式代码,同时功能上也更加强大。进一步来说,如果在后面我们的小程序用户想要自己定制化主题,也可以很快的实现。

小程序开发的一些细节,你有注意吗?

我认为小程序是一个没有什么技术含量的东西,特别是现在有了组件库,而且小程序生态不断完善的情况下,只要对着文档慢慢写就好,就是时间的问题。然后这里也不是教大家怎么去写程序之类的,而是本人在经历过后的一些小建议

百度小程序性能优化建议:分包和合理使用setData

智能小程序的视图层使用了 san 框架,相对于其他类似 react 等 mvvm 框架来通过 virtual dom diff 来实现组件的渲染来说,san 框架是基于 data 的 diff 来进行的组件重新渲染,减少了内存的使用率与计算量,保证视图更新的高效性。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!