[Nodejs] WEBページの今現在同時閲覧している人数を表示する機能構築(ソース付き)

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

最近Twitterのクジラをすっかり見なくなりました。
 

知らない人の為に説明しておくと、Twitterのクジラとは、サービスサーバーの負荷が高くなってきた時に、サービス表示を止めて切り替えられるページでクジラのイラストが表示する事です。
Twitterのクジラさん | ピクシブ百貨店
 

サービス開始直後にはあれほど見ていたのに、見なくなると何だか寂しいものです。
 

だけどユーザーとしては、当時はクジラがでると「イラッ」としたものです・・・
 

同時アクセスユーザーの人数が多い事が原因なんですが、SNSが主流となってきたWEB環境では、今現在どのくらいの人数がWBEサイトに集まっているか気になる人もいるし、WEBサイト主にとっては、収益にも影響するので、気になる人も少なくないはずです。
 

そんな機能を簡単に設置できるソースコードを作ったので、興味のあるエンジニアは、参考までにどうぞ。

技術関連

今時のエンジニアであれば、すぐにNodejs + SocketIOという事を思いつくと思いますが、その構成で構築しました。
 

ちなみに環境は以下の通りです。

Linux : Ubuntu
Nodejs : 7.1.0 (ポート3336)

WEBページにJavascriptタグを貼るだけで実現できるようにしています。
そして、他の機能拡張なども考えて、socketIOのJSタグを直接貼るのではなく、タグマネージャーちっくなものも作っておきました。
 

サイト構成(ソースコードの設置方法など)

asp.js

– タグマネージャー用ソースコードです。こちらのファイルのタグを貼り付けてください。
 

asp.run.js

– Nodejsの起動用ファイル

asp.core.js

– タグマネージャーで呼び出されるクライアントサイト用JSファイル

事前準備

NodejsのインストールとSocketIOをnpmでインストールしておきましょう。
 

とりあえず簡単に済ませたい人は、下記コマンドで行ってください。

 

最新版を入れたい人は、nvmインストールがオススメです。

ソースコード

注意事項

asp.core.jsの6行目にある「%your-site%」は、ソースコードの設置するドメインを入れてください。

サンプル

とりあえず、私の会社のWEBページに設置しているので、下記リンクをクリックして見てみてください。
左上の黒いマークに閲覧人数が表示されます。
 

PCでもスマホでも閲覧できます。
 

株式会社MYNTページ
スクリーンショット 2017-10-29 9.01.50
 

ただし、現時点での課題は、スマホなどのスリープモードから復旧した時に数値がおかしくなる現象があります。
 

これは、reconnectが正常に機能として入れ込まれていないことが原因なのですが、SocketIOのイベント情報の調査中なので、分かったらまたブログでお知らせしたいと思います。
 

また、不明点などあればご質問ください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です