快速使用MQTT 支付宝小程序 SDK实现消息收发

本文介绍支付宝小程序端如何连接环信MQTT消息云快速实现消息的自收自发。

1.1 配置小程序开发环境

注册支付宝小程序帐号,并下载小程序开发者工具。由于支付宝小程序安全要求比较高,在与后台服务器之间的通讯必须使用加密传输协议,连接地址前缀必须携带'alis:'。

1.2 导入项目依赖

在本地文件夹中预置支付宝小程序端使用的mqtt.min.js SDK。

import mqtt from '../../utils/mqtt.min.js'

2.1 获取鉴权

为保障客户安全性需求,环信MQTT云服务为客户提供token鉴权认证,获取token流程包含:创建用户ID获取token URL

2.1.1 创建用户ID

首先需要登录环信云console控制台,点击左侧菜单栏【应用概览】→【用户认证】页面,点击【创建IM用户】按钮,增添新的账户信息(包括用户名及密码)。

2.1.2 获取token URL

点击左侧菜单栏【即时通讯】→【服务概览】页面,查看下图中token域名、org_name、app_name。
获取token URL格式为:https:/ /{token域名}/{org_name}/{app_name}/token。

客户端获取token代码示例如下:

/**
   * 客户端获取token(password)代码示例如下:
   */
var appName = 'XXX' // appName
var orgName = 'XXXX' // orgName
var baseUrl = 'https://XXXX' // token域名 https://

var grantType = 'password' // 获取token接口的参数,不用改动

var username = 'XXX' // IM用户名
var password = 'XXX' // IM用户密码

  getToken: function () {
    let that = this
    my.request({
      url: baseUrl + '/' + orgName + '/' + appName + '/token',
      method: 'POST',
      data: {
        grant_type: grantType,
        username: username, // 用户名
        password: password // 用户登录密码
      },
      headers: {
        'content-type': 'application/json' //默认值
      },
      dataType: 'json',
      success: function (res) {
        // 获取到的access_token
        console.log('Token:' + res.data.access_token)
        
        console.log(that.data.options)
        that.data.options.password = res.data.access_token
        that.toast(res.data.access_token)
      },
      fail: function (res) {
        my.alert({ content: 'fail' })
      }
    })
  },

2.2 获取连接信息

登录console后台,点击左侧菜单栏【MQTT】→【服务概览】,在下图红色方框内获取连接地址、端口以及AppID等信息。
注:clientID由两部分组成,组织形式为“deviceID@AppID”,deviceID由用户自定义,AppID见【服务配置】。
示例:正确的clientID格式为:“device001@aitbj0”;

2.3 初始化

在项目中创建MQTT客户端,客户端初始配置包括创建clientID,topic名称,QoS质量,连接地址等信息。

var deviceId = 'deviceId001' // MQTT 用户自定义deviceID
var appId = 'ytlbe0' // 从console控制台获取
const host = 'alis://XXX' // xxxx 为连接地址需要在console后台 MQTT首页概览获取

Page({
  data: {
    client: null,
    //记录重连的次数
    reconnectCounts: 0,
    //MQTT连接的配置
    options: {
      keepalive: 60, //60s
      clean: true, //cleanSession不保持持久会话
      protocolVersion: 4, //MQTT连接协议版本
      clientId: deviceId + '@' + appId, // deviceID@AppID
      password: '', // 用户token, 可以通过getToken方法获取,或者去console控制台获取对应的token
      username: username, // IM用户名
      reconnectPeriod: 1000, //1000毫秒,两次重新连接之间的间隔 设置为0则关闭自动重链
      connectTimeout: 30 * 1000, //30 * 1000毫秒,两次重新连接之间的间隔
      resubscribe: true, //如果连接断开并重新连接,则会再次自动订阅已订阅的主题(默认true)
      my: my //注意这里的my
    }
  },

2.4 连接服务器

配置连接密码、cleansession标志、心跳间隔、超时时间等信息,调用connect()函数连接至环信MQTT消息云。

connect() {
    var that = this
    //开始连接
    this.data.client = mqtt.connect(host, this.data.options)
    this.data.client.on('connect', function (connack) {
      console.log('服务器连接成功', connack)
      that.toast('服务器连接成功')
    })
    }

2.5 订阅(subscribe)

2.5.1 订阅主题
当客户端成功连接环信MQTT消息云后,需尽快向服务器发送订阅主题消息。

subOne() {
    var that = this
    this.data.client.subscribe('Topic0', function (err, granted) {
      if (!err) {
        console.log('>>>>>>主题订阅成功')
        that.toast('订阅主题Topic0成功')
      } else {
        console.log(err)
      }
    })
  }

2.5.2 取消订阅

unSubscribe() {
    var that = this
    this.data.client.unsubscribe('Topic0', function (err) {
      if (!err) {
        console.log('>>>>>>主题取消订阅成功')
        that.toast('取消订阅Topic0成功')
      } else {
        console.log(err)
      }
    })
  }

2.6 收发消息

2.6.1 发送消息
配置发送消息回调方法,向环信MQTT消息云中指定topic发送消息。

pubMsg: function () {
    if (this.data.client && this.data.client.connected) {
      this.data.client.publish('Topic0', 'hello world')
    }
  }

2.6.2 接收消息
配置接收消息回调方法,从环信MQTT消息云接收订阅消息。

//服务器下发消息的回调
    this.data.client.on('message', function (topic, payload) {
      console.log('收到 topic:' + topic + ' , payload :' + payload)
      that.toast('收到 topic:' + topic + ' , payload :' + payload)
    })
  • 完整demo示例,请参见demo下载
  • 目前MQTT客户端支持多种语言,请参见 SDK下载
  • 如果您在使用MQTT服务中,有任何疑问和建议,欢迎您联系我们