如何使用 MessageWebSocket 進行連線 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

本主題說明如何在 Windows 執行階段應用程式使用 MessageWebSocket 傳送和接收所有訊息的資料。

MessageWebSocket 類別提供一個 WebSocket 通訊協定的訊息抽象概念。使用 MessageWebSocket 時，是以單一操作讀取或寫入整個 WebSocket 訊息。而使用 StreamWebSocket，可讓每個讀取操作分別讀取訊息的各個區段，不需要以單一操作讀取整個訊息。

MessageWebSocket 通常用於訊息不是非常大的案例中。同時支援 UTF-8 與二進位檔案。UTF-8 訊息必須使用 MessageWebSocket。因為 StreamWebSocket 只支援二進位訊息。

先決條件

下列範例使用 JavaScript，並且使用 WebSocket 範例做為依據。如需使用 JavaScript 建立 Windows 執行階段應用程式的一般協助，請參閱使用 JavaScript 建立您的第一個 Windows 執行階段應用程式。另外，這個主題中使用 JavaScript Promise 來完成非同步操作。如需這種程式設計模式的詳細資訊，請參閱使用 Promise 在 JavaScript 的非同步程式設計。

若要確保 Windows 執行階段應用程式的網路可正常運作，您必須在專案 Package.appxmanifest 檔案中設定所需的任何網路功能。如果應用程式需要以用戶端的形式連線到網際網路上的遠端服務，則需要 [網際網路 (用戶端)] 功能。如果應用程式需要以用戶端的形式連線到家用網路或工作場所網路的遠端服務，則需要 [家中\公司網路]**** 功能。

注意在 Windows Phone，只有一個網路功能 ([網際網路 (用戶端與伺服器)]) 能啟用應用程式的所有網路存取功能。

如需詳細資訊，請參閱如何設定網路功能。

使用 MessageWebSocket 傳送資料

本節中的程式碼會建立新的 MessageWebSocket、連線到 WebSocket 伺服器並傳送資料到伺服器。建立成功的連線後，應用程式會等候叫用 MessageWebSocket.MessageReceived 事件，指出已收到資料。

注意您可能想要對使用者顯示訊息，或記錄已發生的特定事件 (例如，已連線或發生錯誤時)。

開啟 js 資料夾。開啟 .js 檔案，然後新增下列程式碼。

function startSend() {
   if (!messageWebSocket) {
      var webSocket = new Windows.Networking.Sockets.MessageWebSocket();
      // MessageWebSocket supports both utf8 and binary messages.
      // When utf8 is specified as the messageType, then the developer
      // promises to only send utf8-encoded data.
      webSocket.control.messageType = Windows.Networking.Sockets.SocketMessageType.utf8;
      // Set up callbacks
      webSocket.onmessagereceived = onMessageReceived;
      webSocket.onclosed = onClosed;

      var serverAddress = new Windows.Foundation.Uri(document.getElementById("serverAddress").value);

      try {
         webSocket.connectAsync(serverAddress).done(function () {
         messageWebSocket = webSocket;
         // The default DataWriter encoding is utf8.
         messageWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
         messageWriter.writeString(document.getElementById("inputField").value);
         messageWriter.storeAsync().done("", sendError);

      }, function (error) {
         // The connection failed; add your own code to log or display 
         // the error, or take a specific action.
         });
      } catch (error) {
         // An error occurred while trying to connect; add your own code to  
         // log or display the error, or take a specific action.
      }

   }
   else {
      // The connection already exists; go ahead and send the message.
      messageWriter.writeString(document.getElementById("inputField").value);
      messageWriter.storeAsync().done("", sendError);          
   }
}

登錄 MessageWebSocket.MessageReceived 事件的回呼

發生 MessageWebSocket.MessageReceived 事件時，會呼叫登錄回呼並從 MessageWebSocketMessageReceivedEventArgs 接收資料。

將下列程式碼新增至 .js 檔案。

function onMessageReceived(args) {
   // The incoming message is already buffered.
   var dataReader = args.getDataReader();
   // Use the dataReader to read data from the received message
}

登錄 MessageWebSocket.Closed 事件的回呼

發生 MessageWebSocket.Closed 事件時，會呼叫登錄回呼並從 WebSocketClosedEventArgs 接收資料以關閉連線。

將下列程式碼新增至 .js 檔案。

function onClosed(args) {
   // You can add code to log or display the code and reason
   // for the closure (stored in args.code and args.reason)
   if (messageWebSocket) {
      messageWebSocket.close();
   }
   messageWebSocket = null;
}

摘要與後續步驟

在這個教學課程中，我們檢閱如何連線到 WebSocket 伺服器，以及如何使用 MessageWebSocket 傳送和接收資料。

如需示範如何使用 WebSocket 傳送和接收資料的完整範例，請參閱 WebSocket 範例。

共用方式為