【Node.js & express】ブラウザを閉じた時の処理

node.jsとかの勉強として、簡単なチャットアプリを作っています。
服数人でのチャットを想定しています。

【質問】
チャットをしている途中に
hogeさんが「ブラウザを閉じた」場合に、チャットから切断したという処理をしたいです。
ブラウザを閉じた or タブを閉じた時に呼び出される関数みたいなものがあるのでしょうか。

また、上記のような場合には、時間制限で情報をブラウザに保存しておいて、
再度ログインした際には直ぐに部屋に入れるようにしたほうがいいのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

チャットから切断した

ここがかなり悩ましいですね。
色々考えましたが微妙でした(結論は最下部を見てね)
JSがWebサーバと繋がる方法は下記の2つしかありません。

Webソケットで接続する
都度Ajax通信を投げる

Webソケットの場合は瞬殺で解決します。
ページを閉じたらWebソケットの接続が切れるので、
Node.js側がそれを検知して「Aさんが退室しました」というメッセージを他の接続者に投げるだけです。
(逆にスマホで接続していて、電車がトンネル入った、スマホをスリープにした、電話を受けてネットが一時的に停止した等の条件でヒステリックな退室通知がやってくる可能性がある)

問題はAjaxで実装した場合のケースです。
AjaxというのはJSが用意されている「XMLHttpRequest」や「Fetch API」を利用して、
HTTPリクエストを発射してHTTPレスポンスを貰って完結する1回キリの通信です。

ページを閉じるという行為はJSの実行等もまるっと捨てて逃げるということです。
非同期通信を行う場合動くか怪しいんですよね。
その辺考えていきましょう。

JSはイベント駆動です。
イベント置き場と呼ぶべきフィールドが存在しており、
JSはイベント登録として、「達成条件」と「動いて欲しい処理を関数にしたもの」をセットで登録します。

Chrome等のWebブラウザは、
例えばマウスカーソルをしゅっと動かしただけでも大量のイベント達成をJSに通知しています。
その達成を監視してイベント登録された「達成条件」に合致していた場合、
対になっている関数を取り出して実行という流れになります。

イベントリファレンス - MDN

これを見るだけでおおよそ思いつくような事をほぼ全て実現出来る事がわかります。

さて、この中から探して行きましょう。
Webアプリ関係のWebサイトの場合、
ページを読み込み完了ともに動いて欲しい処理・機能が沢山あるでしょうから。
対になる「ページを閉じる直前に動いて欲しいイベント」もその近くにありそうですね。

ロード・アンロードイベント - MDN

この2つが該当するようです。
(他にもぐぐって調べてみた)

beforeunload
unload

使い方はこれらのイベントの詳細画面に書いてあります。
抜粋するとこんな感じ

js
1window.addEventListener('beforeunload', function(event) {
2  console.log('I am the 1st one.');
3});
4
5window.addEventListener('unload', function(event) {
6  console.log('I am the 3rd one.');
7});

アンロードイベント系の弱点について見ていきましょう。

前の章でJSはイベント駆動だよって話をしました。
AjaxでHTTPリクエストを送信して、HTTPレスポンスを待つというのもイベント登録なのです。
JSでイベント登録を挟んだ場合、「ほーん、イベント登録受理したわ、後で巡回しとくわ」と
まず今動いている処理・関数の実行完了を最優先として動きます。

その後、イベントループという巡回作業が始まり、
達成したイベントを探索して、合致していれば関数を実行という流れになっています。

js
1// 下記のように0秒待つ処理(その場で達成している)を挿し込んだ場合でも
2// イベントループまで処理の実行が遅延されるので
3// 表示順序は必ず「1→3→2」になる
4console.log(1);
5setTimeout(() => {
6  console.log(2);
7}, 0);
8console.log(3);

つまり、非同期のAjax通信を飛ばしても完了のイベントを拾う前に、
関数の実行が終わってしまい、ページを閉じてしまう挙動になると思います。
そのHTTP通信は行われたのか？を担保することが怪しくなってしまいます。

私の実務上の体験では
HTTPリクエストを発射して、先方のWebサーバに届ける所まではやっていたと思いますので
まぁ90%くらいのケースで動くやろとは思いますが、
100%動作しないんだが？と言われた場合の保証・修正がかなり困難です。

回避策を30秒で考えました。

Node.js側に細工をして生存確認用Ajaxを発射してコネクションを張りっぱなしにしておく
XMLHttpRequestの同期Ajaxを投げる
beforeunloadを却下してページ離脱を阻止
普通の非同期Ajaxを送信して退室メッセージが出る事を祈る(9割方は動くでしょ？)

1個目の手段はGoogleがよくやっている手です。
Webソケットが無い時代・Webソケット登場後も非対応ブラウザは多かったので、
Webサーバ側から通知を行いたい場合に備えてAjax通信をさせておき、
通信完了を行わずコネクション張りっぱなしで待つというテクニックを利用しています。

ブラウザがページを閉じて逃げたらコネクションは切れるので、
それをトリガーに他の皆に通知すれば良いですね。
これの応用で他人の発言を感知してメッセージを返して最速リロードみたいな機能も作れるでしょう。

ただし、これもやはりWebソケットと同じで
スマホなんかでトンネルに入って瞬断→Aさんが退室しました！
大きなお世話じゃボケ問題は残っています。

2個目、JSはシングルスレッドでありブラウザ正常な動作まで全て中断・堰き止めます。
なのでJSで待つ＝ユーザ体験の悪化に繋がるので、
JSの関数実行や処理はイベント登録だけして、さっさと終了させろが鉄則です。

なのでAjax通信は完了を待つ箇所をイベント登録→イベントループで待つ作りにしているのが常識です
Ajax通信の大本の技術であるXMLHttpRequestは同期通信を作ってブラウザの動作を停止して待ちぼうけさせる事も可能です。

ところが、お行儀が良くないので名指しで非推奨にされてしまいました。
何時使えなくなるんでしょうね。
Firefoxのバージョンは今日現在既に85なのでとっくの昔に停止されていてもおかしくありません。
【Javascript】Firefox30での同期 XMLHttpRequestについて調べてみた | Wood-Roots:blog

3個目

一旦画面上に「退室しているから待って」みたいなメッセージを表示して待たせて、
通信完了と同時に「退室しました、ブラウザを閉じても構いませんよ」みたいな画面表示をするのも手です。

beforeunloadによると、下記のようなコードでキャンセル出来ますよとしています。

js
1window.addEventListener('beforeunload', (event) => {
2  // Cancel the event as stated by the standard.
3  event.preventDefault();
4  // Chrome requires returnValue to be set.
5  event.returnValue = '';
6});