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

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

新規登録して質問してみよう
ただいま回答率
86.12%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

解決済

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

mariko68311
mariko68311

総合スコア10

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

1回答

0リアクション

0クリップ

595閲覧

投稿2022/01/26 15:21

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

実現したいこと

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

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

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

該当のソースコード

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

pug

#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`); });

js

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/

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

xg63ex2b

2022/01/28 08:50

まだ回答がついていないようでしたのでコメントしてみます。 > 修正前と何も変わらない。おそらく打ち込んだプログラムが完全にスルーされている。 > pugファイルの二つあるscript文を一つにまとめようとするとポップアップのスタートを押せなくなってしまった。 変わらないのか、押せなくなってしまった(変わった)のか、状況が正しく把握できませんでした・・ 「スルーされている」の状況をもう少し具体的にご記載いただくと良いかもしれません。 > 下記に記述したサイトを参考にしてプログラムを組み込もうとしても修正前と何も変わらない。おそらく打ち込んだプログラムが完全にスルーされている。読み込んでいないということでエラーメッセージもログも何も出てこないので何がどう間違っているという判別もつけられない。 「修正前」というのは参考にしたサイトの通りに作った状態でしょうか? この状態では動くのが確認できているということですかね。 一旦、この状態に戻した方が良いのかもしれません。 `socket.join(barr);`のように、サーバー側でクライアント側の変数を使おうとしてしまっているようですので、 サーバーか、クライアントか、どちらかを意識して少しずつ修正していくのが良さそうに思いました。 https://socket.io/docs/v4/server-api https://socket.io/docs/v4/client-api
mariko68311

2022/01/29 16:54

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

2022/01/29 16:56

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

2022/01/29 16:58

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。