前提・実現したいこと
node.js初心者です。
現在、単一PC内でnode.jsによるサーバ側のコードがひとつあります。
それを2つのコンソールをたちあげて、パラメータをそれぞれ変えて走らせることで2つのwebサーバ(意味が違ったらすみません。)をたててるつもりでいます。それら2つのサーバの演算結果をブラウザの1つのタブ内でどちらもリアルタイムに表示できるようにしたいです。(そのため、調べてでてきたsocket.ioを使ってみています。)
もっと砕けて言えば、あるものを使ったゲームの1P側用の情報表示と2P側用の情報表示をリアルタイムに1つのブラウザのタブで表示したいということです。
ここに質問の内容を詳しく書いてください。
いろいろ調べてみても、webページ側(クライアント)が複数でサーバが1つの場合はあっても、複数のサーバの情報を1つのポートを使ったクライアントにまとめて表示する方法がでてこず困っています。
仕方なく現在は、以下に示すコードのようにコマンドライン引数の違いでポート番号を変えて、ブラウザ(chrome version:64.0.3282.186(64 ビット))のタブを2つ使ってそれぞれのサーバの演算結果をリアルタイムに表示させています。
現状、このサーバ側用のコード単体の中で複数人の情報をまとめられていればいいのですが現実的に1つのコンソールで走らせる分で1人分の操作しかできないためこのような問題に直面しています。そのため、サーバ側のコードを一つ走らせるだけで複数人分の操作をまかなえるようにすればよいということは対応が難しいです。
これをひとつのタブにまとめて表示できるようにするにはどうしたらいいでしょうか?
いかに参考に現在のコードの一部を載せております。なにとぞご助力のほどよろしくお願いいたします。
該当のソースコード
サーバ側 server.js の一部(webサーバ立ち上げ、socket.io関連)
var port; if(process.argv[5] == 1) { port = 3000; }else if(process.argv[5] == 2) { port = 3001; } let express = require('express'); let http = require('http'); let app = express(); let server = http.createServer(app); //let io = require('socket.io').listen(app.listen(3000)); let io = require('socket.io').listen(server); app.use(express.static(__dirname)); server.listen(port); app.get('/', (req, res)=> { res.sendFile(__dirname + '/views/index.html'); }); var webflag = false; io.sockets.on('connection', function(){ webflag = true; }); var intervalID = setInterval(() => { //console.log('Interval'); if(webflag){ if(process.argv[5] == 1){ io.sockets.emit('data1', {player:"1p", hp:HP, mp:mp}); } else if(process.argv[5] == 2) { io.sockets.emit('data1', {player:"2p", hp:HP, mp:mp}); } } }, 500);
クライアント側 index.html
<!DOCTYPE html> <html> <head> </head> <body> <p id="player"><em></em></p> <div id="hp"></div> <div id="gmp"></div> <!--追加--> <script src="/socket.io/socket.io.js"></script> <script type="text/javascript"> var socket = io(); //const io = require('socket.io-client'); //var socket = io.connect(); socket.on('data1', function(data){ var player = document.getElementById('player'); var hp = document.getElementById('hp'); var gmp = document.getElementById('mp'); player.innerHTML = data.player; hp.innerHTML = Math.round(data.hp); gmp.innerHTML = data.mp; }); </script> </body> </html>