HTML - WebSockets: 基礎ガイド
こんにちは、未来のウェブ開発者たち！今日は、WebSocketsのエキサイティングな世界に飛び込みます。前に聞いたことがない也不用担心——このチュートリアルが終わるまでに、あなたはWebSocketの魔术師になるでしょう！お気に入りの飲み物を手に取り、リラックスして、私たちの旅を始めましょう。
WebSocketsとは？
本題に入る前に、まずWebSocketsが何であるか、そしてなぜそれが如此に素晴らしいかを理解しましょう。友達と会話していると imagine します。普通の電話では、ダイヤルして、相手が受話器を取るのを待ち、話したいことを言い、そして切ります。もう一度話す場合も、同じプロセスを繰り返します。面倒くさいでしょう？
実は、これが従来のウェブコミュニケーションの方法なのです。ブラウザがリクエストを送信し、レスポンスを待ち、そして接続を閉じます。一方、WebSocketsは、開いた電話線のようで、あなたとあなたの友達がいつでも話すことができる、常にダイヤルや切ることを繰り返さないものです。素晴らしいですね？
シNTAX
それでは、HTMLで実際にWebSocketsを使う方法を見てみましょう。シンタックスは驚くほどシンプルです：
<script>
var socket = new WebSocket('ws://example.com/socket');
</script>ここでは、新しいWebSocketオブジェクトを作成し、'ws://example.com/socket'のサーバーに接続しています。'ws://'部分は'http://'と似ていますが、WebSockets専用です。安全なバージョン、'wss://'もあります。
WebSocketの属性
WebSocketsには、現在の接続状態について知らせる便利な属性があります。それらを表に見てみましょう：
| 属性 | 説明 |
|---|---|
| readyState | 接続の現在の状態 |
| bufferedAmount | send()メソッドを使用してキューイングされたデータのバイト数 |
| extensions | サーバーが選択したエクステンション |
| protocol | サーバーが選択したサブプロトコルの名前 |
readyState属性は特に便利です。4つの値を持つことができます：
- 0 (CONNECTING): 接続はまだ開いていません。
- 1 (OPEN): 接続は開いており、通信の準備ができています。
- 2 (CLOSING): 接続は閉じるプロセス中进行しています。
- 3 (CLOSED): 接続は閉じられています、または開けませんでした。
WebSocketイベント
WebSocketsはデータを送信するだけでなく、さまざまなイベントに応答することもできます。パーティーのストリーマーが特定のことが起こるたびにポップするのを設定するようなものです！以下は主要なイベントです：
- onopen: 接続が確立されたときに発火します。
- onmessage: サーバーからデータを受信したときに発火します。
- onerror: エラーが発生したときに発火します。
- onclose: 接続が閉じられたときに発火します。
それでは、コードでこれらを使ってみましょう：
<script>
var socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) {
console.log('接続確立！');
};
socket.onmessage = function(event) {
console.log('サーバーからのメッセージ:', event.data);
};
socket.onerror = function(error) {
console.log('WebSocket エラー:', error);
};
socket.onclose = function(event) {
console.log('接続閉じました。');
};
</script>この例では、各イベントを処理する関数を設定しています。接続が開いたときにメッセージをログします。メッセージを受信するときにログします。エラーが発生するときにもログします。そして接続が閉じるときにさよならを言います！
WebSocketメソッド
イベントをリスンする方法を知ったので、実際にWebSocketで何かをすることを見てみましょう。以下は主要なメソッドです：
| メソッド | 説明 |
|---|---|
| send() | サーバーにデータを送信します |
| close() | WebSocket接続を閉じます |
以下に、これらのメソッドを使う方法を示します：
<script>
var socket = new WebSocket('ws://example.com/socket');
// サーバーにメッセージを送信
socket.send('こんにちは、サーバー！');
// 接続を閉じる
socket.close();
</script>これほど簡単です！send()を使うと、サーバーに何かデータを送信できます。そして終了するときに、close()を使って接続を丁寧に閉じます。
PythonでWebSocketサーバーを設定する
ここではHTMLに焦点を当てていますが、会話の両方の側を理解することは重要です。それでは、Pythonを使ってシンプルなWebSocketサーバーを設定する方法を簡単に見てみましょう。Pythonに慣れていない方也不用担心——ここでの概念が重要です。
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
await websocket.send(f"Echo: {message}")
start_server = websockets.serve(echo, "localhost", 8765)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()このサーバーは、受信したメッセージを「Echo: 」と前置きして返信するだけです。ローカルホスト（あなたのコンピュータ）のポート8765で動作しています。
サーバー用のHTMLクライアントを作成する
サーバーを設定したので、それに接続するHTMLページを作成してみましょう：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket テスト</title>
</head>
<body>
<h1>WebSocket テスト</h1>
<input type="text" id="messageInput" placeholder="メッセージを入力">
<button onclick="sendMessage()">送信</button>
<div id="messages"></div>
<script>
var socket = new WebSocket('ws://localhost:8765');
socket.onopen = function(event) {
console.log('接続確立！');
};
socket.onmessage = function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};
function sendMessage() {
var input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
</body>
</html>このHTMLページは、シンプルなインターフェースを提供して、メッセージを入力し、サーバーに送信し、エコーされた応答を表示します。
そして、ここまででした！WebSocketの基本をカバーし、サーバーとクライアントの設定まで行いました。WebSocketは、リアルタイムで双方向の通信を行うのに最適です。チャットルームやライブスポーツアップデート、または即時データ交換が必要な状況に適しています。
ウェブ開発の旅を続ける中で、WebSocketが新しい可能性を開くことを発見するでしょう。練習を続け、実験をし、そして最も重要なのは、楽しみましょう！ハッピーコーディング！
Credits: Image by storyset