微信小程序连接MQTT服务器全过程
准备工作
首先是需要准备的东西:
- 一台服务器(我用的是腾讯云)
 - SSL证书(必须品,腾讯云可以免费申请)
 - mqtt.js第三方库(后面会介绍怎么用)
 
MQTT服务器搭建
MQTT服务器搭建的过程请参考 : 这篇文章,我就是一路按照这篇博文搭建的服务器。
证书选择
下载的证书中可能含有阿帕奇、nginx等多个文件夹,部署MQTT服务器时使用的是阿帕奇(apache)文件中的
证书不完整
我从腾讯云申请的证书,后来在小程序测试时会发生开发者工具中可以正常使用,但是真机调试就不行(选不选检验合法域名都不行),其实是因为所颁发的证书不完整的原因,可以通过以下方法解决:
- 进入SSL证书状态监测网站:,输入自己的域名以及websocket+ssl的端口(按照上述文章是8081),点击监测。
 - 如果在降级原因中有证书链不完整的字样,那么请进入证书链修补工具:
 - 将生成的证书链复制替换原来三个文件中的第二个(2_www.qilv.group.crt)即可。
 
重启服务器
重启mqtt服务器可以使用如下方法:
- 查看mosquitto 进程 ps -aux | grep mosquitto
 - 杀死进程 kill -9 15869
 - 重启 mosquitto -c /etc/mosquitto/mosquitto.conf -d 至此,服务器的搭建已经完成!
 
微信小程序使用mqtt
mqtt.js下载
- 正常版:
 - mini版:
 
创建mqtt连接
首先在app.js中,最上方(App({})的上方)添加代码:
var mqtt = require("/utils/mqtt.js") //引入mqtt文件
//随机生成字符串,因为clientId你设成一个固定字符串的话,当你编译
代码的时候就会以这个ID连接服务器,当预览或者真机调试的时候还是这个
ID,就会发生ID冲突的问题,当时差点被这个不起眼的BUG整疯
function randomString(len) { 
  len = len || 32;
  var $chars = ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678;
  var maxPos = $chars.length;
  var pwd = ;
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}
//连接配置
const options = {
  connectTimeout: 4000,  //超时时间
  clientId: randomString(30),  //随机生成ID
  username: ,  //用户名
  password: ,  //密码
} 
接下来在App中添加小程序加载监听函数:
onLaunch: function () {
    let that = this
    var client = mqtt.connect(wxs://www.xxx.email:8081, options) //你自己的域名
    client.on(connect, (e) => {
      console.log(成功连接服务器!)
    })
    client.subscribe(esp8266, {
      qos: 0
    }, function (err) {
      if (!err) {
        console.log("订阅成功:esp8266")
      }
    })
    client.on(message, function (topic, message, packet) {
      that.globalData.mqttData = packet.payload.toString()
    })
} 
这样,在全局变量中就储存了服务器发来的消息,其他页面均可读取消息:
const app = getApp();   //引入全局变量
Page({
	console.log(app.globalData.mqttData)
}) 
其他
mqtt.js需要注意的地方
var client = mqtt.connect(wxs://www.xxxx.email:8081, options)
mqtt.js的其他地方
请参考这片文章:
合法域名问题
这个问题我也不太清楚,因为我一直没有勾选不检测合法域名的选项,现在补充一下如何添加合法域名:
- 依次点击:开发-开发设置-服务器域名
 - 添加服务器地址 :www.xxx.email:8081;即可
 
上一篇:
			            uniapp开发微信小程序-2.页面制作 
			          
			          下一篇:
			            微信小程序——服务器接口 
			          
			        