WebSocketで、サイトのアクティブユーザー数を計測する方法

こんにちは、デジタルノマドの細音希です。

今回は珍しく技術記事になります。

この記事は、JavaScriptを使用した方法になります。

バックエンドのプログラム、セッション、Cookie、どこかのAPI、フレームワーク、一切使いません。

今回紹介する「アクティブユーザー数」とは、現在サイトを開いているブラウザのタブ数を表します。

localStorageなど使えば、複数のタブでもブラウザ単位で1つとカウントできると思いますが今回はそこまでやりません。

準備するもの

・インターネットに接続されたPC

・テキストエディタ

以上です。

使用するもの、技術

・JavaScript

・WebSocket通信

・Achexサーバー

Achexサーバーとは、WebSocket通信のために用意された、無料のソケットサーバーです。

では早速ソースコードから見ていきます。

ws = new WebSocket("wss://cloud.achex.ca/activeusercount");

sendMsg = new Date() + "_" + new Date().getTime();
gotMsg = new Array();
activeUserCount = 0;

ws.onmessage = e => {
	var obj = JSON.parse(e.data);
	if (obj.message == sendMsg) {
		activeUserCount++;
		document.getElementById("activeUsers").innerText = activeUserCount;
	} else if (obj.message != undefined && gotMsg.filter(msg => msg = obj.message).length == 0) {
		gotMsg.push(obj.message);
		ws.send(JSON.stringify({"to": "hogehoge", "message": obj.message}));
	}
}

ws.onopen = e => {
	ws.send(JSON.stringify({"auth": "hogehoge", "password": "1234"}));
	ws.send(JSON.stringify({"to": "hogehoge", "message": sendMsg}));
}

ws.onclosed = e => {
console.log('closed');
}

解説​

まず、ws = new WebSocket("wss://cloud.achex.ca/activeusercount");で、WebSocket接続をします。

接続先は、"wss://cloud.achex.ca/{任意の文字列}"です。

ここで文字列が既に他のサイトからも使われてしまっていても、多分大丈夫です。

次に、openイベントで、2つのメッセージを送っています。

このあたりはAchexサーバーの仕様で必要なので、各々調べてください。

1つめの送信内容、auth: hogehoge, password: 1234というのは、Axhecサーバーに対してアカウントの登録を行っているようなものです。

そのあと、to: hogehoge, message: sendMsgで、上の行で作った自分のアカウントに対して、メッセージを送ります。

メッセージの内容は、現在時刻の文字列になっています。

IPアドレスやUAなどの文字列か、そのハッシュ値などをメッセージに含めると精度は上がると思います。

そして、messageイベントで、Achexサーバーからメッセージを受信します。

openイベントで自分が送ったメッセージも受信できるよう、messageイベントはopenイベントより上に書いてください。

ここで、メッセージの内容によって分岐します。

自分が最初に送ったメッセージがそのまま返ってきた場合、activeUserCount++してカウントを増やし、HTMLに数値を反映させます。

自分が送ったメッセージとは違うメッセージが来た場合、その内容をそのままAchexサーバーに送り返します。

送り返す先も、最初に作った同じアカウント(hogehoge)宛です。

このとき、送り返したメッセージをまた受信し、それまた送り返すという無限ループになってしまうため、一度送ったメッセージを再度送らないようにgotMsgに追加しておきます。

これで完成になります。

処理は単純で、自分が送ったメッセージが返ってきたらカウントする、他のメッセージが送られてきたらそのまま返す。

これだけです。

アクティブユーザー数をリアルタイムに更新したいときは、同じメッセージを何回受信したかをカウントすればいいですね。

今回の記事はこのへんで。

多分こういうのってQiitaとかに載せる内容なんだろうな。

垢持ってないのでこっちに載せました。

ではではノシ