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

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

新規登録して質問してみよう
ただいま回答率
85.48%
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アプリケーションを提供します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

639閲覧

socket.ioを用いて複数のクライアントが同時に画面遷移を行えるようにしたい

kinoko_0129

総合スコア6

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アプリケーションを提供します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/01/10 14:49

前提

ここに質問の内容を詳しく書いてください。
(例)
socket.ioを用いて複数のクライアントが同時に同じ操作を行えるようなシステムを作成しています。
現在、「次へ」ボタンを押すと指定したURLへ画面遷移するプログラムを作成しているのですが、1人のクライアントがボタンを押しても、もう片方のクライアントの画面が遷移しない問題が発生しています。

実現したいこと

「次へ」ボタンを押した際、指定したURLへ同時に複数のクライアントの画面遷移を行いたい

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

片方が画面遷移を行ってももう片方の画面が遷移しない(サーバの処理が間違っている?)

該当のソースコード

javascript(サーバサイド)

1const express = require('express'); 2const http = require('http'); 3const socketIo = require('socket.io'); 4 5const app = express(); 6const server = http.Server(app); 7const io = socketIo(server); 8 9const PORT = 3000; 10 11app.get('/',(req,res) => { 12 res.sendFile(__dirname + '/test.html'); 13}) ; 14 15app.get('/two',(req,res) => { 16 res.sendFile(__dirname + '/test2.html'); 17}) ; 18 19server.listen(PORT, () => { 20 console.log(`listening on port ${PORT}`); 21}); 22 23io.on('connection', (socket) => { 24 console.log('connected'); 25 26 socket.on('nextPage', function() { 27 socket.broadcast.emit('returnNextPage'); 28 }); 29 30});

html(クライアントサイド)

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8</head> 9<body> 10 <button id="btn-test" onclick="next()">次へ</button> 11 12 <!-- socket.io --> 13 <script src="/socket.io/socket.io.js"></script> 14 15 <script> 16 const socket = io(); 17 18 //「次へ」ボタンを押すと次の問題へ遷移 19 document.getElementById('btn-test').addEventListener('click', function() { 20 21 document.location.href = "http://localhost:3000/two"; 22 socket.emit('nextPage'); 23 }); 24 25 26 // サーバからページ更新した旨を受け取る 27 socket.on('returnNextPage', function() { 28 document.location.href = "http://localhost:3000/two"; 29 }); 30 31 </script> 32 33 34 35</body> 36</html>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

手元で確認したわけではないので予測ですが...

下記コードの2行目でページ遷移の処理が入っています。もしかすると、2行目が実行された時点でページ遷移が発生し、3行目は実行されていないのではないでしょうか?

js

1document.getElementById('btn-test').addEventListener('click', function() { 2 document.location.href = "http://localhost:3000/two"; 3 socket.emit('nextPage'); 4});

投稿2023/01/11 08:35

yuta_22

総合スコア181

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kinoko_0129

2023/01/11 08:42

回答ありがとうございます!2行目と3行目を入れ替えた結果想定どうりの処理になりました!
yuta_22

2023/01/11 09:22 編集

よかったです!デバッグする時は、どこまで処理が正しく進んでいるかを確認しながら、バグ箇所を絞り込むと良いかもしれません。今回だと、 1. `socket.emit`が正しく実行されていない 2. `socket.emit`が実行されているけど、リクエストが飛んでいない 3. `socket.emit`が実行されているけど、`socket.on`でキャッチ(検知)できていない 4. `socket.on`でキャッチできているけど、`socket.broadcast.emit`が実行されていない 5. `socket.broadcast.emit`が実行されているけど、`socket.on('returnNextPage'`ができていない などなどが考えられます。原始的には、それぞれにログを仕込んで、ちゃんと動作しているか確認できます。ご参考までに...!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問