ボードゲームの駒の座標をsocket.ioで伝達処理したい。

私は通信対戦ができるボードゲームの作成をしているのですが、相手の駒と自分の駒の座標をsocket.ioを駆使して伝達し、通信対戦を実現したいと考えているのですが、どのようにして伝達処理をかけばいいかわかりません。誰かわかる方はいらっしゃいませんか？

発生している問題

下に表記していますが、型組になるであろうものまではできたのですが、
ここから何を書き足していけばいいかがわかりません。
根本からちがう可能性もありますが、

該当のソースコード

一部プログラムは関係ないため省いて記載しています。

js
1//server.js
2const socketPerRoom = 2
3let socketCount = 0
4
5io.on("connection", (socket) => {
6    console.log(`connection socket.id: ${socket.id}`)
7    socket.on("join", () => {
8        socketCount++
9        const room = `room${Math.ceil(socketCount / socketPerRoom)}`
10        const num = socketCount % 2
11        // ソケットをルームに追加する
12        socket.join(room)
13        console.log(`join socket.id: ${socket.id}, socket.rooms: ${JSON.stringify([...socket.rooms])}`)
14        // ルーム全体に送信する(最大2つのソケット)
15        io.to(room).emit("joined", socket.id, room, num)
16    })
17    //駒の座標を送る(予定)
18    socket.on("koma", (barr, warr) => {
19      io.sockets.emit("sou", barr, warr)
20    })
21})

pug
1//play1.pug
2script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
3
4script.
5var barr = [1101,1102,1103,1104,1105,1106,1205,1204,1203,1202,1201];
6var warr = [2107,2108,2109,2110,2111,2112,2211,2210,2209,2208,2207];
7
8socket.emit("koma", warr);
9      socket.on("sou", (barr) => {
10        
11      });

pug
1//play2.pug
2script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
3
4script.
5var barr = [1101,1102,1103,1104,1105,1106,1205,1204,1203,1202,1201];
6var warr = [2107,2108,2109,2110,2111,2112,2211,2210,2209,2208,2207];
7
8socket.emit("koma", barr);
9      socket.on("sou", (warr) => {
10        
11      });

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

回答1件

イベントのemitとonの流れは大丈夫そうですね。

細かい処理に関しまして、いくつかコードのコメントとして書いてみました。

js
1// server.js
2//駒の座標を送る(予定)
3socket.on("koma", (barr, warr) => {
4    io.sockets.emit("sou", barr, warr)
5    // `io.sockets.emit`だとルーム内ではなく全体に送信されてしまいますので、ルームを指定して送信することになると思います。
6    // この時のルームの名前は、駒の座標と一緒にクライアントから送信してもらう形とかになると思います。
7    // io.to(room).emit("sou", barr, warr)
8})

pug
1//- play1.pug
2//- サーバー側の「koma」ではbarrとwarrの2つの引数を受け取ることになっていますので、クライアント側からもbarrとwarrの2つの引数を送信します(「sou」も同様です)。
3//- socket.emit("koma", barr, warr);
4//- socket.on("sou", (barr, warr) => {
5socket.emit("koma", warr);
6socket.on("sou", (barr) => {
7
8});

イベントの引数については次のページが参考になると思います。
Basic emit
https://socket.io/docs/v4/emitting-events/#basic-emit

前の質問の段階でちょっと問題があったようでして、
クライアント側のSocket.IOのインスタンス(socket変数)はページ遷移してしまうと消えてしまいます。
同じルームに2人が追加されたのに、ページ遷移すると同じルームの人として扱うことができなくなってしまいます。
インスタンスの生成のオプションがあるか調べましたが、次のリンクにはそのような内容は見当たりませんでした。

Client options (IO factory options)
https://socket.io/docs/v4/client-options/

基本的にはSocket.IO接続したら、ページ遷移せずに、シングルページで扱う実装方針が良い印象でした。

play1.pugとplay2.pugは見た目や動きが全く異なるものになるでしょうか？
共通の実装にすると問題が出てしまいますでしょうか？

追記(2022/02/17)

matching.pugから/playに遷移して、サーバー側でplay1.pugとplay2.pugに振り分けるサンプルを作ってみました。
play1.pugとplay2.pugの初期表示時にSocket.IOで接続してルームに追加します。
上の方にあるテキストボックスを入力して、ボタンをクリックすると駒の座標を送信します。
(テストのためbarr、warr配列の1つ目だけを入れ替えて送信してみました)
サーバー側では駒の座標を受け取って、ルームの中の人にそれらの情報を送信します。

js
1// app.js
2const express = require("express")
3const { createServer } = require("http")
4const { Server } = require("socket.io")
5
6const app = express()
7const httpServer = createServer(app)
8const io = new Server(httpServer, { /* options */ })
9const port = 3000
10
11app.set("view engine", "pug")
12
13app.get("/", (req, res) => {
14    res.render("index", { title: "Hey", message: "Hello there!" })
15})
16
17app.get("/matching", (req, res) => {
18    res.render("matching")
19})
20
21const socketPerRoom = 2
22let socketCount = 0
23
24app.get("/play", (req, res) => {
25    // ルームを決定してplay1.pugとplay2.pugに振り分ける
26    socketCount++
27    const room = `room${Math.ceil(socketCount / socketPerRoom)}`
28    const num = socketCount % 2 === 1 ? 1 : 2
29    const playView = `play${num}`
30    res.render(playView, { room, num })
31})
32
33io.on("connection", (socket) => {
34    console.log(`connection socket.id: ${socket.id}`)
35    socket.on("join", (room, num) => {
36        socket.join(room)
37        console.log(`join socket.id: ${socket.id}, socket.rooms: ${JSON.stringify([...socket.rooms])}`)
38        io.to(room).emit("joined", socket.id, room, num)
39    })
40    socket.on("koma", (barr, warr, room, num) => {
41        console.log(`barr: ${barr}, warr: ${warr}, room: ${room}, num: ${num}`)
42        io.to(room).emit("sou", barr, warr, num)
43    })
44})
45
46httpServer.listen(port, () => {
47    console.log(`Example app listening on port ${port}`)
48})

pug
1//- matching.pug
2html
3    head
4        meta(charset="utf-8")
5        title= "matching"
6    body
7        h1= "matching"
8        a(href="play") フリーマッチングする

pug
1//- play1.pug
2html
3    head
4        meta(charset="utf-8")
5        title= "play1"
6        script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
7    body
8        h1= "play1"
9        div
10            input#text1(type="text", value="1234")
11        div
12            button#button1(type="button") 送信する
13        ul#ul1
14            li= "接続中です。ルーム：" + room + "、プレイヤー：" + num
15        script.
16            window.addEventListener("DOMContentLoaded", () => {
17                //-- ビューのローカル変数をJavaScriptで参照する
18                const room = "#{room}"
19                const num = #{num}
20
21                const socket = io()
22                socket.on("connect", () => {
23                    append(`接続しました。ソケットID：${socket.id}`)
24                })
25                socket.on("disconnect", () => {
26                    console.log(`disconnect: ${socket.id}`)
27                })
28                socket.on("joined", (socketId, roomName, playerNum) => {
29                    append(`ルームに追加されました。ソケットID：${socketId}、ルーム：${roomName}、プレイヤー：${playerNum}`)
30                })
31
32                var barr = [1101,1102,1103,1104,1105,1106,1205,1204,1203,1202,1201];
33                var warr = [2107,2108,2109,2110,2111,2112,2211,2210,2209,2208,2207];
34                const button1 = document.querySelector("#button1")
35                button1.addEventListener("click", () => {
36                    // プレイヤー1はbarrの要素の1つ目を変更して送信
37                    const text1 = document.querySelector("#text1")
38                    const b = [text1.value, ...barr.slice(1)]
39                    socket.emit("koma", b, warr, room, num)
40                })
41                socket.on("sou", (retbarr, retwarr, retnum) => {
42                    append(`プレイヤー${retnum}が送信しました。${retbarr}、${retwarr}`)
43                    barr = retbarr
44                    warr = retwarr
45                })
46
47                //- サーバーに送信する(ルームに追加するためのイベント)
48                socket.emit("join", room, num)
49                const append = text => {
50                    const li1 = document.createElement('li')
51                    li1.textContent = text
52                    const ul1 = document.querySelector("#ul1")
53                    ul1.append(li1)
54                }
55            })

pug
1//- play2.pug
2html
3    head
4        meta(charset="utf-8")
5        title= "play2"
6        script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
7    body
8        h1= "play2"
9        div
10            input#text1(type="text", value="2234")
11        div
12            button#button1(type="button") 送信する
13        ul#ul1
14            li= "接続中です。ルーム：" + room + "、プレイヤー：" + num
15        script.
16            window.addEventListener("DOMContentLoaded", () => {
17                //-- ビューのローカル変数をJavaScriptで参照する
18                const room = "#{room}"
19                const num = #{num}
20
21                const socket = io()
22                socket.on("connect", () => {
23                    append(`接続しました。ソケットID：${socket.id}`)
24                })
25                socket.on("disconnect", () => {
26                    console.log(`disconnect: ${socket.id}`)
27                })
28                socket.on("joined", (socketId, roomName, playerNum) => {
29                    append(`ルームに追加されました。ソケットID：${socketId}、ルーム：${roomName}、プレイヤー：${playerNum}`)
30                })
31
32                var barr = [1101,1102,1103,1104,1105,1106,1205,1204,1203,1202,1201];
33                var warr = [2107,2108,2109,2110,2111,2112,2211,2210,2209,2208,2207];
34                const button1 = document.querySelector("#button1")
35                button1.addEventListener("click", () => {
36                    // プレイヤー2はwarrの要素の1つ目を変更して送信
37                    const text1 = document.querySelector("#text1")
38                    const w = [text1.value, ...warr.slice(1)]
39                    socket.emit("koma", barr, w, room, num)
40                })
41                socket.on("sou", (retbarr, retwarr, retnum) => {
42                    append(`プレイヤー${retnum}が送信しました。${retbarr}、${retwarr}`)
43                    barr = retbarr
44                    warr = retwarr
45                })
46
47                //- サーバーに送信する(ルームに追加するためのイベント)
48                socket.emit("join", room, num)
49                const append = text => {
50                    const li1 = document.createElement('li')
51                    li1.textContent = text
52                    const ul1 = document.querySelector("#ul1")
53                    ul1.append(li1)
54                }
55            })

動かした時のイメージです。
2つのウィンドウを用意して、それぞれmatching.pugを表示、それぞれ「フリーマッチングする」をクリックしてページ遷移します。

投稿2022/02/16 00:11

編集2022/02/17 06:27

退会済みユーザー

総合スコア0

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

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

発生している問題

該当のソースコード

追記(2022/02/17)

関連した質問