MessageWebSocket を使って接続する方法 (HTML)

[アーティクル]
11/10/2015

[この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

このトピックでは、Windows ランタイムアプリで MessageWebSocket を使ってデータのメッセージ全体を送受信する方法を説明します。

MessageWebSocket クラスは、WebSocket プロトコルのメッセージベースのアブストラクションを生成します。MessageWebSocket を使うと、WebSocket メッセージ全体の読み取りや書き込みが 1 回の操作で行われます。一方、StreamWebSocket を使うと、メッセージ全体を 1 回の操作で読み取らなくても、読み取り操作ごとにメッセージのセクションを読み取ることができます。

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;
}

要約と次のステップ

このチュートリアルでは、MessageWebSocket を使って、WebSocket サーバーに接続する方法と、データを送受信する方法について説明しました。

WebSocket を使ってデータを送受信する方法を紹介した詳しいデモについては、WebSocket のサンプルをご覧ください。