次の方法で共有


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

[この記事は、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 のサンプルをご覧ください。

関連トピック

その他

promise を使った JavaScript での非同期プログラミングに関する記事

WebSocket を使った接続

JavaScript を使った初めての Windows ランタイム アプリの作成

StreamWebSocket を使って接続する方法

ネットワーク アプリで例外を処理する方法

ネットワーク機能を設定する方法

リファレンス

MessageWebSocket

Windows.Networking.Sockets

サンプル

WebSocket のサンプル