別ウィンドウで同じ画面を共有しながらroom機能を使って共有人数を二人までという制限をかけたい。

Question

私は現在Node.jsとpugを中心にボードゲームを作成しているのですが、
ネット上での対戦環境を整えるにむけて、
socket.ioをサーバーのjsファイルとプレイ画面のpugファイルに組み込もうと思っていたのですが、どのサイトを参考にして組み込もうとしてもうまくいきませんでした。
いきなりネットでの対戦を可能にするのは難しいと考えているので、
とりあえずタイトルのとおりの別ウィンドウで見た際に同じ画面が共有されていて、それが共有される人数が二人までという制限をかけるところまでを実現したいので、誰かご教授願えないでしょうか？

実現したいこと

サーバーのjsファイルとプレイ画面のpugファイルにsocket.ioを組み込み、
別ウィンドウで見た際に同じ画面が共有されていて、それが共有される人数が二人までという制限をかけたい。
おそらくなのですが、駒の位置情報を送信しないといけないので、barrとwarrの情報を呼び出したい。
タイミングとしてはプレイ画面の前にあるポップアップのスタートボタンを押すとサーバーが接続される、という感じにしたい。
ポップアップに関してはない方が都合がいいのなら消しても大丈夫で、その場合はプレイ画面がに遷移した瞬間がいいです。
プログラムを書くために使っているのはVisual Studio Codeです。

発生している問題・エラーメッセージ

下記に記述したサイトを参考にしてプログラムを組み込もうとしても修正前と何も変わらない。おそらく打ち込んだプログラムが完全にスルーされている。読み込んでいないということでエラーメッセージもログも何も出てこないので何がどう間違っているという判別もつけられない。

該当のソースコード

現在は下記に書いたyoutubeの動画を5分あたりまでを参考にしてこのようなプログラムになっています。
明らかに関係ない部分は省いています。

#startpop
      .pop-star
        p#startcom スタート
script.
     const startcom = document.getElementById('startcom');

      startcom.addEventListener('click', () => {
      startpop.style.display='none';
      socket.emit('buttonPressed', clientRoom);
      });

      var barr = [1101,1102,1103,1104,1105,1106,1205,1204,1203,1202,1201];
      var warr = [2107,2108,2109,2110,2111,2112,2211,2210,2209,2208,2207];

script.
      const socket = io();

      let clientRoom;

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

      socket.on('switchFromServer', () => {
          console.log(`koko`);
      });

const express = require("express");
const app = express();
const port = 3001;
const server = app.listen(port);
const socketio = require("socket.io");
const io = socketio(server);

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

let clientNo = 0;

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

    socket.join(barr);
    socket.join(warr);
    socket.emit('serverMsg', barr);
    socket.emit('serverMsg', warr);

    socket.on('buttonPressed', clientRoom =>{
        io.to(clientRoom).emit('switchFromServer');
    })
});

試したこと

socket.join(barr);
socket.join(warr);
socket.emit('serverMsg', barr);
socket.emit('serverMsg', warr);
の部分をpugファイルに書き込んでみても何も変化が起きず、
pugファイルの二つあるscript文を一つにまとめようとするとポップアップのスタートを押せなくなってしまった。

補足情報

参考にしたサイトです。
https://www.youtube.com/watch?v=0zTY73khJPM&t=238s
https://atmarkit.itmedia.co.jp/ait/articles/1603/14/news015_2.html
https://kazzstorage.com/websocket-reversi-dev/

Comments

[退会済みユーザー]

まだ回答がついていないようでしたのでコメントしてみます。

> 修正前と何も変わらない。おそらく打ち込んだプログラムが完全にスルーされている。
> pugファイルの二つあるscript文を一つにまとめようとするとポップアップのスタートを押せなくなってしまった。

変わらないのか、押せなくなってしまった(変わった)のか、状況が正しく把握できませんでした・・
「スルーされている」の状況をもう少し具体的にご記載いただくと良いかもしれません。

> 下記に記述したサイトを参考にしてプログラムを組み込もうとしても修正前と何も変わらない。おそらく打ち込んだプログラムが完全にスルーされている。読み込んでいないということでエラーメッセージもログも何も出てこないので何がどう間違っているという判別もつけられない。

「修正前」というのは参考にしたサイトの通りに作った状態でしょうか？
この状態では動くのが確認できているということですかね。
一旦、この状態に戻した方が良いのかもしれません。

`socket.join(barr);`のように、サーバー側でクライアント側の変数を使おうとしてしまっているようですので、
サーバーか、クライアントか、どちらかを意識して少しずつ修正していくのが良さそうに思いました。

https://socket.io/docs/v4/server-api
https://socket.io/docs/v4/client-api

[mariko68311]

回答ありがとうございます！えっとですね、最初のふたつの件に関しては参考サイトのプログラムを利用しても修正前、つまりsocket.ioのプログラムを入れる前と動きが変わらない、ということです。後、その入れたsocket.ioのプログラムを無理やり1つのscript文に書き込んだ結果、そもそも進行不可になってしまったので、この書き方自体が間違っているだなと思い、発生している問題ではなく、試したことの方で書かせてもらいました。

[mariko68311]

2つ目の件についてなのですが、上でも話したのですが修正前はプログラムを入れる前を指しているので、参考サイトの通りに入れた状態は修正後になっちゃいます、読みづらくて申し訳ないです､､､

[mariko68311]

joinってクライアント側の変数だったんですね！理解が薄いまま使ってたもので､､､公式のサイトを2種類載せてくれていますが、具体的にどこが使えそう！というのは今載せている情報でわかったりしますか、？分からないなら分からないでも大丈夫です、その時はまた自分でこの2つのサイトからヒントを得られないか探してみますので、！

Answer 1

コメントありがとうございます。

修正前はプログラムを入れる前を指しているので、
修正前というのは、Socket.IOに関する処理を入れる前という意味だったのですね。
一旦、Socket.IOに関する処理は全て元に戻して、まず、Socket.IOの接続(connection)が確立できるところを目指すのが良いと思いました。

サーバー側

app.listenしてしまうと動作しないそうですので、引用したコードを参考にExpressにおけるSocket.IOのサーバー側の初期化をします。
createServerしたものを使うイメージのようです。

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 */ });

io.on("connection", (socket) => {
  console.log(socket.id);
});

httpServer.listen(3000);

CAUTION
Using app.listen(3000) will not work here, as it creates a new HTTP server.
(app.listen(3000) を使用すると、新しい HTTP サーバーが作成されるため、ここでは動作しません。)

https://socket.io/docs/v4/server-initialization/#with-express

クライアント側

クライアント側でSocket.IOの初期化(io())をしていますが、クライアント側のSocket.IOのライブラリーは読み込みされていますでしょうか？
していない場合は次の引用を参考にライブラリーを読み込みます。
(Pugのコードに記載がないようでしたので念の為確認させていただきました)

(HTMLの場合)

<script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script>

(Pugの場合)

script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")

https://socket.io/docs/v4/client-installation/

それからクライアント側のSocket.IOを初期化します。

const socket = io();
socket.on("connect", () => {
  console.log(socket.id);
});

https://socket.io/docs/v4/client-initialization/#from-the-same-domain

ここまで実装するとサーバー側とクライアント側の接続が確立されるはずです。
(クライアント側のio()が実行されて、サーバー側のio.on("connection", () => {})が動くはずです)
そして、Expressを起動したターミナルにソケットのidが出力されるはずです。
ブラウザーのコンソールにも同じidが出力されるはずです。

---

joinってクライアント側の変数だったんですね！

すみません、、joinメソッドのことではなく、barrとwarr変数がクライアント側で定義されているもので、それをサーバー側で使ってしまっている、という意味で書きました。
joinメソッドはサーバー側のAPIで、ソケットをルームに追加するためのもののようですね。

socket.join(room)
Adds the socket to the given room or to the list of rooms.
(ソケットを指定されたルームまたはルームのリストに追加します。)
https://socket.io/docs/v4/server-api/#socketjoinroom

---

接続が確立できたら、次はソケットをルームに追加するところですかね。
(まだデータの共有とかは考えない方が良いと思います)

ブラウザーからボタンをクリックした時にルームに追加するのか、
ページを読み込んだ時に(ボタンをクリックする前に)ルームに追加するのか、
混乱してしまっているように見えましたので、
それらを整理した上で少しずつ記述すると良いと思いました。

追記

追記です。
最小限のサンプルアプリを書いてみました。
読んだだけでは理解できないところもあると思いますので、面倒でもご自身で一度動かしてみることが大切かな？と思います。
ショートカットしようとすると後でそのツケを払うことになり、結果的に遠回りになってしまう、というのが個人的な経験則です・・

// 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!" })
})

app.get("/window1", (req, res) => {
    res.render("window1")
})

const socketPerRoom = 2
let socketCount = 0

io.on("connection", (socket) => {
    console.log(`connection socket.id: ${socket.id}`)
    socket.on("join", () => {
        socketCount++
        const room = `room${Math.ceil(socketCount / socketPerRoom)}`
        // ソケットをルームに追加する
        socket.join(room)
        console.log(`join socket.id: ${socket.id}, socket.rooms: ${JSON.stringify([...socket.rooms])}`)
        // ルーム全体に送信する(最大2つのソケット)
        io.to(room).emit("joined", socket.id, room)
    })
})

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

.

//- views/index.pug
html
    head
        title= title
    body
        h1= message
        input(type="button", value="join", id="button1")
        script.
            window.addEventListener("DOMContentLoaded", () => {
                const button1 = document.querySelector("#button1")
                button1.addEventListener("click", () => {
                    //- 別ウィンドウで開く(Socket.IOの接続は別ウィンドウで)
                    window.open("/window1", "_blank")
                })
            })

.

//- views/window1.pug
html
    head
        title= "Window1"
        script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
    body
        h1= "Window1"
        ul(id="ul1")
        script.
            window.addEventListener("DOMContentLoaded", () => {
                //- Socket.IO接続
                const socket = io()
                socket.on("connect", () => {
                    //- 接続した時のイベント
                    //- ソケットのIDをコンソールと画面のリストに出力する
                    console.log(`connect: ${socket.id}`)
                    const li1 = document.createElement('li')
                    li1.textContent = `connect socket.id: ${socket.id}`
                    const ul1 = document.querySelector("#ul1")
                    ul1.append(li1)
                })
                socket.on("disconnect", () => {
                    console.log(`disconnect: ${socket.id}`)
                })
                socket.on("joined", (socketId, room) => {
                    //- ルームに追加した時のイベント
                    //- ルームに追加されたソケットのIDとルームの名前をコンソールと画面のリストに出力する
                    console.log(`joined socketId: ${socketId}, room: ${room}`)
                    const li1 = document.createElement('li')
                    li1.textContent = `joined socketId: ${socketId}, room: ${room}`
                    const ul1 = document.querySelector("#ul1")
                    ul1.append(li1)
                })
                //- サーバーに送信する(ルームに追加するためのイベント)
                socket.emit("join")
            })

.

// package.json
{
  "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"
  }
}

実行すると次のようになります。
一人目、二人目はroom1に追加されます。
(二人目が追加された時に一人目のウィンドウに二人目のソケットIDも出力されます)
三人目はroom2に追加されます。

% node app.js 
Example app listening on port 3000
connection socket.id: BYCS0K4ZwIzA0HnbAAAB
join socket.id: BYCS0K4ZwIzA0HnbAAAB, socket.rooms: ["BYCS0K4ZwIzA0HnbAAAB","room1"]
connection socket.id: 3qos0oYduumeQfBnAAAD
join socket.id: 3qos0oYduumeQfBnAAAD, socket.rooms: ["3qos0oYduumeQfBnAAAD","room1"]
connection socket.id: rAIBndZzCigIRUn2AAAF
join socket.id: rAIBndZzCigIRUn2AAAF, socket.rooms: ["rAIBndZzCigIRUn2AAAF","room2"]

メインウィンドウ

別ウィンドウ一人目
(二人目が入った後にキャプチャしたため二人目のソケットIDも出力されます。同じルームに追加されたことの確認)

別ウィンドウ二人目

別ウィンドウ三人目
(三人目はルーム2に追加されます)

サーバー側で勝手にルームを割り振って良いのか、クライアント側からルームを指定するのか、設計を検討する必要がありそうかな？と思いました。

Comments

[mariko68311]

返信遅くなりました！確かにいろいろ焦ってしまっていたのかもしれませんね、、、
言われた通り、一度最初からsocket.ioの書き込みをやり直してみます！また進展があったらお聞きします！ただまだベストアンサーには選べません、ごめんなさい、(他の質問で完全に解決していないのにえらんではだめだと怒られてしまったので)

[退会済みユーザー]

ご丁寧にコメントありがとうございます。

プロフィールから過去の質問を見ましたが、今回の質問は一連の流れの中の最後の質問だったのですね。
それを把握したら、今回の質問に対する回答も適切じゃない気がしてきましたので、後で修正・追記しようと思います。
(過去の受付中の質問も回答できそうでしたら回答してみようと思います)

[mariko68311]

おお、とても助かっています！また少しずつ進めているので、わからないところがあったらよろしくお願いします！