Version: 3.2.1

MQTT-WebSocket连接通信

物联平台支持基于WebSocket的MQTT协议。您可以首先使用WebSocket建立连接，然后在WebSocket通道上，使用MQTT协议进行通信，即MQTT over WebSocket。

背景信息

使用WebSocket方式主要有以下优势：

使基于浏览器的应用程序可以像普通设备一样，具备与服务端建立MQTT长连接的能力。
WebSocket方式使用443端口，消息可以顺利穿过大多数防火墙。

操作步骤

准备证书。WebSocket可以使用ws和wss两种方式，ws是普通的WebSocket连接，wss是增加了TLS加密。如果使用wss方式进行安全连接，需要使用和TLS直连相同的根证书。
选择客户端。直接使用官方客户端，仅需替换连接URL。其他语言版本客户端或者是自主接入，请参见开源MQTT客户端。使用前请阅读相关客户端的说明，是否支持WebSocket方式。
连接说明。使用WebSocket方式进行连接，区别主要在MQTT连接URL的协议和端口号，MQTT连接参数和TCP直接连接方式完全相同。

部分demo代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <title>websocket测试</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  </style>
  <script>
    let webSocket = null
    // 创建连接
    function testConnect() {
      // 获取前缀
      var prefix = document.getElementById("prefix").value;
      // 获取域名配置
      var domainName = document.getElementById("domainName").value;
      // 获取token配置
      var tokenValue = document.getElementById("tokenValue").value;
      if (domainName) {
        if (tokenValue) {
          // 组合url
          let url = prefix + '://' + domainName + '/api/ws/plugins/telemetry?token=' + tokenValue
          // 创建连接
          webSocket = new WebSocket(url)
          // 连接打开回调
          webSocket.onopen = () => {
            document.getElementById("stateValue").innerHTML = '连接成功'
          }
          // 连接关闭回调
          webSocket.onclose = (event) => {
            document.getElementById("stateValue").innerHTML = '连接断开'
          }
          // 接受消息回调
          webSocket.onmessage = (event) => {
            console.log(event.data)
            let text = document.createElement("p")
            text.innerHTML = event.data
            document.getElementById("messageList").appendChild(text)
          }
        } else {
          alert('请输入token')
        }
      } else {
        alert('请输入域名')
      }

    }
    // 发送消息
    function sendMessage() {
      var sendValue = document.getElementById("sendValue").value;
      console.log(sendValue)
      if (sendValue) {
        // 发送消息为字符串格式
        webSocket.send(sendValue)
      } else {
        alert('请输入要发送的消息')
      }
    }
    // 主动断开连接
    function socketClose() {
      webSocket.close()
    }
  </script>

</head>

<body translate="no">
  <h1>Web Socket测试</h1>
  <div>
    <h3>前缀</h3>
    <input id="prefix" value="ws">
  </div>
  <div>
    <h3>域名</h3>
    <input id="domainName" value="">
  </div>
  <div>
    <h3>token</h3>
    <input id="tokenValue" value="">
    <button onclick="testConnect()">测试连接</button>
    <button onclick="socketClose()">断开连接</button>
  </div>
  <div>
    <h3>状态</h3>
    <span id="stateValue"></span>
  </div>
  <div>
    <h3>发送消息</h3>
    <textarea id="sendValue" name="saysth" rows="5" cols="30"></textarea>
    <button onclick="sendMessage()">发送</button>
  </div>
  <div>
    <h3>消息</h3>
    <div id="messageList"></div>
  </div>
</body>
</html>