質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

3604閲覧

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

t-_.

総合スコア55

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2021/01/31 13:11

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

チャットから切断した

ここがかなり悩ましいですね。
色々考えましたが微妙でした(結論は最下部を見てね)
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});

event.preventDefault();の実行が肝心なようですね。
チャットへの入場フラグかなんかを持っておき、
一度Ajax通信でチャットの入場フラグをへし折っておかないとブラウザを閉じられないよう却下し続ければ良いわけですね。

昔のエロサイトなんかはこの方式で閉じようとすると
100個にウィンドウが増える嫌がらせ等をしていたようなので
それと同じとみなされて無効化される可能性もありますが。


1−3まで見ましたがどれも微妙ですね。
実装難度も高く、検証作業→実装の繰り返しになるわけですから、
JSがそこそこ得意な私でも数日スパンは平気で消費します。

その結果、完璧だ!……になるビジョンが見えませんので、
私はあまりオススメしません。

退室メッセージなくても良いじゃないですか!
LineやSlack等のツールでも退室メッセージないですよね?

ゆるゆるに裏側で生存報告点呼のAjax通信を投げて、
アクティブな接続ユーザ一覧を上の方に表示するだけの作りとかに路線変更するのも良いと思います。

投稿2021/02/01 03:36

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問