概要
WebSocketとは、HTTPベースでクライアント、サーバー相互通信を実現する技術です
前回実施したC#でWebSocketでサーバーからクライアントへの通知をするサンプルに対し
クライアント側はWebブラウザで実施されることがほとんどと思われるため
JavaScriptでクライアント側を作成し、前回作成したC#のサーバー間で通信させてみました。
クライアント側の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ブラウザに表示されます。
以上