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

前提

ここに質問の内容を詳しく書いてください。
（例）
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>

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

回答1件

ベストアンサー

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

下記コードの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'`ができていないなどなどが考えられます。原始的には、それぞれにログを仕込んで、ちゃんと動作しているか確認できます。ご参考までに...!

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