1. 導入：なぜWebSocketの「切断」が重要なのか
リアルタイム通信を行うWebSocketにおいて、接続を開始するのは簡単ですが、終了処理を適切に行うことは非常に重要です。通信が終わったのに接続を放置しておくと、サーバー側のリソースを無駄に消費してしまい、パフォーマンスの低下や予期せぬエラーの原因になります。この記事では、WebSocketの接続を安全かつ確実に切断するためのAPI「WebSocket.prototype.close」について解説します。
2. 基礎知識：WebSocketの終了処理とは
WebSocketは、ブラウザとサーバーの間で「一度接続したら開きっぱなし」にする仕組みです。そのため、タブを閉じたりページを遷移したりするだけでは、サーバー側が「まだ接続中」だと判断してしまうことがあります。
WebSocket.prototype.closeメソッドは、サーバーに対して「通信を終了したい」という合図を送るための関数です。このメソッドを呼ぶことで、サーバーとブラウザ間で「ハンドシェイク（握手）」を交わして、礼儀正しく接続を閉じる（クローズフレームを送る）ことができます。
3. 実装・解決策：closeメソッドの引数
closeメソッドは、引数を指定することで「なぜ切断するのか」という情報をサーバーに伝えることができます。
・第一引数（コード）：終了ステータスコード（正常終了なら1000など）
・第二引数（理由）：切断の理由を示す短い文字列
一般的に、正常に通信を終える場合は1000を指定します。
4. サンプルプログラム
以下は、WebSocket接続を確立し、ボタンを押すと安全に切断するシンプルな例です。
// WebSocketの接続を開始
const socket = new WebSocket('ws://example.com/socket');
// 接続が確立した時の処理
socket.onopen = () => {
console.log('接続が完了しました');
};
// 接続が切断された時の処理
socket.onclose = (event) => {
console.log(`接続が閉じられました。コード: ${event.code}, 理由: ${event.reason}`);
};
// 接続を安全に終了させる関数
function closeConnection() {
// 1000は「正常終了」を意味する標準的なコードです
// 第二引数に理由を文字列で渡すことができます
socket.close(1000, 'ユーザーが操作を終了しました');
}
// 実行例：何らかのイベント（ボタンクリックなど）で呼び出す
// closeConnection();
5. 応用・注意点：現場で役立つポイント
現場でよくある失敗として「closeメソッドを呼んだ直後に、まだ通信しようとする」ケースがあります。
注意点1：状態を確認する
socket.close()を呼び出した後、接続状態は「CLOSING（閉じている途中）」になります。完全に閉じた状態は「CLOSED」です。readyStateプロパティで現在の状態を確認し、接続が完全に閉じてから次の処理に移るように設計しましょう。
注意点2：エラーハンドリング
サーバー側で予期せぬ切断が起きた場合、onerrorイベントが発生します。closeメソッドを呼ぶだけでなく、oncloseとonerrorの両方を監視して、ユーザーに適切なフィードバックを返すようにしてください。
正しく切断処理を行うことで、より堅牢でサーバーに優しいWebアプリケーションを作ることができます。ぜひ活用してみてください。