准备工作

最近作比赛，需要用到物联网平台，对于实时的系统来说，mqtt透传是最好的选择，而微信小程序的开发成本又很低廉，所以最终决定使用微信小程序+MQTT服务器的方式来实现，其中也踩了不少坑，所以就此分享一下搭建项目的全过程。

首先是需要准备的东西：

1. 一台服务器（我用的是腾讯云）
2. SSL证书（必须品，腾讯云可以免费申请）
3. 域名（也是必须品，因为微信小程序会检测合法域名，不能直接挂IP）
4. mqtt.js第三方库（后面会介绍怎么用）

MQTT服务器搭建

MQTT服务器搭建的过程请参考 ：mqtt+ssl服务搭建以及ws+wss支持 这篇文章，我就是一路按照这篇博文搭建的服务器。

证书选择

下载的证书中可能含有阿帕奇、nginx等多个文件夹，部署MQTT服务器时使用的是阿帕奇（apache）文件中的

证书不完整

我从腾讯云申请的证书，后来在小程序测试时会发生开发者工具中可以正常使用，但是真机调试就不行（选不选检验合法域名都不行），其实是因为所颁发的证书不完整的原因，可以通过以下方法解决：

1. 进入SSL证书状态监测网站：https://myssl.com/ssl.html，输入自己的域名以及websocket+ssl的端口（按照上述文章是8081），点击监测。
2. 如果在降级原因中有证书链不完整的字样，那么请进入证书链修补工具：https://myssl.com/chain_download.html
3. 将生成的证书链复制替换原来三个文件中的第二个（2_www.qilv.group.crt）即可。

重启服务器

重启mqtt服务器可以使用如下方法：

1. 查看mosquitto 进程
   ps -aux | grep mosquitto
2. 杀死进程
   kill -9 15869
3. 重启
   mosquitto -c /etc/mosquitto/mosquitto.conf -d
   至此，服务器的搭建已经完成！

微信小程序使用mqtt

微信小程序使用mqtt是通过websocket来实现，需要用到mqtt.js这一个第三方库。

mqtt.js下载

由于微信小程序不支持CDN（可能支持，反正我是不能用）,所以只能下载到你的项目里，地址：

1. 正常版：https://unpkg.com/[email protected]/dist/mqtt.js
2. mini版：https://unpkg.com/[email protected]/dist/mqtt.min.js

创建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)

使用时要注意 是wxs 而不是 wss，因为这个第三方库的作者进行了一次封装

mqtt.js的其他地方

请参考这片文章：在微信小程序中使用mqtt服务

合法域名问题

这个问题我也不太清楚，因为我一直没有勾选不检测合法域名的选项，现在补充一下如何添加合法域名：

1. 打开微信小程序控制台页面
2. 依次点击：开发-开发设置-服务器域名
3. 添加服务器地址 ：www.xxx.email:8081；即可