回答編集履歴
1
サンプルのコードを追記しました。
test
CHANGED
|
@@ -44,3 +44,193 @@
|
|
|
44
44
|
play1.pugとplay2.pugは見た目や動きが全く異なるものになるでしょうか？
|
|
45
45
|
共通の実装にすると問題が出てしまいますでしょうか？
|
|
46
46
|
|
|
47
|
+
|
|
48
|
+
## 追記(2022/02/17)
|
|
49
|
+
|
|
50
|
+
matching.pugから/playに遷移して、サーバー側でplay1.pugとplay2.pugに振り分けるサンプルを作ってみました。
|
|
51
|
+
play1.pugとplay2.pugの初期表示時にSocket.IOで接続してルームに追加します。
|
|
52
|
+
上の方にあるテキストボックスを入力して、ボタンをクリックすると駒の座標を送信します。
|
|
53
|
+
(テストのためbarr、warr配列の1つ目だけを入れ替えて送信してみました)
|
|
54
|
+
サーバー側では駒の座標を受け取って、ルームの中の人にそれらの情報を送信します。
|
|
55
|
+
|
|
56
|
+
```js
|
|
57
|
+
// app.js
|
|
58
|
+
const express = require("express")
|
|
59
|
+
const { createServer } = require("http")
|
|
60
|
+
const { Server } = require("socket.io")
|
|
61
|
+
|
|
62
|
+
const app = express()
|
|
63
|
+
const httpServer = createServer(app)
|
|
64
|
+
const io = new Server(httpServer, { /* options */ })
|
|
65
|
+
const port = 3000
|
|
66
|
+
|
|
67
|
+
app.set("view engine", "pug")
|
|
68
|
+
|
|
69
|
+
app.get("/", (req, res) => {
|
|
70
|
+
res.render("index", { title: "Hey", message: "Hello there!" })
|
|
71
|
+
})
|
|
72
|
+
|
|
73
|
+
app.get("/matching", (req, res) => {
|
|
74
|
+
res.render("matching")
|
|
75
|
+
})
|
|
76
|
+
|
|
77
|
+
const socketPerRoom = 2
|
|
78
|
+
let socketCount = 0
|
|
79
|
+
|
|
80
|
+
app.get("/play", (req, res) => {
|
|
81
|
+
// ルームを決定してplay1.pugとplay2.pugに振り分ける
|
|
82
|
+
socketCount++
|
|
83
|
+
const room = `room${Math.ceil(socketCount / socketPerRoom)}`
|
|
84
|
+
const num = socketCount % 2 === 1 ? 1 : 2
|
|
85
|
+
const playView = `play${num}`
|
|
86
|
+
res.render(playView, { room, num })
|
|
87
|
+
})
|
|
88
|
+
|
|
89
|
+
io.on("connection", (socket) => {
|
|
90
|
+
console.log(`connection socket.id: ${socket.id}`)
|
|
91
|
+
socket.on("join", (room, num) => {
|
|
92
|
+
socket.join(room)
|
|
93
|
+
console.log(`join socket.id: ${socket.id}, socket.rooms: ${JSON.stringify([...socket.rooms])}`)
|
|
94
|
+
io.to(room).emit("joined", socket.id, room, num)
|
|
95
|
+
})
|
|
96
|
+
socket.on("koma", (barr, warr, room, num) => {
|
|
97
|
+
console.log(`barr: ${barr}, warr: ${warr}, room: ${room}, num: ${num}`)
|
|
98
|
+
io.to(room).emit("sou", barr, warr, num)
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
|
|
102
|
+
httpServer.listen(port, () => {
|
|
103
|
+
console.log(`Example app listening on port ${port}`)
|
|
104
|
+
})
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
```pug
|
|
108
|
+
//- matching.pug
|
|
109
|
+
html
|
|
110
|
+
head
|
|
111
|
+
meta(charset="utf-8")
|
|
112
|
+
title= "matching"
|
|
113
|
+
body
|
|
114
|
+
h1= "matching"
|
|
115
|
+
a(href="play") フリーマッチングする
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
```pug
|
|
119
|
+
//- play1.pug
|
|
120
|
+
html
|
|
121
|
+
head
|
|
122
|
+
meta(charset="utf-8")
|
|
123
|
+
title= "play1"
|
|
124
|
+
script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
|
|
125
|
+
body
|
|
126
|
+
h1= "play1"
|
|
127
|
+
div
|
|
128
|
+
input#text1(type="text", value="1234")
|
|
129
|
+
div
|
|
130
|
+
button#button1(type="button") 送信する
|
|
131
|
+
ul#ul1
|
|
132
|
+
li= "接続中です。ルーム：" + room + "、プレイヤー：" + num
|
|
133
|
+
script.
|
|
134
|
+
window.addEventListener("DOMContentLoaded", () => {
|
|
135
|
+
//-- ビューのローカル変数をJavaScriptで参照する
|
|
136
|
+
const room = "#{room}"
|
|
137
|
+
const num = #{num}
|
|
138
|
+
|
|
139
|
+
const socket = io()
|
|
140
|
+
socket.on("connect", () => {
|
|
141
|
+
append(`接続しました。ソケットID：${socket.id}`)
|
|
142
|
+
})
|
|
143
|
+
socket.on("disconnect", () => {
|
|
144
|
+
console.log(`disconnect: ${socket.id}`)
|
|
145
|
+
})
|
|
146
|
+
socket.on("joined", (socketId, roomName, playerNum) => {
|
|
147
|
+
append(`ルームに追加されました。ソケットID：${socketId}、ルーム：${roomName}、プレイヤー：${playerNum}`)
|
|
148
|
+
})
|
|
149
|
+
|
|
150
|
+
var barr = [1101,1102,1103,1104,1105,1106,1205,1204,1203,1202,1201];
|
|
151
|
+
var warr = [2107,2108,2109,2110,2111,2112,2211,2210,2209,2208,2207];
|
|
152
|
+
const button1 = document.querySelector("#button1")
|
|
153
|
+
button1.addEventListener("click", () => {
|
|
154
|
+
// プレイヤー1はbarrの要素の1つ目を変更して送信
|
|
155
|
+
const text1 = document.querySelector("#text1")
|
|
156
|
+
const b = [text1.value, ...barr.slice(1)]
|
|
157
|
+
socket.emit("koma", b, warr, room, num)
|
|
158
|
+
})
|
|
159
|
+
socket.on("sou", (retbarr, retwarr, retnum) => {
|
|
160
|
+
append(`プレイヤー${retnum}が送信しました。${retbarr}、${retwarr}`)
|
|
161
|
+
barr = retbarr
|
|
162
|
+
warr = retwarr
|
|
163
|
+
})
|
|
164
|
+
|
|
165
|
+
//- サーバーに送信する(ルームに追加するためのイベント)
|
|
166
|
+
socket.emit("join", room, num)
|
|
167
|
+
const append = text => {
|
|
168
|
+
const li1 = document.createElement('li')
|
|
169
|
+
li1.textContent = text
|
|
170
|
+
const ul1 = document.querySelector("#ul1")
|
|
171
|
+
ul1.append(li1)
|
|
172
|
+
}
|
|
173
|
+
})
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
```pug
|
|
177
|
+
//- play2.pug
|
|
178
|
+
html
|
|
179
|
+
head
|
|
180
|
+
meta(charset="utf-8")
|
|
181
|
+
title= "play2"
|
|
182
|
+
script(src="https://cdn.socket.io/4.4.1/socket.io.min.js", integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H", crossorigin="anonymous")
|
|
183
|
+
body
|
|
184
|
+
h1= "play2"
|
|
185
|
+
div
|
|
186
|
+
input#text1(type="text", value="2234")
|
|
187
|
+
div
|
|
188
|
+
button#button1(type="button") 送信する
|
|
189
|
+
ul#ul1
|
|
190
|
+
li= "接続中です。ルーム：" + room + "、プレイヤー：" + num
|
|
191
|
+
script.
|
|
192
|
+
window.addEventListener("DOMContentLoaded", () => {
|
|
193
|
+
//-- ビューのローカル変数をJavaScriptで参照する
|
|
194
|
+
const room = "#{room}"
|
|
195
|
+
const num = #{num}
|
|
196
|
+
|
|
197
|
+
const socket = io()
|
|
198
|
+
socket.on("connect", () => {
|
|
199
|
+
append(`接続しました。ソケットID：${socket.id}`)
|
|
200
|
+
})
|
|
201
|
+
socket.on("disconnect", () => {
|
|
202
|
+
console.log(`disconnect: ${socket.id}`)
|
|
203
|
+
})
|
|
204
|
+
socket.on("joined", (socketId, roomName, playerNum) => {
|
|
205
|
+
append(`ルームに追加されました。ソケットID：${socketId}、ルーム：${roomName}、プレイヤー：${playerNum}`)
|
|
206
|
+
})
|
|
207
|
+
|
|
208
|
+
var barr = [1101,1102,1103,1104,1105,1106,1205,1204,1203,1202,1201];
|
|
209
|
+
var warr = [2107,2108,2109,2110,2111,2112,2211,2210,2209,2208,2207];
|
|
210
|
+
const button1 = document.querySelector("#button1")
|
|
211
|
+
button1.addEventListener("click", () => {
|
|
212
|
+
// プレイヤー2はwarrの要素の1つ目を変更して送信
|
|
213
|
+
const text1 = document.querySelector("#text1")
|
|
214
|
+
const w = [text1.value, ...warr.slice(1)]
|
|
215
|
+
socket.emit("koma", barr, w, room, num)
|
|
216
|
+
})
|
|
217
|
+
socket.on("sou", (retbarr, retwarr, retnum) => {
|
|
218
|
+
append(`プレイヤー${retnum}が送信しました。${retbarr}、${retwarr}`)
|
|
219
|
+
barr = retbarr
|
|
220
|
+
warr = retwarr
|
|
221
|
+
})
|
|
222
|
+
|
|
223
|
+
//- サーバーに送信する(ルームに追加するためのイベント)
|
|
224
|
+
socket.emit("join", room, num)
|
|
225
|
+
const append = text => {
|
|
226
|
+
const li1 = document.createElement('li')
|
|
227
|
+
li1.textContent = text
|
|
228
|
+
const ul1 = document.querySelector("#ul1")
|
|
229
|
+
ul1.append(li1)
|
|
230
|
+
}
|
|
231
|
+
})
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
動かした時のイメージです。
|
|
235
|
+
2つのウィンドウを用意して、それぞれmatching.pugを表示、それぞれ「フリーマッチングする」をクリックしてページ遷移します。
|
|
236
|
+
|