Socket.IOで個別チャットを作りたい後編

realtime_chat_app

Socket.IOで個別チャットを作りたい前編で、Socket.IOのnamespacesとroomsに触れた。

namespacesを活用すれば個別チャットの仕組みを作れるのではないか？

ということで下記の内容を試してみた。

・hogeとhugaというnamespaceを作成

・フロント側でランダムでhogeかhugaのどちらかでサーバに接続する。

というわけでこれらを満たすコードを追加してみた。

server.js

/** serverの接続周りは省略 **/
var io = require("socket.io").listen(server);

//namespacesを２つにしてみる
["hoge", "huga"].forEach(function(v){

	// ユーザ管理ハッシュ
	var userHash = {};

	// Namespacesを利用する
	var chatNS = io.of('/' + v);
	chatNS.on("connection", function(socket){

		var roomName = "default";
		socket.join(roomName);

		socket.on("connected", function(name){ /** 省略 **/ });
		socket.on("publish", function(data){ /** 省略 **/ });
		let nowTyping = 0;
		socket.on("start typing", function(){ /** 省略 **/ });
		socket.on("stop typing", function(){ /** 省略 **/ });
		socket.on("disconnect", function(){ /** 省略 **/ });
	});
});

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web socket</title>
</head>
<body>
namespace:<span id="ns" style="font-weight:bold;"></span><br>
<input type="text" id="msg_input" style="width:200px;">
<button onclick="publishMessage();">語る</button>
<div id="msg"></div>
<div id="system_text"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script>
var systemText = document.querySelector("#system_text");

// namespaceを加味したURL
var ns = ["hoge", "huga"];
var r = ns[parseInt(Math.random() * 2)];
document.querySelector("#ns").innerText = r;

var websocketUrl = "http://localhost:8080/" + r;
var socket = io.connect(websocketUrl);

/** 以下省略 **/
</script>
</body>
</html>

サーバ側では、hogeとhugaのnamespace

フロント側では、表示の際にランダムにどちらかのnamespaceに接続するというコードを追加してみた。

編集後に実行し、ブラウザで表示してみると、

socketio_same_chat_space