現在使用しているjsファイルにsocket.ioを使ってroom機能を実装したい

Question

実現したいこと

私が現在ボードゲーム作成のために使用しているjsファイルにsocket.ioを使ってroom機能を付与したいです。
ちなみにhtmlファイルではなくpugファイルを使用しています。

発生している問題

最後に載せている参考サイトのプログラムをうまく組み込ませてroom機能を実装しようとしてもサーバーが起動した途端落ちてしまったり、プログラムの中身が表示されてしまったりしてしまいます。

該当のソースコード

const express = require("express");
const app = express();
const http = require("http").createServer(app);
const PORT = process.env.PORT || 3001;

app.set("view engine", "pug");
app.use(express.static(`${__dirname}/public`));

app.get("/", (req, res) => {
  res.render("index_gest");
});
app.get("/index_gest", (req, res) => {
  res.render("index_gest");
});
app.get("/index_user", (req, res) => {
  res.render("index_user");
});
app.get("/login", (req, res) => {
  res.render("login");
});
app.get("/useradd", (req, res) => {
  res.render("useradd");
});
app.get("/useraddcomp", (req, res) => {
  res.render("useraddcomp");
});
app.get("/pieceprogramsettings1", (req, res) => {
  res.render("pieceprogramsettings1");
});
app.get("/pieceprogramsettings2", (req, res) => {
  res.render("pieceprogramsettings2");
});
app.get("/pieceprogramsettings3", (req, res) => {
  res.render("pieceprogramsettings3");
});
app.get("/pieceprogramsettings4", (req, res) => {
  res.render("pieceprogramsettings4");
});
app.get("/pieceprogramsettings5", (req, res) => {
  res.render("pieceprogramsettings5");
});
app.get("/gamemodeselection", (req, res) => {
  res.render("gamemodeselection");
});
app.get("/chengeaccountinformation", (req, res) => {
  res.render("chengeaccountinformation");
});
app.get("/mypage", (req, res) => {
  res.render("mypage");
});
app.get("/keep", (req, res) => {
  res.render("keep");
});
app.get("/call", (req, res) => {
  res.render("call");
});
app.get("/play", (req, res) => {
  res.render("play");
});
app.get("/play1", (req, res) => {
  res.render("play1");
});
app.get("/play2", (req, res) => {
  res.render("play2");
});
app.get("/play_inaba", (req, res) => {
  res.render("play_inaba");
});
app.get("/callcheck", (req, res) => {
  res.render("callcheck");
});
app.get("/keepcheck", (req, res) => {
  res.render("keepcheck");
});
app.get("/pieceprogramedits1", (req, res) => {
  res.render("pieceprogramedits1");
}); 
app.get("/pieceprogramedits2", (req, res) => {
  res.render("pieceprogramedits2");
}); 
app.get("/pieceprogramedits3", (req, res) => {
  res.render("pieceprogramedits3");
}); 
app.get("/pieceprogramedits4", (req, res) => {
  res.render("pieceprogramedits4");
}); 
app.get("/pieceprogramedits5", (req, res) => {
  res.render("pieceprogramedits5");
});
app.get("/resalt", (req, res) => {
  res.render("resalt");
});
app.get("/matching", (req, res) => {
  res.render("matching");
});
app.get("/waitingformatching _moveplay", (req, res) => {
  res.render("waitingformatching _moveplay");
});
app.get("/waitingformatching _room", (req, res) => {
  res.render("waitingformatching _room");
});
app.get("/waitingformatching", (req, res) => {
  res.render("waitingformatching");
});

http.listen(PORT, ()=>{
    console.log("server listening. Port:" + PORT);
});

補足情報（FW/ツールのバージョンなど）

参考にさせていただいたサイトです。
https://kazzstorage.com/websocket-reversi-dev/
https://atmarkit.itmedia.co.jp/ait/articles/1603/14/news015.html
https://blog.katsubemakito.net/nodejs/socketio/realtime-chat1
https://socket.io/docs/v4/rooms/#default-room

Comments

[takapiro99]

何をいじったらどんなエラーが出てきますか？

[mariko68311]

ごめんなさい、現在はまた別のプログラムを組み込もうとしてコードを変えてしまったため、その弄った時に出てきたエラー表示などを言葉で伝えることしかできません､､､一応上に書いています、でもこれじゃよくわからなかったってことだと思うので本当に申し訳ないです､､､

[takapiro99]

上に載せてくれたコードには、socket.io の記述がないですね
変えたあとのものでもいいので、ここに貼ってくれたらアドバイスはできるかもです

[mariko68311]

一部はpugファイルの遷移処理なので省くのですが、
const express = require("express");
const app = express();
const port = 3001;
const server = app.listen(port);
const socketio = require("socket.io");
const io = socketio(server);

let clientNo = 0;

io.on('connection', (socket) => {
clientNo++;
socket.join(Math.round(clientNo/2));
socket.emit('serverMsg', Math.round(clientNo/2));

socket.on('buttonPressed', clientRoom =>{
io.to(clientRoom).emit('switchFromServer');
})
});
と書いていて、pugファイルのscript文には、
script.
const socket = io();

let clientRoom;

socket.on('serverMsg', (data) => {
console.log(`I should be in room No.${data}`);
clientRoom = data;
});

socket.on('switchFromServer', () => {
//ここの処理の書き方がわからない
});
turnflag.addEventListener('click', () => {
socket.emit('buttonPressed', clientRoom);
});
と書いています。また、コメントにしている部分にはvar文で指定したturnflagを読み込んだ時に、同じくvar文で指定したwarr,barr,a,bを呼び出す処理を書きたいと考えています。

[takapiro99]

補足ありがとうございます！
素敵なゲームになりそうですね
ところで、今のエラーはどんな内容が出ていますか？

エラーの出ている内容をぐぐったりすると、解決しやすいです

[mariko68311]

いえ、現状だとエラーは出ていないんです、ただルーム機能が上手く機能していないだけだとは思うんですよね、でも調べてもチャット系のものがほとんどでなかなか参考に出来ずに苦戦しています。コメント部分のルーム機能を作った後に呼び出すデータの指定をちゃんと出来れば恐らく上手くいくとは思っているんですが、確信がない上にそもそも書き方が分からないもので､､､

[mariko68311]

追記なんですが、turnflagは
var turnflag=true;
と記述していて、
turnflag.addEventListener('click', () => {
の指定のやり方をするときには
const turnflag = document.getElementById('turnflag');
のような書き方をすると思うので、
そもそも記述が間違っているのでしょうか、
それともやり方次第でこのまま使えるのでしょうか？
前者だった場合、他の指定の仕方はどのようにするのがいいでしょうか？

Answer 1

サーバーが起動した途端落ちてしまったり、プログラムの中身が表示されてしまったり

原因はたくさんありますので、今後のために、都度エラーメッセージをコピペしておいた方が良いのかもしれませんね。

---

確信がない上にそもそも書き方が分からないもので､､､

いきなり実際のアプリに組み込むと大変になってしまいますので、別に小さなサンプルアプリを作ってみて動きを確認してみると良いと思いました。

---

そもそも記述が間違っているのでしょうか、 それともやり方次第でこのまま使えるのでしょうか？ 前者だった場合、他の指定の仕方はどのようにするのがいいでしょうか？

turnflagはBooleanですので、turnflag.addEventListenerと記述することはできないですね・・
turnflagのtrueとfalseを変更している処理をどこかに記述していると思いますので、そこにturnflag.addEventListenerに設定した関数の内容を記述することになるのかな？と思います。

EventTarget の addEventListener() メソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。 対象としてよくあるものは Element, Document, Window ですが、イベントに対応したあらゆるオブジェクトが対象になることができます (XMLHttpRequest など)。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

---

自分で実装してみるのが一番理解できるとは思いますが・・
room機能の最小限のサンプルを記述してみました。
実際に動かしながら動きを確認してみるのが良いのかな？と思います。

// app.js
const express = require("express")
const { createServer } = require("http")
const { Server } = require("socket.io")

const app = express()
const httpServer = createServer(app)
const io = new Server(httpServer, { /* options */ })
const port = 3000

app.set("view engine", "pug")

app.get("/", (req, res) => {
    res.render("index", { title: "Hey", message: "Hello there!" })
})

io.on("connection", (socket) => {
    console.log(`connection socket.id: ${socket.id}`)
    socket.on("join", (room) => {
        socket.join(room)
        console.log(`join socket.id: ${socket.id}, socket.rooms: ${JSON.stringify([...socket.rooms])}`)
        io.to(room).emit("joined", socket.id, room)
    })
})

httpServer.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

//- views/index.pug
html
    head
        meta(charset="utf-8")
        title= title
        script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
    body
        h1= message
        select(name="select1", id="select1") 
            option(value="room1", selected) ルーム1
            option(value="room2") ルーム2
            option(value="room3") ルーム3
        input(type="button", value="join", id="button1")
        script.
            window.addEventListener("DOMContentLoaded", () => {
                const socket = io()
                socket.on("connect", () => {
                    console.log(`connect: ${socket.id}`)
                })
                socket.on("disconnect", () => {
                    console.log(`disconnect: ${socket.id}`)
                })
                socket.on("joined", (socketId, room) => {
                    console.log(`joined socketId: ${socketId}, room: ${room}`)
                })
                const button1 = document.querySelector("#button1")
                button1.addEventListener("click", () => {
                    const room  = document.querySelector("#select1").value
                    socket.emit("join", room)
                })
            })

{
  "name": "Sample",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.2",
    "pug": "^3.0.2",
    "socket.io": "^4.4.1"
  }
}

(一連の質問が解決するまでクローズしなくて大丈夫ですよ)

Comments

[mariko68311]

わかりました、ありがとうございます！実はこの件は急いで進めることが難しくなりそうなので都度都度期間が空いてしまうかもしれません、ごめんなさい。

[mariko68311]

お久しぶりです、サンプルを参考にした結果、room機能を実装することはできたので解決にさせていただきますね！ただ、また別の問題が出てきてしまったのでそれは再度別の質問として質問しなおそうかなと思います。

[退会済みユーザー]

お久しぶりです。
コメントありがとうございます。
次に進めていたようでよかったです。
別の質問も見てみましたが、すでに回答がついていたようですね。
引き続き頑張ってください。
応援してます。