WebSocketsとブラウザクライアント

WebSocketsを使用してPub/Subに接続する

Pub/Subは、ウェブブラウザや他のWebSocket対応クライアントからの発行と購読の両方を可能にします。すべてのPub/Subブローカーは、追加の設定なしにWebSockets上でMQTTをネイティブにサポートしています。

Pub/SubのWebSocketサポートを使用すると、次のことができます：

ブラウザでトピックを購読し、バックエンドサービスからクライアントに近リアルタイムの更新（通知やチャットメッセージなど）をプッシュする。
WebSocketクライアントから直接テレメトリを発行し、それらのメッセージを集中サービスで集約するか、Workers Analytics Engine ↗を使用してあなたの代わりに消費する。
ブラウザクライアントと現場のMQTT対応IoTデバイスの間で直接発行と購読を行う。

クライアントがブラウザから接続する場合は、token認証を使用し、クライアントにユニークな認証情報を発行していることを確認してください。

WebSockets上のMQTT

Pub/SubにおけるWebSocketサポートは、MQTTパケット（Pub/Subの基盤となるネイティブプロトコル）をWebSocketのフレーム ↗内にカプセル化することによって機能します。

多くのMQTTライブラリでは、mqtts://スキームをwss://に置き換えることができ、コードはネイティブの「生」TCPトランスポートの代わりにWebSocketトランスポートを使用します。
WebSocketリスナーは、ネイティブMQTTの8883に対してTCPポート443と8884の両方で利用可能です。
WebSocketクライアントは、WebSockets上でMQTTを話す必要があります。現時点では、Pub/SubはWebSockets上で他のメッセージシリアル化方法をサポートしていません。
クライアントは、初期HTTP GETリクエストにsec-websocket-protocol: mqttリクエストヘッダーを含めるべきです。これにより、「WebSocket上のMQTT」リクエストと将来の非MQTTプロトコルサポートを区別します。
認証はWebSocket接続自体内で行われます。WebSocketトンネル内のMQTT CONNECTパケットには、必要なユーザー名とパスワードが含まれています。WebSocket接続自体はHTTPレベルで認証される必要はありません。

クライアントサイドのJavaScriptサポートには、最も人気のあるJavaScriptライブラリの1つであるMQTT.js ↗の使用をお勧めします。これは、WebpackやBrowserifyを介してブラウザで、またはNode.js環境で使用できます。

JavaScript Webの例

この例では、MQTT.jsのWebSocketサポートを使用してトピックを購読し、メッセージを発行します。

実際の展開では、発行者は別のクライアント、ネイティブMQTTクライアント、または他のリモートサーバー上で実行されているWebSocketクライアントである可能性があります。

// まずMQTT.jsがインストールされていることを確認してください
// > npm install mqtt
import * as mqtt from "mqtt"

// 'url'は "mqtts://BROKER.NAMESPACE.cloudflarepubsub.com:8884" です
function example(url) {
  let client = mqtt.connect(url, {
    protocolVersion: 5,
    reconnectPeriod: 0,
    username: 'anything',
    password: jwt, // アプリのフォームフィールドからこれを渡します
    clientId: '',
  })

  client.on('connect', function () {
    client.subscribe(topic, function (err) {
      if (err) {
        client.end();
      } else {
        console.log(`subscribed to ${topic}`)
      }
  })

  client.on('message', function (topic, message) {
    let line = (new Date()).toLocaleString('en-US') + ": " + message.toString() + "\n";
    console.log(line)
  })
}

JavaScriptバンドラー（Webpackなど）を使用して、ライブラリをウェブアプリケーションに含めるスクリプトに組み込むことができます。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings