概要

WebSocketとは、HTTPベースでクライアント、サーバー相互通信を実現する技術です

前回実施したC#でWebSocketでサーバーからクライアントへの通知をするサンプルに対し
クライアント側はWebブラウザで実施されることがほとんどと思われるため
JavaScriptでクライアント側を作成し、前回作成したC#のサーバー間で通信させてみました。

前回記事
C#でWebSocketのサンプルを動かしてみた

クライアント側のJavaScriptでは大まかに以下の手順で通信を実施します

１．WebSocketの接続を確立する
サーバー側のURLを引数に渡し、接続を確立する

var connection = new WebSocket(サーバーURL);

２．サーバー側からの通知を受信する
リスナを定義し、サーバーからの通知を受け取る

connection.onmessage = function(event) {
    //event.data でサーバーからの通知を受信 
};

webSocket通信を試してみた

上記の説明どうり、JavaScriptでWebSocketの接続を確立後、サーバーからの通知を受信するリスナを定義し、サーバからの通知をを画面に表示するようにしました。
サーバーは前回のC#サンプルをそのまま使用しています。

クライアント側の実装（JavaScript）

webSocketTest.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>WebSocketサンプル</p>
    <input id="eventType">
    <input id="dispMsg">
  </body>
</html>

<script type="text/javascript">

    //WebSocket接続
    var connection = new WebSocket("ws://localhost:8000/ws/");

    //接続通知
    connection.onopen = function(event) {
        document.getElementById( "eventType" ).value = "通信接続イベント受信";
        document.getElementById( "dispMsg" ).value = event.data;
    };

    //エラー発生
    connection.onerror = function(error) {
        document.getElementById( "eventType" ).value = "エラー発生イベント受信";
        document.getElementById( "dispMsg" ).value = error.data;
    };

    //メッセージ受信
    connection.onmessage = function(event) {
        document.getElementById( "eventType" ).value = "メッセージ受信";
        document.getElementById( "dispMsg" ).value = event.data;
    };

    //切断
    connection.onclose = function() {
        document.getElementById( "eventType" ).value = "通信切断イベント受信";
        document.getElementById( "dispMsg" ).value = "";
    };
</script>

サーバ側の実装（C#）

前回の記事と同様の処理です、参考までに掲載しています

serverTest.cs


static async Task Run()
{
    //Httpリスナーを立ち上げ、クライアントからの接続を待つ
    HttpListener s = new HttpListener();
    s.Prefixes.Add("http://localhost:8000/ws/");
    s.Start();
    var hc = await s.GetContextAsync();

    //クライアントからのリクエストがWebSocketでない場合は処理を中断
    if (!hc.Request.IsWebSocketRequest)
    {
        //クライアント側にエラー(400)を返却し接続を閉じる
        hc.Response.StatusCode = 400;
        hc.Response.Close();
        return;
    }

    //WebSocketでレスポンスを返却
    var wsc = await hc.AcceptWebSocketAsync(null);
    var ws = wsc.WebSocket;

    //１０回のレスポンスを返却
    for (int i = 0; i != 10; ++i)
    {
        //1回のレスポンスごとに2秒のウエイトを設定
        await Task.Delay(2000);

        //レスポンスのテストメッセージとして、現在時刻の文字列を取得
        var time = DateTime.Now.ToLongTimeString();

        //文字列をByte型に変換
        var buffer = Encoding.UTF8.GetBytes(time);
        var segment = new ArraySegment<byte>(buffer);

        //クライアント側に文字列を送信
        await ws.SendAsync(segment, WebSocketMessageType.Text,
          true, CancellationToken.None);
    }

    //接続を閉じる
    await ws.CloseAsync(WebSocketCloseStatus.NormalClosure,
      "Done", CancellationToken.None);
}

実行してみる

上記ができたら、サーバを事前に動かしておき、Webブラウザで上記クライアント側となるJavaScript付きのHTMLを実行すると、サーバへ要求がなされます。
成功すると、以下のようにサーバ側の現在時刻が2秒間隔でWebブラウザに表示されます。

以上

JavaScriptでWebSocket通信をしてみた

概要

webSocket通信を試してみた

クライアント側の実装（JavaScript）

サーバ側の実装（C#）

実行してみる