WebSocket通信の仕組み
WebSocket通信は、HTTPプロトコルを基盤とした双方向通信プロトコルです。サーバーとクライアント間で継続的な通信を可能にし、低遅延のデータ送受信を実現します。
通信の流れ
WebSocket通信では、最初にHTTPリクエストを介して接続を確立します。その後、接続が確立すると双方向通信が可能です。
実装例
1. クライアント側の実装
以下はWebSocket通信を実装したブラウザ側のJavaScriptコードです。
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket通信のクライアント例</title>
<script>
function initializeWebSocket() {
const messageArea = document.getElementById('messageArea');
const form = document.getElementById('messageForm');
const input = document.getElementById('messageInput');
// WebSocketの接続を試行
const webSocket = new WebSocket('ws://localhost:7181/');
// 接続成功時
webSocket.onopen = () => {
messageArea.textContent += 'サーバーに接続しました。\n';
};
// メッセージ受信時
webSocket.onmessage = (event) => {
messageArea.textContent += `サーバーから受信: ${event.data}\n`;
};
// 接続끊김時
webSocket.onclose = () => {
messageArea.textContent += '接続が切断されました。\n';
};
// メッセージ送信処理
form.addEventListener('submit', (e) => {
e.preventDefault();
const message = input.value;
if (message) {
webSocket.send(message);
input.value = '';
}
});
}
// ページ読み込み完了時にWebSocketを初期化
window.onload = initializeWebSocket;
</script>
</head>
<body>
<div>
<textarea id="messageArea" rows="10" cols="50" readonly></textarea>
<form id="messageForm">
<input id="messageInput" type="text" placeholder="送信するメッセージを入力">
<button type="submit">送信</button>
</form>
</div>
</body>
</html>
2. サーバー側の実装
以下はWebSocketサーバーを実装したC#のコンソールアプリケーションです。
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Fleck;
namespace WebSocketSample
{
class Program
{
static async Task Main(string[] args)
{
var log = new FleckLog();
log.Level = LogLevel.Debug;
var server = new WebSocketServer("ws://0.0.0.0:7181");
var clients = new List<IWebSocketConnection>();
server.Start(socket =>
{
socket.OnOpen = () =>
{
Console.WriteLine("クライアント接続: Open");
clients.Add(socket);
};
socket.OnClose = () =>
{
Console.WriteLine("クライアント切断: Close");
clients.Remove(socket);
};
socket.OnMessage = message =>
{
Console.WriteLine($"受信したメッセージ: {message}");
foreach (var client in clients.ToList())
{
client.Send($"Echo: {message}");
}
};
});
while (true)
{
var command = Console.ReadLine();
if (command == "exit") break;
foreach (var client in clients.ToList())
{
client.Send(command);
}
}
}
}
}
このサーバーは以下のような機能を有します:
- クライアントの接続/切断を監視
- 受信したメッセージを画面に出力
- 受信したメッセージを"Echo:"と前置して全クライアントに送信
- 手動入力したコマンドを全クライアントに送信
サーバーとクライアントの通信プロセスは以下のようになります:
- クライアントから接続リクエストが送信される
- サーバーが接続を承認し通信チャネルを確立
- 双方向通信が可能になる
- 通信終了時サーバーとクライアント間の接続が切断