MQTT Websocketクライアントコネクティビティ

テキストコピッド

導入事例

このガイドは、クライアントを当社に接続するための詳細なステップバイステップの指示を提供しますMQTTについて(CrysqlMQ) JavaScriptを使用して、または選択したブローカー。 必要な前提条件をカバーし、 セットアップ, 信頼できる接続を確立するプロセスを通してあなたを導きます。 学習方法 認証の実装、サブスクリプションの管理、メッセージ交換の処理 と このドキュメントのヘルプは、JavaScript Web をシームレスに統合できます。 効率的なデータ通信のためのMQTTブローカーを持つクライアント。

前提条件

クライアントファイルに以下のプラグインを追加します。

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

MQTTの特長 コネクト

基本TCP コネクション

const クライアント Id = 'testclient3';
ミントmqtt V4Options= お問い合わせ
クライアント Id: クライアント アイド,
hostname: 'broker-url',
ポート: 10443,
ハードウェア: 'ws'
お問い合わせ
const mqttV4Client = mqtt.connect(`ws://${mqttV4Options.hostname}:${mqttV4Options.port}`、mqttV4Options);


認証と接続:

ミントmqtt V4Options= お問い合わせ
クライアント Id: クライアント アイド,
hostname: 'broker-url',
ポート: 10443,
'ws', // MQTT ツール
'username', // ユーザ名
// 'password', // デフォルト言語
お問い合わせ


TLS/SSL に接続

安全にご使用いただくためTLS/SSLの特長: : :

ミントmqtt V4Options= お問い合わせ
クライアント Id: クライアント アイド,
hostname: 'broker-url',
ポート: 11443,
ハードウェア: 'ws'
無許可の証明書は、
// // // // // // // // // // // // // // //
cert: 'yourClientCert', // クライアント証明書
キー: 'yourClientKey', // クライアントキー
'yourCaCert' // CA 証明書
お問い合わせ
const mqttV4Client = mqtt.connect(`ws://${mqttV4Options.hostname}:${mqttV4Options.port}`、mqttV4Options);

MQTT出版

トピックにデータを送信するには:

window.publishMessageV4 = 関数(トピック、メッセージ) お問い合わせ
mqttV4Client.publish(トピック、メッセージ、{qos: 1 }、(err) => お問い合わせ
スタッフ
console.log("MQTT v4 で公開されたメッセージ: ${topic} - ${message}`);
お問い合わせ
console.error(`MQTT v4: ${err}` で 公開)
お問い合わせ
お問い合わせ
お問い合わせ

MQTTの特長 会員登録

メッセージを受信するには、トピックフィルタを購読します。 ザ・オブ・ザ・MQTTについてお問い合わせ クライアントへのメッセージのマッチング

window.subscribeToTopicV4 = 関数(トピック) {
mqttV4Client.subscribe(トピック、(err) => お問い合わせ
スタッフ
console.log(`MQTT v4 トピックにサブスクライブ: ${topic}`);
お問い合わせ
console.error(`MQTT v4 トピックは、${err}`) を購読します。
お問い合わせ
お問い合わせ
お問い合わせ

メッセージを受信するコールバック

mqttV4Client.on('message'、(トピック、メッセージ) => お問い合わせ
console.log(MQTT v4 ) で 送信されたメッセージ: ${topic} - ${message.toString()}`);
お問い合わせ

MQTTの切断

常に資源の漏出を避け、適切な保障するためにきれいに切断して下さい ブローカーのセッション処理:

window.disconnectClientV4 = 関数 ()
mqttV4Client.end(true, () => お問い合わせ
console.log('Disconnected MQTT v4 クライアント');
お問い合わせ
お問い合わせ


コールバックの切断

mqttV4Client.on('close', () => お問い合わせ
console.log('MQTT v4 ブローカーから削除します。');
お問い合わせ

サンプル MQTTv311 の顧客

HTML コードのサンプル

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="mqttV4ClientId"></span></p>
<p><strong>Status:</strong> <span="mqttV4Status"> 接続解除</span></p>
<button onclick="disconnectClientV4()">Disconnect MQTT v4</button>
<時間>
<h3>サブスクリプション</h3>
<input type="text" id="mqttV4SubscribeTopic" プレースホルダー="購読するトピック">
<button onclick="subscribeToTopicV4(document.getElementById('mqttV4SubscribeTopic').value)">サブスクライブ</button>
<p><strong>:</strong> <span="mqttV4Subscribed"></span></p>
<時間>
<h3>公開</h3>
<input type="text" id="mqttV4PublishTopic" プレースホルダー="公開するトピック">
<input type="text" id="mqttV4PublishMessage" プレースホルダー="公開するメッセージ">
<ボタン
onclick="publishMessageV4(document.getElementById('mqttV4PublishTopic').value, document.getElementById('mqttV4PublishMessage').value)">Publish</button>
<h3>公開メッセージ</h3>
<ul id="mqttV4Published"></ul>
<h3>受信メッセージ</h3>
<ul id="mqttV4Received"></ul>
</ボディ>
</html>


JavaScript コードのサンプル

document.addEventListener('DOMContentLoaded', (イベント) => お問い合わせ
この関数は
const クライアント Id = 'testclient1';
document.getElementById('mqttV4ClientId').textContent=クライアント
V4のオプション
クライアント Id: クライアント アイド,
hostname: 'broker-url',
ポート: 10443,
ハードウェア: 'ws'
// 'username', // ユーザ名
// 'password' をリクエストする
お問い合わせ
const mqttV4Client = mqtt.connect(`ws://${mqttV4Options.hostname}:${mqttV4Options.port}`、mqttV4Options);
mqttV4Client.on('connect', () => お問い合わせ
console.log('MQTT v4 ブローカー 。');
document.getElementById('mqttV4Status').textContent = 'Connected';
お問い合わせ
mqttV4Client.on('message'、(トピック、メッセージ) => お問い合わせ
console.log(MQTT v4 ) で 送信されたメッセージ: ${topic} - ${message.toString()}`);
document.getElementById('mqttV4Received').innerHTML += `
  • トピック: ${topic}、メッセージ: ${message.toString()}
    • お問い合わせ
お問い合わせ
mqttV4Client.on('close', () => お問い合わせ
console.log('MQTT v4 ブローカーから削除します。');
document.getElementById('mqttV4Status').textContent = 'Disconnected';
お問い合わせ
window.publishMessageV4 = 関数(トピック、メッセージ) お問い合わせ
mqttV4Client.publish(トピック、メッセージ、{qos: 1 }、(err) => お問い合わせ
スタッフ
console.log("MQTT v4 で公開されたメッセージ: ${topic} - ${message}`);
document.getElementById('mqttV4Published').innerHTML += `
  • ${topic} に公開: ${message}
    • お問い合わせ
お問い合わせ
console.error(`MQTT v4: ${err}` で 公開)
お問い合わせ
お問い合わせ
お問い合わせ
window.subscribeToTopicV4 = 関数(トピック) {
mqttV4Client.subscribe(トピック、(err) => お問い合わせ
スタッフ
console.log(`MQTT v4 トピックにサブスクライブ: ${topic}`);
document.getElementById('mqttV4Subscribed').textContent = トピック;
お問い合わせ
console.error(`MQTT v4 トピックは、${err}`) を購読します。
お問い合わせ
お問い合わせ
お問い合わせ
window.disconnectClientV4 = 関数 ()
mqttV4Client.end(true, () => お問い合わせ
console.log('Disconnected MQTT v4 クライアント');
document.getElementById('mqttV4Status').textContent = 'Disconnected';
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ

    MQTT v5 クライアント

    HTML コードのサンプル

    <MQTT 5 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-v5.js" type="text/javascript"></script>
    </ヘッド>
    <ボディ>
    <h1>MQTTの例</h1>
    <!-- MQTT v5 セクション -->
    <h2>MQTT v5</h2>
    <p><strong>クライアントID:</strong> <span="mqttV5ClientId"></span></p>
    <p><strong>Status:</strong> <span="mqttV5Status"> 接続解除</span></p>
    <button onclick="disconnectClientV5()">Disconnect MQTT v5</button>
    <時間>
    <h3>サブスクリプション</h3>
    <input type="text" id="mqttV5SubscribeTopic" プレースホルダー="購読するトピック">
    <button onclick="subscribeToTopicV5(document.getElementById('mqttV5SubscribeTopic').value)">サブスクライブ</button>
    <p><strong>:</strong> <span="mqttV5Subscribed"></span></p>
    <時間>
    <h3>公開</h3>
    <input type="text" id="mqttV5PublishTopic" プレースホルダー="公開するトピック">
    <input type="text" id="mqttV5PublishMessage" プレースホルダー="公開するメッセージ">
    <ボタン
    onclick="publishMessageV5(document.getElementById('mqttV5PublishTopic').value, document.getElementById('mqttV5PublishMessage').value)">Publish</button>
    <h3>公開メッセージ</h3>
    <ul id="mqttV5Published"></ul>
    <h3>受信メッセージ</h3>
    <ul id="mqttV5Received"></ul>
    </ボディ>
    </html>


    JavaScript コードのサンプル

    document.addEventListener('DOMContentLoaded', (イベント) => お問い合わせ
この関数は
const クライアント Id = 'testclient4';
document.getElementById('mqttV5ClientId').textContent=クライアント
V5のオプション
クライアント Id: クライアント アイド,
hostname: 'broker-url',
ポート: 10443,
ハードウェア: 'ws'
ハードウェア 5、 // MQTT v5 の動作
// // // // // // // // // // // // // // // // // // //
// ユーザ名
//: 'password',
お問い合わせ
const mqttV5Client = mqtt.connect(`ws://${mqttV5Options.hostname}:${mqttV5Options.port}`、mqttV5Options);
// コールバック
mqttV5Client.on('connect', () => お問い合わせ
console.log('MQTT v5 ブローカー 。');
document.getElementById('mqttV5Status').textContent = 'Connected';
お問い合わせ
mqttV5Client.on('message'、(トピック、メッセージ、) => お問い合わせ
console.log(MQTT v5 ) で 送信されたメッセージ: ${topic} - ${message.toString()}`);
document.getElementById('mqttV5Received').innerHTML += お問い合わせ
  • トピック: ${topic}、メッセージ: ${message.toString()}
    • お問い合わせ
お問い合わせ
mqttV5Client.on('close', () => お問い合わせ
console.log('MQTT v5 ブローカーから削除します。');
document.getElementById('mqttV5Status').textContent = 'Disconnected';
お問い合わせ
// 公開関数
window.publishMessageV5 = 関数(トピック、メッセージ) お問い合わせ
mqttV5Client.publish(トピック、メッセージ、{
qos: 1、
保存: false,
所在地:
Eメール ExpiryInterval: 60 // オプション: 60秒 期限切れ
お問い合わせ
お問い合わせ
スタッフ
console.log("MQTT v5 で公開されたメッセージ: ${topic} - ${message}`);
document.getElementById('mqttV5Published').innerHTML += お問い合わせ
  • ${topic} に公開: ${message}
    • お問い合わせ
お問い合わせ
console.error(`MQTT v5: ${err}` で 公開)
お問い合わせ
お問い合わせ
お問い合わせ
// // // // // // 関数
window.subscribeToTopicV5 = 関数(トピック) {
mqttV5Client.subscribe(トピック、{
qos: 0,
所在地:
ここ ここ ここ ここ
お問い合わせ
お問い合わせ
スタッフ
console.log(`MQTT v5 トピックにサブスクライブ: ${topic}`);
document.getElementById('mqttV5Subscribed').textContent = トピック;
お問い合わせ
console.error(`MQTT v5' のトピックは、${err}` を購読します。)
お問い合わせ
お問い合わせ
お問い合わせ
// 切断機能
window.disconnectClientV5 = 関数 ()
mqttV5Client.end(true, () => お問い合わせ
console.log('Disconnected MQTT v5 クライアント。');
document.getElementById('mqttV5Status').textContent = 'Disconnected';
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ
お問い合わせ

    MQTTをWebに!

    当社のブローカーであなたのJavaScriptアプリをブースト

    リアルタイムの更新、シームレスな通信、スケーラブルなIoTソリューションを実現
    JavaScript MQTT クライアントをブローカーに接続することで