Socket.IO、Expressでページ遷移(画面遷移)がしたい！

###前提・実現したいこと
Node.JS、Socket.IO、Expressを使った早押しボタン的Webアプリケーション。
クライアントを親機と子機に分け、親機で子機に対する操作を行い子機は入力を受け取りサーバーに送信、親機のみに子機の入力情報を表示する。
※実際のWebサービスとしての運用は考えておらず、プライベートネットワークで動かせれば問題ないレベルの簡単なアプリです

###発生している問題・エラーメッセージ
index.htmlからリンクしている親機・子機のページに移動できず、リンク先でもindex.htmlのページが表示されてしまう。

###コード
app.js

JavaScript
1var express = require("express");
2var http = require("http");
3var socketio = require("socket.io");
4var app = express();
5
6var svcontroller;
7
8var starttime;
9var connectcount = 0;
10
11app.get("/", function (req, res) {
12    res.sendFile(__dirname + "/index.html");
13});
14
15app.get("/baseunit.html", function (req, res) {
16    res.sendFile(__dirname + "/baseunit.html");
17});
18
19app.get("/extension.html", function (req, res) {
20    res.sendFile(__dirname + "/extension.html");
21});
22
23var server = http.createServer(app).listen(3000);
24
25io.on("connection", function (socket) {
26    connectcount++;
27
28    //親機という情報が伝わったら
29    socket.on("ControllerSet", function () {
30        svcontroller = socket.id;
31    });
32
33    //親機から受付情報のデータを受け取る
34    socket.on("Management", function (data) {
35        if (socket.id === svcontroller)
36        {
37            //受け付け開始のイベントを送る
38            if (data.mode === "ReceipeOK") {
39                socket.broadcast.emit("ReceipeOK");
40
41                //受付開始時点での時間を受け取る
42                var date = new Date();
43                starttime = date.getTime();
44            }
45            //受け付け停止のイベントを送る
46            else if (data.mode === "ReceipeNG")
47                socket.broadcast.emit("ReceipeNG");
48        }
49    });
50
51    //子機から押された情報が届いたら
52    socket.on("Push", function (data) {
53        var msg = "";
54        var date = new Date();
55        var time = (date.getTime() - starttime) / 1000.0;
56
57        //XSS対策の文字エスケープ
58        data.name.replace(/[&'`"<>]/g, function (match) {
59            return {
60                '&': '&amp;',
61                "'": '&#x27;',
62                '`': '&#x60;',
63                '"': '&quot;',
64                '<': '&lt;',
65                '>': '&gt;',
66
67            }[match]
68        });
69
70        msg = data.name + " " + time + " " + data.button;
71
72        io.to(svcontroller).emit("PushInfo", msg);
73    });
74});
75
76io.on("disconnect", function (socket) {
77    connectcount--;
78    //親機が接続を切った？
79    if (socket.id === svcontroller) svcontroller = -1;
80});

※XSS対策文字エスケープの参考
https://qiita.com/saekis/items/c2b41cd8940923863791

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Fastest Finger</title>
6</head>
7<body>
8<h1>早押しボタン</h1>
9<p><a href="baseunit.html">親機の方はこちら</a></p>
10<p><a href="extension.html">子機の方はこちら</a></p>
11</body>
12</html>

###補足情報(言語/FW/ツール等のバージョンなど)
Node.jsのバージョンは8.9.2、Socket.IOのバージョンは2.0.4、Expressのバージョンは4.16.2。

行動規範の内容に同意します

回答1件

ベストアンサー

・サーバーサイドのコードはapp.jsのみでしょうか。
・「node app.js」で起動していますでしょうか。

socketioは定義されていますが、ioが定義されているコードが見当たらないので本当に動くのかな・・・と疑問です。

var server = http.createServer(app).listen(3000);

とserverあるので、どこか適当な場所に

var io = socketio(server);

と書き足してあげると動くのかなと思います。

投稿2017/12/19 12:08

nullpurge

総合スコア26

Seiten_Minagawa

2017/12/19 15:34

app.getの部分でページ遷移を実現できていましたが、何かの拍子にioを消してしまっていたようです。また文字列のreplace部分をどこにも代入しておらず、結局XSSができてしまうようになってしまっていました。回答ありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Socket.IO、Expressでページ遷移(画面遷移)がしたい！

関連した質問