導入事例
このガイドは、クライアントを当社に接続するための詳細なステップバイステップの指示を提供しますMQTTブローカー(CrysqlMQ) JavaScriptを使用して、または選択したブローカー。 必要な前提条件をカバーし、 セットアップ, 信頼できる接続を確立するプロセスを通してあなたを導きます。 学習方法 認証の実装、サブスクリプションの管理、メッセージ交換の処理 と このドキュメントのヘルプは、JavaScript Web をシームレスに統合できます。 効率的なデータ通信のためのMQTTブローカーを持つクライアント。
前提条件
依存性インストール
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
MQTTブローカーに接続する
クライアントを Websocket に接続するために、次のコードを使用します。
MQTTブローカーの接続を使用してマクロアドレスを定義する パラメータ。
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
// MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 10443,
'ws' // WebSocket プロトコル
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`ws://${options.hostname}:${options.port}/mqtt`、
オプション
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// トピックを購読する
client.subscribe('cmq/topic', (err) => ) クライアント
もし(!err) {
console.log('トピックにサブスクライブ');
// メッセージを公開する
クライアント.publish('cmq/topic', 'Hello CMQ', { qos: 2, 保持: true, (err)
メニュー
もし(!err) {
console.log('Messageが公開されました。');
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
MQTT 5の特長
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT v5 の MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 10443,
プロトコル: 'ws', // WebSocket プロトコル
ProtocolVersion: 5, // MQTT バージョン 5
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
プロパティ: お問い合わせ
セッション ExpiryInterval: 60, // セッションの有効期限間隔を秒単位で設定
お問い合わせ
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`ws://${options.hostname}:${options.port}/mqtt`、
オプション
// クライアントイベントの処理
client.on('connect', (connack) => ('connect', (connack') ) は、
console.log('MQTT Broker.'、connack で正常に接続)。
// MQTT v5 プロパティでトピックを購読する
const トピック = 'cmq/topic';
document.getElementById('topic').textContent = トピック;
client.subscribe(トピック、{qos:2、nl:true、rap:true、rh:0)
付与) => お問い合わせ
もし(!err) {
console.log('トピックにサブスクライブ。', 付与);
document.getElementById('subscriptionStatus').textContent = 'subscribed
トピック。
// MQTT v5 プロパティでメッセージを公開
'Hello CMQ' のメッセージ
client.publish(topic, message, { qos: 2, 保持: true, プロパティ: お問い合わせ
お問い合わせ _ ExpiryInterval お問い合わせ
もし(!err) {
console.log('Messageが公開されました。');
document.getElementById('publishedMessage').textContent = メッセージ;
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
セキュアなWebSocket上MQTT
以下のコードを使用してMQTTブローカーに安全に接続します TLS 以上
MQTTブローカーの接続を使用してマクロアドレスを定義する パラメータ。
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT クライアントオプションを TLS 設定で設定する
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 11443,
プロトコル: 'ws', // セキュアな WebSocket プロトコル
拒否 無許可:true, // 任意、無許可を拒否して下さい
証明書
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
// // // // 必要に応じて追加のTLSオプションを追加
cert: クライアント Cert, // クライアント証明書
キー: あなたの ClientKey, // クライアントキー
ca: yourCaCert // CA 証明書
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`wss://${options.hostname}:${options.port}/mqtt`、
オプション
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// トピックを購読する
const トピック = 'cmq/topic';
document.getElementById('topic').textContent = トピック;
client.subscribe(トピック、(err) => {
もし(!err) {
console.log('トピックにサブスクライブ');
document.getElementById('subscriptionStatus').textContent = 'subscribed
トピック。
// メッセージを公開する
'Hello CMQ' のメッセージ
クライアント.publish(topic, message, { qos: 2, 保持: true, (err) => お問い合わせ
もし(!err) {
console.log('Messageが公開されました。');
document.getElementById('publishedMessage').textContent = メッセージ;
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
MQTTClient_connect を呼び出す前に TLS パラメータを設定する クライアントを TLS 上で安全に mQTT ブローカーに接続します。
MQTT ブローカーが信頼できるサーバーおよび信頼できるサーバーでホストされている場合 サーバ認証は不要で、以下のコードをTLSに設定できます。 オプション:
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT クライアントオプションを TLS 設定で設定する
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 11443,
プロトコル: 'ws', // セキュアな WebSocket プロトコル
拒否 未承認: false, // サーバー証明書の無効化
認証
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
// // // // 必要に応じて追加のTLSオプションを追加
// 証明書: yourClient Cert, // クライアント証明書
// キー: クライアントキー, // クライアントキー
// ca: yourCaCert // CA 証明書
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`wss://${options.hostname}:${options.port}/mqtt`、
オプション
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// トピックを購読する
const トピック = 'cmq/topic';
document.getElementById('topic').textContent = トピック;
client.subscribe(トピック、(err) => {
もし(!err) {
console.log('トピックにサブスクライブ');
document.getElementById('subscriptionStatus').textContent = 'subscribed
トピック。
// メッセージを公開する
'Hello CMQ' のメッセージ
クライアント.publish(topic, message, { qos: 2, 保持: true, (err) => お問い合わせ
もし(!err) {
console.log('Messageが公開されました。');
document.getElementById('publishedMessage').textContent = メッセージ;
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
MQTTブローカーにサーバー証明書が発行されている場合 信頼される CA は、サーバー 証明書を使用して確認することができます:
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// CA 証明書をロードする(CA 証明書を同梱する)
文字列またはURL)
const ケー Cert = `-----BEGINの証明書-----
MIIDdzCCAl+gAwIBAgIEUzJ7kDANBgkqhkiG9w0BAQQQswCQYDVQQQGEWJV
UzERMA8GA1UECAwIU29tZS1TdGF0ZTEUMBIGA1UEBwLU29tZS1DaXR5MRMwEQYD
VQQKDApJbnRlcm5ldCBDQTETMBEGA1UEAwwKQ2VydGlmaWNhdGUwHhcNMTkxMjMx
MDAwMDAwWhcNMjAxMjMwMDAwMJBoMQYDVQQJVUzERMA8GA1UECAwI
U29tZS1TdGF0ZTEUMBIGA1UEBwLU29tZS1DaXR5MRMwEQKDApJbnRlcm5l
DCBDQTETMBEGA1UEAwKQ2VydGlmaWNhdWGwggEiMA0GCSqGSIb3DQEBAQUAA4IB
DwAwggEKAoIBAQC2Xk1eRm94bw3hm8+K0H5/4eU9G8hb8CQXj0FGONMSY0zg/P4n
M6t2+/GsQbj3FAg/SwQ5lH9qO7CxTn/ANX4gO3KO9m0pjHfDkSx7hPlZoLR3oQz
73VcxltoHtUKg4+QAcI5nwb+byA3f1EOn+0V5d41rmlVxRk1dKl7FA8wN2zO7aLO
+F1QnIvDC/d9EjGqcmY8c9y4+fqzgH+iQFPq5APEL5Ead/nk5a8dRfd6Wb8GV6lg
o8pI0sMlS8HdLMjpCewMI7Nhu0a5ZOnC+S7a3YB2UO4jXg3ADm5nLqG6rbEpD1DE
A4NBoXBx+RhfdMfyPTNVhd8XtavXUkmyEBKbAgMBAAGJITAfMB0GA1UdDgQW BBQI
1hNfdp9a6f5Jm9peGr+m4iJ+IzANBgkqhkiG9w0BAQFAAOCAQEADJc2ddg4TGcB
Z7ViZ5の特長 UlfI02KFA+E4xmdvZOE+aNkqZHYt21ou9lnzZoLbdK+9woO4F/8i0HBZ0h
MDhjeHGkZT+yxT1uWh6ldZggVDF6X/8zWy8RmG/k+bQTeTiU/wLfGPN0bsfvmFXV
sqE/O0rbc1LCaRIyRoEUfW/hmkf9UjYdW+FOcY5VfJm+GpLPOZLrAL3QAWYnsO8j
F1h7W2pE3TOS/W+vXFrY7T1hdIzQpAhvhflS/jmEAB+8PvX6QPV7DfbRoIsFBOxk
VtRuycCimUnhCnQqv+kdazUZzVz48huRl1A/5T/mcf2hrE9q2tmX8qXT8Vs2O5Ky
Pbq9jsS/xA=======
-----最終証明書-----`;
// MQTT クライアントオプションを TLS 設定で設定する
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 11443,
プロトコル: 'ws', // セキュアな WebSocket プロトコル
ca: caCert, // CA 証明書
拒否 無許可:true, // サーバ証明書が確保される
検証済み
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`wss://${options.hostname}:${options.port}/mqtt`、
オプション
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// トピックを購読する
const トピック = 'cmq/topic';
document.getElementById('topic').textContent = トピック;
client.subscribe(トピック、(err) => {
もし(!err) {
console.log('トピックにサブスクライブ');
document.getElementById('subscriptionStatus').textContent = 'subscribed
トピック。
// メッセージを公開する
'Hello CMQ' のメッセージ
クライアント.publish(topic, message, { qos: 2, 保持: true, (err) => お問い合わせ
もし(!err) {
console.log('Messageが公開されました。');
document.getElementById('publishedMessage').textContent = メッセージ;
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
もし、MQTTブローカー自己署名されたサーバー 証明書を持っています それからサーバー 証明書はから得られるルートの証明書を使用して確認することができます MQTTブローカー:
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// ルート CA 証明書をロードします(root CA 証明書の指定は
文字列として使用可能)
const ケー Cert = `-----BEGINの証明書-----
MIIDdzCCAl+gAwIBAgIEUzJ7kDANBgkqhkiG9w0BAQQQswCQYDVQQQGEWJV
UzERMA8GA1UECAwIU29tZS1TdGF0ZTEUMBIGA1UEBwLU29tZS1DaXR5MRMwEQYD
VQQKDApJbnRlcm5ldCBDQTETMBEGA1UEAwwKQ2VydGlmaWNhdGUwHhcNMTkxMjMx
MDAwMDAwWhcNMjAxMjMwMDAwMJBoMQYDVQQJVUzERMA8GA1UECAwI
U29tZS1TdGF0ZTEUMBIGA1UEBwLU29tZS1DaXR5MRMwEQKDApJbnRlcm5l
DCBDQTETMBEGA1UEAwKQ2VydGlmaWNhdWGwggEiMA0GCSqGSIb3DQEBAQUAA4IB
DwAwggEKAoIBAQC2Xk1eRm94bw3hm8+K0H5/4eU9G8hb8CQXj0FGONMSY0zg/P4n
M6t2+/GsQbj3FAg/SwQ5lH9qO7CxTn/ANX4gO3KO9m0pjHfDkSx7hPlZoLR3oQz
73VcxltoHtUKg4+QAcI5nwb+byA3f1EOn+0V5d41rmlVxRk1dKl7FA8wN2zO7aLO
+F1QnIvDC/d9EjGqcmY8c9y4+fqzgH+iQFPq5APEL5Ead/nk5a8dRfd6Wb8GV6lg
o8pI0sMlS8HdLMjpCewMI7Nhu0a5ZOnC+S7a3YB2UO4jXg3ADm5nLqG6rbEpD1DE
A4NBoXBx+RhfdMfyPTNVhd8XtavXUkmyEBKbAgMBAAGJITAfMB0GA1UdDgQW BBQI
1hNfdp9a6f5Jm9peGr+m4iJ+IzANBgkqhkiG9w0BAQFAAOCAQEADJc2ddg4TGcB
Z7ViZ5の特長 UlfI02KFA+E4xmdvZOE+aNkqZHYt21ou9lnzZoLbdK+9woO4F/8i0HBZ0h
MDhjeHGkZT+yxT1uWh6ldZggVDF6X/8zWy8RmG/k+bQTeTiU/wLfGPN0bsfvmFXV
sqE/O0rbc1LCaRIyRoEUfW/hmkf9UjYdW+FOcY5VfJm+GpLPOZLrAL3QAWYnsO8j
F1h7W2pE3TOS/W+vXFrY7T1hdIzQpAhvhflS/jmEAB+8PvX6QPV7DfbRoIsFBOxk
VtRuycCimUnhCnQqv+kdazUZzVz48huRl1A/5T/mcf2hrE9q2tmX8qXT8Vs2O5Ky
Pbq9jsS/xA=======
-----最終証明書-----`;
// MQTT クライアントオプションを TLS 設定で設定する
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 11443,
プロトコル: 'ws', // セキュアな WebSocket プロトコル
ca: caCert, // ルート CA 証明書
拒否 無許可:true, // サーバ証明書の確認
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`wss://${options.hostname}:${options.port}/mqtt`、オプション);
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// トピックを購読する
const トピック = 'cmq/topic';
document.getElementById('topic').textContent = トピック;
client.subscribe(トピック、(err) => {
もし(!err) {
console.log('トピックにサブスクライブ');
document.getElementById('subscriptionStatus').textContent = 'subscribed
トピック。
// メッセージを公開する
'Hello CMQ' のメッセージ
クライアント.publish(topic, message, { qos: 2, 保持: true, (err) => お問い合わせ
もし(!err) {
console.log('Messageが公開されました。');
document.getElementById('publishedMessage').textContent = メッセージ;
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
MQTT の設定 認証
MQTT ユーザー名と MQTT を必要とする MQTT ブローカーに接続するには 認証用のパスワード、接続オプションにユーザー名とパスワードを追加 このように:
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
// MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 10443,
'ws' // WebSocket プロトコル
ユーザー名: 'username', // 必要に応じてユーザー名を追加
パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`ws://${options.hostname}:${options.port}/mqtt`、
オプション
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// トピックを購読する
client.subscribe('cmq/topic', (err) => ) クライアント
もし(!err) {
console.log('トピックにサブスクライブ');
// メッセージを公開する
クライアント.publish('cmq/topic', 'Hello CMQ', { qos: 2, 保持: true, (err)
メニュー
もし(!err) {
console.log('Messageが公開されました。');
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
高度な機能
最終ウィル&テストの設定
設定する最後の意志と Testament 機能を指定する ブローカーは、クライアントが予期しない接続を解除した場合、ブローカーが公開されるメッセージ。 これは、接続されていないクライアントのステータスの他の加入者に通知するのに役立ちます。
接続にLast Willを設定するには、次のコードを使用します。 オプション:
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT v5 の MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 10443,
プロトコル: 'ws', // WebSocket プロトコル
ProtocolVersion: 5, // MQTT バージョン 5
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
プロパティ: お問い合わせ
セッション ExpiryInterval: 60, // セッションの有効期限間隔を設定します
秒単位
お問い合わせ
お問い合わせ
トピック: 'cmq/lastwill', // LWT メッセージを公開するトピック
ペイロード:「クライアントは予期しない」、 // LWT メッセージ
qos: 1、 // QoS レベル
保存: true // メッセージを保持するかどうか
お問い合わせ
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`ws://${options.hostname}:${options.port}/mqtt`、
オプション
調節は生きている保ちます
MQTTの特長クライアント・ブローカー・コネクションを維持 働き続けるメカニズム。 調節して下さい お問い合わせ常に生き続ける頻度を制御する間隔 クライアントは、PINGREQメッセージをブローカーに送信します。
あなたの要件に合ったコードを変更します。
/ クライアントIDの生成
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT v5 の MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 10443,
プロトコル: 'ws', // WebSocket プロトコル
ProtocolVersion: 5, // MQTT バージョン 5
keepalive: 60, // 秒単位で連続した間隔を設定します
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
プロパティ: お問い合わせ
セッション ExpiryInterval: 60, // セッションの有効期限間隔を設定します
秒単位
お問い合わせ
お問い合わせ
トピック: 'cmq/lastwill', // LWT メッセージを公開するトピック
ペイロード:「クライアントは予期しない」、 // LWT メッセージ
qos: 1、 // QoS レベル
保存: true // メッセージを保持するかどうか
お問い合わせ
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`ws://${options.hostname}:${options.port}/mqtt`、
オプション
// クライアントイベントの処理
client.on('connect', (connack) => ('connect', (connack') ) は、
console.log('MQTT Broker.' で正常に接続されている)
connack;
// MQTT v5 プロパティでトピックを購読する
const トピック = 'cmq/topic';
document.getElementById('topic').textContent = トピック;
client.subscribe(トピック、{qos:2、nl:true、rap:true、rh:0)
(err, 付与) => お問い合わせ
もし(!err) {
console.log('トピックにサブスクライブ。', 付与);
document.getElementById('subscriptionStatus').textコンテンツ =
「トピックに申し込む」;
// MQTT v5 プロパティでメッセージを公開
'Hello CMQ' のメッセージ
client.publish(topic, message, { qos: 2, 保持: true, プロパティ: お問い合わせ
お問い合わせ _ ExpiryInterval お問い合わせ
もし(!err) {
console.log('Messageが公開されました。');
document.getElementById('publishedMessage').textコンテンツ =
メッセージ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
セッションの持続性の設定
MQTTクライアントのセッションデータには、 クライアントとクライアントが受け取る任意のデータによって行われたサブスクリプション QoS>0。 クライアントは、MQTT ブローカーがセッションデータを接続間で保存することができます。
MQTT 3.1.1 クライアントは、クリーンセッション = 0 を設定してリクエストすることができます。
MQTT 3.1.1の特長
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT v3.1.1 の MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 10443,
プロトコル: 'ws', // WebSocket プロトコル
プロトコルバージョン: 4、 // MQTT バージョン 3.1.1
clean: false, // クリーンセッションを 0 に設定する
keepalive: 60, // 秒単位で連続した間隔を設定します
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
トピック: 'cmq/lastwill', // LWT メッセージを公開するトピック
ペイロード:「クライアントは予期しない」、 // LWT メッセージ
qos: 1、 // QoS レベル
保存: true // メッセージを保持するかどうか
お問い合わせ
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`ws://${options.hostname}:${options.port}/mqtt`、
オプション
MQTTの特長 5 クライアントは、クリーンスタート = 0 とセッションの有効期限を設定できます Interval = 'N' が MQTT ブローカーに要求され、セッション情報を保持する 'N' 秒間の接続
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// セッション Expiry Interval を秒単位で設定 (N)
コントセッション ExpiryInterval = 3600; // 1時間
// MQTT v5 の MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 10443,
プロトコル: 'ws', // WebSocket プロトコル
ProtocolVersion: 5, // MQTT バージョン 5
cleanStart: false, // クリーンスタートを0に設定する
セッション ExpiryInterval: sessionExpiryInterval, // セッションの有効期限を設定する
インターバル
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
トピック: 'cmq/lastwill', // LWT メッセージを公開するトピック
ペイロード:「クライアントは予期しない」、 // LWT メッセージ
qos: 1、 // QoS レベル
保存: true // メッセージを保持するかどうか
お問い合わせ
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`ws://${options.hostname}:${options.port}/mqtt`、
オプション
設定最大 パケット サイズ
MQTT5 クライアントは、MQTT ブローカーにデータを送信するだけを要求することができます このように設定することで、特定のサイズ未満のパケット:
// クライアント ID を生成する
const クライアント Id = 生成ClientId('crystalmq_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT v5 の MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 10443,
プロトコル: 'ws', // WebSocket プロトコル
ProtocolVersion: 5, // MQTT バージョン 5
maxPacketSize: 1024, // バイトの最大パケットサイズ
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
トピック: 'cmq/lastwill', // LWT メッセージを公開するトピック
ペイロード:「クライアントは予期しない」、 // LWT メッセージ
qos: 1、 // QoS レベル
保存: true // メッセージを保持するかどうか
お問い合わせ
お問い合わせ
// MQTT クライアントを作成する
const クライアント =
mqtt.connect(`ws://${options.hostname}:${options.port}/mqtt`、
オプション
出版情報
データの送信
複数の加入者にデータを効率的に配信 以下のコードスニペットで指定されたトピックに公開します。
MQTT 3.1.1の特長
// クライアント ID を生成する
const クライアント Id = 生成ClientId('mqtt_publisher_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT v3.1.1 の MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 1883,
プロトコル: 'mqtt', // MQTT プロトコル
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
// MQTT クライアントを作成する
const クライアント = mqtt.connect(`ws://${options.hostname}:${options.port}`,
オプション
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// 複数のトピックにメッセージを公開する
制約トピック = ['topic1', 'topic2', 'topic3'];
制約メッセージ = 'Hello MQTT';
Topics.forEach(トピック =>) お問い合わせ
クライアント.publish(topic, message, { qos: 2 }, (err) => お問い合わせ
もし(!err) {
console.log({topic}` に投稿されたメッセージ);
document.getElementById('公開メッセージ').innerHTML +====
`<li>公開
${topic}: ${message}</li>`;
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
MQTT 5の特長
// クライアント ID を生成する
const クライアント Id = 生成ClientId('mqtt5_publisher_', 10);
document.getElementById('clientId').textコンテンツ = クライアント イド;
// MQTT v5 の MQTT クライアントオプションの設定
制約オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 1883,
プロトコル: 'mqtt', // MQTT プロトコル
ProtocolVersion: 5, // MQTT バージョン 5
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
// MQTT クライアントを作成する
const クライアント = mqtt.connect(`ws://${options.hostname}:${options.port}`,
オプション
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// 複数のトピックにメッセージを公開する
制約トピック = ['topic1', 'topic2', 'topic3'];
制約メッセージ = 'Hello MQTT v5';
Topics.forEach(トピック =>) お問い合わせ
クライアント.publish(topic, message, { qos: 2 }, (err) => お問い合わせ
もし(!err) {
console.log({topic}` に投稿されたメッセージ);
document.getElementById('公開メッセージ').innerHTML +====
`<li>公開
${topic}: ${message}</li>`;
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
保持メッセージの設定
メッセージの公開時に保持フラグを有効にして、 ブローカーは、各トピックの最後のメッセージを格納します。 これは、新しい加入者を保証する 接続時に最新のメッセージを受信します。
これを実行するには、次のコードスニペットを使用します。
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// 複数のトピックにフラグを保持するメッセージを公開する
制約トピック = ['topic1', 'topic2', 'topic3'];
const メッセージ = 'Retain で MQTT v5 を 'Hello MQTT v5 ';
Topics.forEach(トピック =>) お問い合わせ
クライアント.publish(topic, message, { qos: 2, 保持: true, (err) => お問い合わせ
もし(!err) {
console.log(`メッセージは${topic}に公開され、保持します。`);
document.getElementById('公開メッセージ').innerHTML +====
`<li>公開
${topic}: ${message}</li>`;
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
QoSレベルを指定する
MQTTは、サービスの品質(QoS)の3つのレベルを提供します メッセージ配達:
- QoS 0 (一度に)
- QoS 1 (少なくとも一度)
- QoS 2 (一度だけ)
MQTT メッセージを公開する際に必要な QoS レベルを指定します。 このコード:
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// QoS 0 でメッセージを公開する (一度に)
クライアント.publish('topic/qos0', 'QoS 0' のメッセージ, { qos: 0 }, (err) =>
お問い合わせ
もし(!err) {
console.log('QoS 0.' で公開されたメッセージ);
document.getElementById('公開メッセージ').innerHTML +====
`<li>公開
QoS 0: QoS 0</li>` のメッセージ。
お問い合わせ
お問い合わせ
// QoS 1 でメッセージを公開 (少なくとも一度)
クライアント.publish('topic/qos1'、QoS 1'のメッセージ、{qos: 1 }、(err) =>
お問い合わせ
もし(!err) {
console.log('QoS 1.' で公開されたメッセージ);
document.getElementById('公開メッセージ').innerHTML +====
`<li>公開
QoS1:QoS1のメッセージ</li>`;
お問い合わせ
お問い合わせ
// QoS 2 でメッセージを公開する (一度に)
クライアント.publish('topic/qos2'、QoS 2'のメッセージ、{qos: 2 }、(err) =>
お問い合わせ
もし(!err) {
console.log('QoS 2.' で公開されたメッセージ);
document.getElementById('公開メッセージ').innerHTML +====
`<li>公開
QoS 2: QoS 2のメッセージ</li>`;
お問い合わせ
お問い合わせ
お問い合わせ
メッセージの有効期限インターバル
「メッセージの有効期限間隔」プロパティは、メッセージの寿命を設定します 秒; この時間内に配信されていない場合、ブローカーはそれを破棄します。 MQTT5は、この機能をサポートしています。 MQTT5 クライアントは、データを公開する際にこれを設定できます。
トピック 別名で
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// メッセージの有効期限インターバル(30秒)でメッセージを公開する
トピック
const トピック = 'トピック/メッセージ_expiry';
const メッセージ = 「メッセージの有効期限間隔」;
制約メッセージ ExpiryInterval = 30; // 秒でメッセージ有効期限インターバル
client.publish(topic, message, { qos: 1, 保持: false, プロパティ: お問い合わせ
メッセージ TalkEnglishのオフライン版をダウンロードし、8000を超える音声ファイルと800ページを超えるレッスンで英語漬けになって、もっと速く英語を話せるように勉強しよう。そうすれば、インターネットに接続していなくても勉強ができ、MP3プレーヤーを使っていつでも音声ファイルを聞くことができます。英語ダウンロードのページにいって、今日さっそくダウンロードしましょう! お問い合わせ
もし(!err) {
console.log(`Messageが${topic}に投稿されたメッセージの有効期限
インターバル。
document.getElementById('公開メッセージ').innerHTML +====
`<li>公開
${トピック}: ${メッセージ} (有効期限インターバル:${messageExpiryInterval}秒)
</li>`;
お問い合わせ
お問い合わせ
お問い合わせ
トピック 別名で
'Topic Alias' プロパティは、クライアントが短いエイリアスを使用することを可能にします トピック名の代わりに、メッセージパケットサイズを減らし、ネットワークを改善 効率。
MQTT 5の特長
// クライアントイベントの処理
client.on('connect', () => クライアント
console.log('MQTT Broker.' で正常に接続されている);
// トピックにTopic Aliasを使用してメッセージを公開する
const トピックエイリアス = 1; // トピックエイリアス数(数値識別子)
トピック)
const トピック = 'topic/alias';
const メッセージ = 'Topic Alias' のメッセージ。
// Topic Alias で公開
client.publish(topic, message, { qos: 1, 保持: false, プロパティ: お問い合わせ
TopicsAlias: トピックAlias, (err) => お問い合わせ
もし(!err) {
console.log({topic} に Topic Alias が投稿したメッセージ)
${topicAlias}. ;
document.getElementById('公開メッセージ').innerHTML +====
`<li>公開
${トピック}: ${メッセージ} (Topic Alias: ${topicAlias})</li>`;
お問い合わせ
お問い合わせ
お問い合わせ
MQTT PUBLISHに関連付けられている特性はメッセージの処理を高めます、 ブローカーやクライアントのコンテキストや指示を提供します。 これらのプロパティ, 含む メッセージの有効期限間隔とトピックのエイリアス、メッセージ配信とネットワークの最適化 帯域幅。
会員登録
トピックフィルタへのサブスクライブ
他のクライアントが公開したデータを受信するには、このクライアントは マッチングトピックフィルタを購読する:
// マルチレベルのワイルドカードサブスクリプション
client.subscribe('sensors/#'、(err) => { ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' '
もし(!err) {
console.log('すべてのセンサートピックにサブスクライブ。');
お問い合わせ
お問い合わせ
// シングルレベルのワイルドカードサブスクリプション
client.subscribe('sensors/+/temp',(err) =>{
もし(!err) {
console.log('センサー/+/温度にサブスクライブ)
お問い合わせ
お問い合わせ
このトピックフィルタは、正確なトピックと一致させることができます。 # や + のようなワイルドカード
データの受信
サブスクリプションに送信されたデータを受信するには、コールバック関数 次のように定義する必要があります。
// 着信メッセージを処理するコールバック関数を定義する
client.on('message', (トピック、メッセージ、パケット) => お問い合わせ
console.log({topic}`) のトピックに関するメッセージを受信しました。
console.log(`メッセージ内容: ${message.toString()}`);
// 受信メッセージに基づく追加処理
// 例:HTMLでメッセージを表示する
受信した メッセージ = document.getElementById('受信メッセージ');
receiveMessages.innerHTML += `<li>トピック:${topic}、メッセージ:
${message.toString()}</li>`;
お問い合わせ
トピックからの購読解除
トピックから更新を受信を停止するには、提供されたコードを使用します 購読解除
// から退会するトピック
const トピックToUnsubscribe = 'センサー/温度';
// トピックから退会
client.unsubscribe(topicToUnsubscribe、(err) => お問い合わせ
もし(!err) {
console.log(トピックから購読解除:${topicToUnsubscribe}`);
お問い合わせ
console.error(トピックから退会しなかった:${topicToUnsubscribe}`、
エル;
お問い合わせ
お問い合わせ
クライアントの切断
クライアントの接続を適切に終了させる 双方の問題および資源の漏出を避けるブローカー、それによって維持システム 安定性。
以下のコードを使用して、ブローカーからクライアントを切断します。
client.end(true, () => お問い合わせ
console.log('MQTT Broker.' から切断)。
お問い合わせ
// 接続解除を確認するイベントを閉じる
client.on('close', () => クライアント お問い合わせ
console.log('MQTTブローカーへの接続を閉じました。');
// オプション: ここで再接続ロジックを実装する
setTimeout(() => お問い合わせ
お問い合わせ
client.reconnect(); クライアント // // // // 遅延後に再接続しようとする
お問い合わせ
console.log('Reconnecting が失敗しました。');
お問い合わせ
}、5000); // 5秒後に再接続(必要に応じて調整)
お問い合わせ
ビジネスロジックの構築
自分で開発してカスタマイズする機会があります この環境内でビジネスロジックを複雑にし、具体的に具体的に ニーズと目的。
ベストプラクティスの実践
クライアントIDのカスタマイズ
正確な識別を容易にするために、各デバイスに一意のクライアントIDを提供します。 インスタグラム プライベートセットアップ, 異なる クライアントへのID、共有コンテキスト中、ランダムな文字列を組み込む 各クライアント ID に、独自性を維持します。
戦略的にデータフレームワークを事前に設計します。 プレーンテキストを管理するかどうか、 JSON データフォーマット、数値データセット、構造を最適にサポートすることを確認します。 アプリケーションの使用。
強力なエラー処理
MQTT接続を処理する強力なエラー管理を実施 失敗、サブスクリプションの問題、およびメッセージを効果的に公開するエラー。
機密保持
ユーザー名、パスワードなどの機密情報を保護 ソースコードにハードコーディングしないクライアントID。 環境変数または 代わりに設定ファイルを固定します。
定期的なテストと監視
MQTT 通信を継続的にテストし、クライアントのメトリックを監視 接続状況、メッセージスループット、エラーレートなど、迅速に識別し、 問題の修正。
セッションマネジメントの最適化
クリーンで永続的なセッション(`clean: true` または `clean: false`) は、サブスクリプションとキューイングされたメッセージを全体に保持する必要がある クライアントの接続。
接続解除の解除
接続解除の解除 予期しない時にMQTTブローカーに再接続しようとするコードを追加 切断。 これは、クライアントが接続を維持し、失わないことを確実にします データ。
コードをダウンロード
JavaスクリプトMQTTクライアントを使用するクライアントのための完全なコードをダウンロード ブローカーまたは選択したブローカーと接続するためのライブラリ。
MQTT 3.1.1 js ファイル
document.addEventListener('DOMContentLoaded', (イベント) => お問い合わせ
関数 main() お問い合わせ
// MQTT クライアントの初期化
const クライアント Id = 生成ClientId('crystalMQ_', 10);
document.getElementById('mqttV4ClientId').textContent=クライアント イド;
// MQTT v4 の設定
ミントmqtt V4Options={
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 1883,
プロトコル: 'ws', // MQTT プロトコル
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
// MQTT v4 クライアントを作成する
ミントmqtt V4の クライアント =
mqtt.connect(`ws://${mqttV4Options.hostname}:${mqttV4Options.port}`、
mqttV4Options;
// MQTT v4 イベントハンドラ
mqttV4Client.on('connect', () =>{
console.log('MQTT v4 Broker に接続します。');
document.getElementById('mqttV4Status').textContent = 'Connected';
お問い合わせ
mqttV4Client.on('message'、(トピック、メッセージ) => お問い合わせ
console.log('MQTT v4 で受信したメッセージ: ${topic} -
${message.toString()}`);
document.getElementById('mqttV4Received').innerHTML += `<li>トピック:
${トピック},
メッセージ: ${message.toString()}</li>`;
お問い合わせ
mqttV4Client.on('close', () =>{
console.log('MQTT v4 Broker から切断します。');
document.getElementById('mqttV4Status').textContent = 'Disconnected';
お問い合わせ
// MQTT v4 のパブリッシング機能
window.publishMessageV4 = 関数(トピック、メッセージ) {
mqttV4Client.publish(トピック、メッセージ、{qos: 1 }、(err) => お問い合わせ
もし(!err) {
console.log("MQTT v4 で公開されたメッセージ: ${topic} - ${message}`);
document.getElementById('mqttV4Published').innerHTML += `<li>公開
${topic}: ${message}</li>`;
お問い合わせ
console.error(`MQTT v4: ${err}` でメッセージを公開できなかった);
お問い合わせ
お問い合わせ
お問い合わせ
// MQTT v4 の機能を購読する
window.subscribeToTopicV4 = 関数(トピック) お問い合わせ
mqttV4Client.subscribe(トピック、(err) => お問い合わせ
もし(!err) {
console.log(`MQTT v4トピックにサブスクライブ: ${topic}`);
document.getElementById('mqttV4Subscribed').textContent = トピック;
お問い合わせ
console.error(`MQTT v4 トピックを購読できません: ${err}`);
お問い合わせ
お問い合わせ
お問い合わせ
// MQTT v4 の切断機能
window.disconnectClientV4 = 関数() お問い合わせ
mqttV4Client.end(true, () =>{
console.log('Disconnected MQTT v4 クライアント');
document.getElementById('mqttV4Status').textContent = 'Disconnected';
お問い合わせ
お問い合わせ
お問い合わせ
関数 createClientId(プレフィックス、長さ) {
コント文字 =
「ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789」;
結果 = 接頭辞;
用 (i = 0; i <長さ; i ++) お問い合わせ
結果 += chars.charAt(Math.floor(Math.random() * chars.length));
お問い合わせ
リターン結果;
お問い合わせ
メイン();
お問い合わせ
MQTT 3.1.1 html ファイル
ドキティペ html>
<html lang="en">
<ヘッド>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<タイトル>MQTT 例</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script src="mqtt-v4.js" type="text/javascript"></script>
</ヘッド>
<ボディ>
<h1>MQTTの例</h1>
<!-- MQTT v4 セクション -->
<h2>MQTT v4</h2>
<p><strong>クライアントID:</strong> <span>
id="mqttV4ClientId"></span></p>
<p><strong> ステータス:</strong> <span>
id="mqttV4Status"> 接続解除</span></p>
<button onclick="disconnectClientV4()">Disconnect MQTTの特長
v4</button>
<時間>
<h3>サブスクリプション</h3>
<input type="text" id="mqttV4SubscribeTopic" プレースホルダー="Topic to
購読する
<ボタン
onclick="subscribeToTopicV4(document.getElementById('mqttV4SubscribeTopic').value)">サブスクリプション</button>
<p><strong> に説明:</strong> <span
id="mqttV4Subscribed"></span></p>
<時間>
<h3>公開</h3>
<input type="text" id="mqttV4PublishTopic" プレースホルダー="Topic to
出版 >
<input type="text" id="mqttV4PublishMessage" プレースホルダー="メッセージ
出版 >
<ボタン
onclick="publishMessageV4(document.getElementById('mqttV4PublishTopic').value,
document.getElementById('mqttV4PublishMessage').value)">公開</button>
<h3>公開メッセージ</h3>
<ul id="mqttV4Published"></ul>
<h3>受信メッセージ</h3>
<ul id="mqttV4Received"></ul>
</ボディ>
</html>
MQTT 5 Jsファイル
document.addEventListener('DOMContentLoaded', (イベント) => お問い合わせ
関数 main() お問い合わせ
// MQTT クライアントの初期化
const クライアント Id = 生成ClientId('mqtt5_client_'、10);
document.getElementById('mqttV5ClientId').textContent=クライアント イド;
// MQTT v5 の設定
ミントmqtt V5オプション = {
クライアント Id: クライアント アイド,
hostname: 'public-mqtt-broker.bevywise.com',
ポート: 1883,
プロトコル: 'ws', // MQTT プロトコル
プロトコルバージョン: 5、
// ユーザー名: 'username', // 必要に応じてユーザー名を追加
// パスワード: 'password', // 必要に応じてパスワードを追加
お問い合わせ
// MQTT v5 クライアントを作成する
ミントmqtt V5の クライアント =
mqtt.connect(`ws://${mqttV5Options.hostname}:${mqttV5Options.port}`、
mqttV5Options;
// MQTT v5 イベントハンドラ
mqttV5Client.on('connect', () =>{
console.log('MQTT v5 Broker に接続します。');
document.getElementById('mqttV5Status').textContent = 'Connected';
お問い合わせ
mqttV5Client.on('message'、(トピック、メッセージ) => お問い合わせ
console.log("MQTT v5 の受信メッセージ: ${topic} -
${message.toString()}`);
document.getElementById('mqttV5Received').innerHTML += `<li>トピック:
${トピック},
メッセージ: ${message.toString()}< /li>`;
お問い合わせ
mqttV5Client.on('close', () => お問い合わせ
console.log('MQTT v5 Broker から切断します。');
document.getElementById('mqttV5Status').textContent = 'Disconnected';
お問い合わせ
// MQTT v5 のパブリッシング機能
window.publishMessageV5 = 関数(トピック、メッセージ) {
mqttV5Client.publish(トピック、メッセージ、{qos: 1 }、(err) => お問い合わせ
もし(!err) {
console.log("MQTT v5 で公開されたメッセージ: ${topic} - ${message}`);
document.getElementById('mqttV5Published').innerHTML += `<li>公開
${topic}: ${message}</li>`;
お問い合わせ
console.error(`MQTT v5: ${err}` でメッセージを公開できなかった);
お問い合わせ
お問い合わせ
お問い合わせ
// MQTT v5 の機能を購読する
window.subscribeToTopicV5 = 関数(トピック) お問い合わせ
mqttV5Client.subscribe(トピック、(err) => {
もし(!err) {
console.log(`MQTT v5トピックにサブスクライブ: ${topic}`);
document.getElementById('mqttV5Subscribed').textContent = トピック;
お問い合わせ
console.error(`MQTT v5のトピックを購読できません: ${err}`);
お問い合わせ
お問い合わせ
お問い合わせ
// MQTT v5 の切断機能
window.disconnectClientV5 = 関数() お問い合わせ
mqttV5Client.end(true, () => お問い合わせ
console.log('Disconnected MQTT v5 クライアント。');
document.getElementById('mqttV5Status').textContent = 'Disconnected';
お問い合わせ
お問い合わせ
お問い合わせ
関数 createClientId(プレフィックス、長さ) {
コント文字 =
「ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789」;
結果 = 接頭辞;
用 (i = 0; i <長さ; i ++) お問い合わせ
結果 += chars.charAt(Math.floor(Math.random() * chars.length));
お問い合わせ
リターン結果;
お問い合わせ
メイン();
お問い合わせ
ドキティペ html>
<html lang="en">
<ヘッド>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<タイトル>MQTT 例</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script src="mqtt-v5.js" type="text/javascript"></script>
</ヘッド>
<ボディ>
<!-- MQTT v5 セクション -->
<h2>MQTT v5</h2>
<p><strong>クライアントID:</strong> <span>
id="mqttV5ClientId"></span></p>
<p><strong> ステータス:</strong> <span>
id="mqttV5Status"> 接続解除</span></p>
<button onclick="disconnectClientV5()">Disconnect MQTTの特長
v5</button>
<時間>
<h3>サブスクリプション</h3>
<input type="text" id="mqttV5SubscribeTopic" プレースホルダー="Topic to
購読する
<ボタン
onclick="subscribeToTopicV5(document.getElementById('mqttV5SubscribeTopic').value)">サブスクリプション</button>
<p><strong> に説明:</strong> <span
id="mqttV5サブスクリプション"></span></p>
<時間>
<h3>公開</h3>
<input type="text" id="mqttV5PublishTopic" プレースホルダー="Topic to
出版 >
<input type="text" id="mqttV5PublishMessage" プレースホルダー="メッセージ
出版 >
<ボタン
onclick="publishMessageV5(document.getElementById('mqttV5PublishTopic').value,
document.getElementById('mqttV5PublishMessage').value)">公開</button>
<h3>公開メッセージ</h3>
<ul id="mqttV5Published"></ul>
<h3>受信メッセージ</h3>
<ul id="mqttV5Received"></ul>
</ボディ>
</html>
実行可能なバンドルを作成する
クライアントを最先端のMQTTブローカーまたは任意の状態に接続 あなたの選択のブローカー。 この強力な組み合わせにより、最適なパフォーマンスが保証され、 すべてのあなたのメッセージングのニーズのための信頼性、堅牢で効率的なシステムのための方法舗装 統合。