ブラウザで学ぶWebSocketの基礎
WebSocket接続を開き、メッセージを送信し、ネイティブWebSocket APIでイベントを処理します。
「ブラウザで学ぶWebSocketの基礎」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
WebSocket とは
WebSocket は、1 つの TCP 接続上で全二重通信を提供するプロトコルです。HTTP とは異なり接続が開いたままになるため、サーバーはいつでもクライアントにデータをプッシュできます。
接続を開く
ws:// または wss:// の URL を指定して WebSocket オブジェクトを作成します。接続は非同期に開かれます。
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};メッセージの送信
ws.send() を使用してデータを送信します。文字列またはバイナリデータ（ArrayBuffer、Blob）を送信できます。オブジェクトは送信前に JSON にエンコードします。
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};メッセージの受信
サーバーがデータを送信するたびに onmessage イベントが発生します。データは event.data に文字列またはバイナリ型として格納されます。
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};エラー処理と切断
onerror イベントと onclose イベントを処理します。close イベントには、接続が終了した理由を示すコードと理由が含まれます。
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};クローズコード
WebSocket の標準クローズコードは、1000 = 正常終了、1001 = 相手側の終了、1006 = 異常終了（クローズフレームなし）、1008 = ポリシー違反です。
readyState
ws.readyState は現在の接続状態を示します。CONNECTING（0）、OPEN（1）、CLOSING（2）、CLOSED（3）のいずれかです。送信前には必ず確認してください。
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}接続を閉じる
ws.close(code, reason) を呼び出して正常な切断を開始します。サーバーはクローズフレームを受信し、独自のフレームで応答できます。
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();バイナリデータ
ws.binaryType = 'arraybuffer'（または 'blob'）を設定すると、バイナリメッセージを受信できます。音声、画像、カスタムプロトコルなどに便利です。
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};ハートビート / Ping-Pong
ブラウザーの WebSocket API は ping フレームを公開していませんが、アプリケーションレベルのハートビートを実装できます。N 秒ごとに ping メッセージを送信し、pong 応答を待ちます。
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket と Server-Sent Events の比較
双方向通信（チャット、ゲーム）には WebSocket を使用します。サーバーからクライアントへの一方向ストリーム（通知、ライブフィード）には Server-Sent Events（SSE）を使用します。SSE は通常の HTTP 上で動作し、自動的に再接続します。
クイックチェック
接続が開いていて送信可能であることを示す WebSocket の readyState の値はどれですか？
まとめ
new WebSocket(url) で接続を作成し、ws.send() で JSON 文字列化したオブジェクトを送信します。onmessage、onerror、onclose イベントを処理してください。送信前に readyState を確認し、ws.close(1000) で正常に接続を閉じます。
よくある質問
「ブラウザで学ぶWebSocketの基礎」レッスンは無料ですか？
はい。「ブラウザで学ぶWebSocketの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「ブラウザで学ぶWebSocketの基礎」で何を学びますか？
WebSocket接続を開き、メッセージを送信し、ネイティブWebSocket APIでイベントを処理します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ブラウザで学ぶWebSocketの基礎」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ブラウザで学ぶWebSocketの基礎
- ReactでSocket.IOを使う
- リアルタイムチャットコンポーネントの構築
- 再接続、エラー処理、クリーンアップ