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

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

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

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

Node.js

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

Socket.IO

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

解決済

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

mariko68311
mariko68311

総合スコア10

Pug

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

Node.js

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

Socket.IO

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

1回答

0リアクション

0クリップ

366閲覧

投稿2022/01/17 09:22

実現したいこと

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

発生している問題

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

該当のソースコード

js

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

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

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

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

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

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

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

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

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

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

sum6

2022/01/20 15:23

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

2022/01/22 22:40

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

2022/01/23 01:44

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

2022/01/25 03:12

一部は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を呼び出す処理を書きたいと考えています。
sum6

2022/01/25 05:46

補足ありがとうございます! 素敵なゲームになりそうですね ところで、今のエラーはどんな内容が出ていますか? エラーの出ている内容をぐぐったりすると、解決しやすいです
mariko68311

2022/01/25 06:08

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

2022/01/25 07:59

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

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Pug

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

Node.js

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

Socket.IO

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。