接続のライフサイクルとエラー
open、close、error イベントを処理します。
「接続のライフサイクルとエラー」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
完全なライフサイクル
ソケットはCONNECTING → OPEN → CLOSING → CLOSEDの状態を順にたどります。これらの遷移には、open、message、error、closeの4つのイベントが対応します。
oncloseイベント
接続が正常に終了した場合も、異常終了した場合も、終了時にoncloseが発生します。イベントにはcode、reason、wasCleanが含まれます。
socket.onclose = (event) => {
console.log("Closed", event.code, event.reason, event.wasClean);
};クローズコード
標準コードには、1000（正常終了）、1001（離脱）、1006（クローズフレームのない異常終了）、1011（サーバーエラー）があります。4000～4999のコードはアプリケーションで定義できます。
socket.onclose = (e) => {
if (e.code === 1000) console.log("normal close");
else console.log("unexpected", e.code);
};意図的に接続を閉じる
socket.close(code, reason)で正常なシャットダウンを開始します。通常の終了には1000を使います。理由の文字列は123バイト未満でなければなりません。
socket.close(1000, "user logged out");onerrorイベント
障害が発生するとonerrorが発生します。セキュリティ上の理由から、エラーイベントの情報は意図的に最小限で、詳しい理由は含まれません。ほぼ必ず、その後にcloseイベントが発生します。
socket.onerror = (event) => {
console.log("Socket error — a close will follow");
};正常終了と異常終了を見分ける
event.wasCleanがtrueになるのは、双方がクローズフレームを交換した場合だけです。ネットワークが切断されると、wasClean: falseとコード1006になります。
socket.onclose = (e) => {
if (!e.wasClean) console.log("Connection dropped unexpectedly");
};リソースを後片付けする
接続が閉じたら、タイマー（ハートビート）を解除し、保留中のリクエストを拒否し、アプリが切断を反映するようにUIの状態を更新します。
socket.onclose = () => {
clearInterval(heartbeatTimer);
pending.forEach((reject) => reject(new Error("disconnected")));
pending.clear();
};リスナーを削除する
addEventListenerでハンドラーを登録した場合は、特にソケットを作り直すときに、メモリリークを避けるため接続終了時に削除します。
function cleanup() {
socket.removeEventListener("message", onMessage);
socket.removeEventListener("close", onClose);
}シャットダウン中のreadyState
close()を呼び出してからoncloseイベントが発生するまでの間、readyStateはCLOSING (2)です。この間の送信は無視されます。
socket.close();
console.log(socket.readyState); // 2 (CLOSING)サーバーによるアイドルタイムアウト
サーバーやプロキシは、30～60秒後にアイドル状態の接続を閉じることがよくあります。ハートビートによって接続をアクティブに保ち、切断をすぐに検出できます。
切断された接続を検出する
ハートビートとウォッチドッグを組み合わせます。一定時間内にpongが届かなければソケットが切断されたと判断し、再接続を開始するために閉じます。
let pongTimer;
function ping() {
socket.send(JSON.stringify({ type: "ping" }));
pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};クイックチェック
ライフサイクルの処理を確認しましょう。
まとめ：ライフサイクルとエラー
code、reason、wasCleanを含むoncloseを処理し、標準のクローズコードを学び、意図的に接続を閉じ、情報が少ないonerrorに対処し、タイマーとリスナーを後片付けし、ハートビート用のウォッチドッグを構築しました。次は再接続の戦略です。
よくある質問
「接続のライフサイクルとエラー」レッスンは無料ですか？
はい。「接続のライフサイクルとエラー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「接続のライフサイクルとエラー」で何を学びますか？
open、close、error イベントを処理します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「接続のライフサイクルとエラー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- WebSocket 接続を開く
- メッセージを送受信する
- 接続のライフサイクルとエラー
- 再接続戦略