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);
});
結果
この記事が気に入ったらサポートをしてみませんか?