Q&A
前提
ここに質問の内容を詳しく書いてください。
(例)
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件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/01/11 08:42
2023/01/11 09:22 編集