4．socket.io

魔法探偵の助手

socket.ioを実装してWebページからサーバ側の関数を実行する
app.js側

// ～～const io = socketio(server);
io.sockets.on('connection', socket =>
{
	socket.on('socket1', (data, func) =>
	{
		const ope = "+";
		const res = Number(data.val1) + Number(data.val2);

		func(ope, res);
	});
	
	socket.on('socket2', (data, func) =>
	{
		const ope = "*";
		const res = Number(data.val1) * Number(data.val2);

		func(ope, res);
	});
});

top.ejs側

<!DOCTYPE html>
<html>
	<head>
		<meta name="author" content="@MagicalWatosan">
		<title><%= title %></title>
		<link rel="stylesheet" href="/test/stylesheets/top.css"/>
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	</head>
	<body oncontextmenu="return false;">
		<input type="text" id="val1" value=12> <span id="ope"> </span> <input type="text" id="val2" value=34> <span id="res"> </span>

		<br>
		
		<input type="button" value="足し算" onclick="socketTest(1);">
		<input type="button" value="掛け算" onclick="socketTest(2);">

		<script type="text/javascript">
			const socket = io.connect("<%= host %>");

			function socketTest(num)
			{
				// "足し算"を押したら"socket1"，"掛け算"を押したら"socket2"でemit
				socket.emit('socket' + num, {val1: val1.value, val2: val2.value}, (o, r) =>
				{
					ope.innerText = o;
					res.innerText = "= " + r;
				});
			}
		</script>
	</body>
</html>

router.jsのレンダリング部分
io.connectに渡す"host"プロパティをまとめて変更できるように，変数として渡せるようにする．

host = "/";

router.use('/test', (req, res, next) =>
{
	// "views"でセットしたフォルダ内のejsファイル（test/top.ejs）
	const file = 'test/top';
	// 引数として渡すオブジェクト<%= title %>として利用できる
	const obj = {title: 'Test', host: host};
	
	// Webページをレンダリング
	res.render(file, obj);
});

結果

画像1


この記事が気に入ったらサポートをしてみませんか？