如何在 JavaScript 中對傳訊應用程式進行程式設計

JavaScript 的 MQTT 傳訊用戶端 包含一個指導教學，示範如何建立簡式發佈及訂閱 Web 應用程式。 透過探索 "First steps, Hello world" 應用程式碼，您可以基本瞭解對用於傳訊的 Web 應用程式進行程式設計的機制。

如果您到目前為止的經驗主要是開發和部署傳統傳訊應用程式，您也可能會發現 JavaScript 編碼提示 區段很有用。 如果您是熟悉傳訊的 JavaScript 開發人員，您會在 傳訊基本觀念 區段中找到主要傳訊概念的簡介。

JavaScript 的傳訊用戶端指導教學頁面，顯示如何撰寫訂閱主題 "World" 的應用程式，並將訊息 "Hello" 發佈至該應用程式。

JavaScript 編碼提示

如果您習慣開發傳訊應用程式，而對 Web 應用程式不熟悉，可能會發現下列有用提示：
對 onSuccess 回呼中的每個事件覆蓋程式碼
當您撰寫傳訊應用程式時，您可以按下列順序撰寫下列事件的程式碼：
  1. 連接
  2. 訂閱
  3. 發佈
  4. 接收訊息
JavaScript 的 MQTT 傳訊用戶端 API 完全非同步，這表示您的應用程式執行緒在等待諸如連接或訂閱之類的呼叫生效時不會封鎖。 相反，這些呼叫會透過呼叫 onSuccess 或 onFailure 回呼用信號來告知完成。 為了確保每個事件在觸發下一個事件之前已完成，您需要對 onSuccess 回呼中的每個事件覆蓋程式碼。 例如，在建立連線之前， JavaScript 應用程式可能會從進行連接呼叫返回。 為了確保在您訂閱之前已發生連線，您需要在 onSuccess 回呼中放入用於連接的訂閱程式碼。
"First steps, Hello world" 應用程式碼使用此方法。
在 HTML 標記中內嵌應用程式碼
以下是 JavaScript 頁面範例:
適用於 JavaScript 的 MQTT 傳訊用戶端範例 Web 傳訊網頁。
以下是前一頁的原始檔，以顯示如何在 HTML 標記中內嵌應用程式碼：
<!DOCTYPE html>


<head>
  <script type="text/javascript" src="../WebSocket/mqttws31.js"></script>
  
  <script type="text/javascript">
  
  var client;
  var form = document.getElementById("tutorial");
  
  function doConnect() {
      client = new Messaging.Client("whistler1.hursley.ibm.com", 1883, "ClientId");
      client.onConnect = onConnect;
      client.onMessageArrived = onMessageArrived;
      client.onConnectionLost = onConnectionLost;
      client.connect({onSuccess:onConnect});
  }
  
  function doSubscribe() {
      client.subscribe("/World");
  }
  
  function doSend() {
      message = new Messaging.Message("Hello");
      message.destinationName = "/World";
      client.send(message);
  }

  function doDisconnect() {
      client.disconnect();
  }
  
  // Web Messaging API callbacks
  
  function onConnect() {
      var form = document.getElementById("example");
      form.connected.checked= true;
  }
  
  function onConnectionLost(responseObject) {
      var form = document.getElementById("example");
      form.connected.checked= false;
      if (responseObject.errorCode !== 0)
          alert(client.clientId+"\n"+responseObject.errorCode);
  }
  
  function onMessageArrived(message) {
      var form = document.getElementById("example");
      form.receiveMsg.value = message.payloadString;
  }
  
  </script>
</head> 

<body>
  <h1>Example Web Messaging web page.</h1>
  <form id="example">
  <fieldset>
  <legend id="Connect" > Connect </legend>
    Make a connection to the server, and set up a call back used if a 
    message arrives for this client.
    <br>
    <input type="button" value="Connect" onClick="doConnect(this.form)" name="Connect"/>
    <input type="checkbox" name="connected" disabled="disabled"/>
  </fieldset>
  
  <fieldset>
  <legend id="Subscribe" > Subscribe </legend>
  Make a subscription to topic "/World".
  <br> <input type="button" value="Subscribe" onClick="doSubscribe(this.form)"/>
  </fieldset>
  
  <fieldset>
  <legend id="Send" > Send </legend>
    Create a Message object containing the word "Hello" and then publish it at
    the server.
    <br>
    <input type="button" value="Send" onClick="doSend(this.form)"/>
  </fieldset>
  
  <fieldset>
  <legend id="Receive" > Receive </legend>
    A copy of the published Message is received in the callback we created earlier.
  <textarea name="receiveMsg" rows="1" cols="40" disabled="disabled"></textarea>
  </fieldset>
  
  <fieldset>
  <legend id="Disconnect" > Disconnect </legend>
    Now disconnect this client from the server.
  <br> <input type="button" value="Disconnect" onClick="doDisconnect()"/>
  </fieldset>
  </form>
</body>
</html>

傳訊基礎

以下是為不熟悉傳訊的 Web 應用程式開發者提供的部分背景傳訊資訊：

非同步及「隨發即忘」傳訊
MQTT 通訊協定支援確保遞送及隨發即忘傳送。 在通訊協定中，訊息遞送為非同步：應用程式會將訊息傳遞給用戶端 API，並且不會採取任何進一步動作來確保訊息遞送。 此方法稱為隨發即忘。 當回應可用時，它會自動傳送至應用程式。
非同步遞送會從任何伺服器連線及從等待訊息釋放應用程式。 互動模型如同電子郵件，但已針對應用程式程式設計進行最佳化。
另請參閱 MQTT 簡介 中的 MQTT 通訊協定 一節
發佈和訂閱傳訊概觀
資訊的提供者稱為發佈者。 發佈者提供主題的相關資訊，無需瞭解有關對此資訊感興趣的應用程式之任何資訊。 發佈者會選擇一個主題，這是有關特定主題的訊息儲存器。 然後，發佈者會為此主題產生每則資訊作為訊息，稱為發佈，並將其張貼至關聯主題。
資訊的消費者稱為訂閱者。 訂閱者會建立對所感興趣主題的訂閱。 當新訊息張貼到某個主題時，會將訊息轉遞給此主題的所有訂閱者。 訂閱者可以執行多個訂閱，並且可以從許多不同的發佈者接收資訊。
另請參閱 IBM® WebSphere® MQ 發佈/訂閱傳訊簡介
訂閱如何與主題相符。
如果您使用 IBM WebSphere MQ 作為 MQTT 伺服器，則需要瞭解 IBM WebSphere MQ 如何指定主題。 在 IBM WebSphere MQ中，發佈者會建立訊息，並使用最適合發佈主題的主題字串來發佈該訊息。 為了接收發佈資訊，訂閱者會建立訂閱，此訂閱具有用來選取發佈主題的型樣相符主題字串。 佇列管理程式會將發佈資訊，遞送至其訂閱與發佈主題相符且獲授權來接收發佈資訊的訂閱者。
通常，主旨會按照階層架構的方式組織成主題樹狀結構，並使用 '/' 字元在主題字串中建立子主題。 主題是主題樹狀結構中的節點。 主題可以是沒有任何子主題的葉節點，或者是具有子主題的中間節點。 訂閱者可以使用萬用字元一次訂閱多個主題。 例如，訂閱 /sport/tennis 僅會取得張貼到網球子主題的訊息，而訂閱 /sport/# 則可取得張貼到 /sport 之任何子主題的訊息。
另請參閱 主題、 主題樹狀結構及 萬用字元架構。