应用场景

在浏览器上点击按钮实现控制灯光、电视、窗帘等操作

确定方案

通过服务端建立支持基于WebSocket的MQTT协议。使用WebSocket建立长连接，然后在WebSocket通道上，使用MQTT协议进行通信。通过调研和demo验证下方案可行。

为什么使用WebSocket

1.WebSocket是一种在单个TCP连接上进行全双工通讯的协议，同时允许跨域通讯 2.WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

操作步骤

1.注册

根据公司搭建的消息中心注册流程操作

必传参数:

  appKey: string 
  udid: string 登录用户id
  timestamp: unix时间戳、时间偏差大于600s返回过期无效

2.建立长连接

mqtt.js, 是用JavaScript编写同时遵循MQTT协议的客户端库，可用于Node.js和浏览器

gitHub: mqtt.js

// 安装
npm install mqtt --save
或
yarn add mqtt

项目中引入

import mqtt from 'mqtt';

const options = {
  connectTimeout: 4000, // 超时时间 默认 30 * 1000毫秒，收到 CONNACK 之前等待的时间，即连接超时时间
  keepalive: 20, // 心跳时间，默认 60秒，设置 0 为禁用
  clean: true, // 设置为 false 在离线时接收 QoS 1 和 2 消息
  clientId: 'abc123wefsa234ddffefe', // 客户端Id 注册成功后返回的clientId
  username: 'dsdfewfs2912fd50254c798edfef', // 连接用户名 注册成功后返回的username
  password: '1dfeefwfsfdfec3f54119fabc123', // 连接密码 注册成功后返回的password
}

// ip：注册成功后返回的ip、端口：8083(非加密连接 ws:)、8084(加密连接 wss:)，此项目使用8083端口
const client = mqtt.connect('ws://ip.xx.xxx.61:8083/mqtt', options);

client.on('reconnect', (error) => {
  console.log('正在重连:', error)
});

client.on('error', (error) => {
  console.log('连接失败:', error)
});

3.订阅/发布消息

// 连接成功后进行订阅、发布信息
client.on('connect', (e) => {
  console.log('连接成功');

  // subscribec: 注册成功后返回的topics下的subscribe
  this.client.subscribe(subscribe);

  // publish: 注册成功后返回的topics下的publish; publishMsg：要发送的内容
  client.publish(publish, publishMsg, (error) => {
    console.log(error || '发布成功')
  })

})

// 接收消息
client.on('message', (topic, message) => {
  console.log('收到消息');
  const response = JSON.parse(message.toString());
  console.log(response);
  // ... 业务处理
})

demo地址

MQTT over WebSocket