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

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

ただいまの
回答率

87.49%

複数webサーバをたてて、それらのリアルタイムに変化する演算結果を1つのクライアント側htmlに情報をまとめたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,043

score 7

 前提・実現したいこと

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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • k.tada

    2018/03/20 14:12

    コード部分はコードブロック(バッククォート3つ)で囲ってください

    キャンセル

  • shiro05270

    2018/03/20 15:21

    使い方がわかっておりませんでした。ご指摘ありがとうございます。

    キャンセル

回答 1

0

Socket.IO使ってるなら、クライアント側でサーバー分のソケットを作成すればできるのでは?

const socketA = io('ws://serverA');
const socketB = io('ws://serverB');

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/20 14:59 編集

    早速の回答ありがとうございます!
    知識不足で大変申し訳ないのですが、サーバー側のコードをはしらせたときに、指定する'ws://serverA'などとかく部分に何を書いてあげればいいのかをどうやって知ればいいのかがわかりません。。
    回答をいただけると助かります。

    キャンセル

  • 2018/03/20 15:05

    ちなみにサーバ側はlocalhostでしています。

    キャンセル

  • 2018/03/20 15:29

    重ね重ね申し訳ないのですが、仮にソケットを二つ設けることができたとして、そのクライアント側のリアルタイムに変化するページへのアクセスはどのようにしたらいいのかもわからないです。
    例えば、今までのものであればポート番号を3000で指定していたので、chromeにてlocalhost:3000と打てばアクセスできましたが複数あった場合どのようにアクセスするかよくわかりません。

    キャンセル

  • 2018/03/20 19:07

    どちらか一方は、ポートを変えてsocket.ioのみのサーバーにすればOK。

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • トップ
  • JavaScriptに関する質問
  • 複数webサーバをたてて、それらのリアルタイムに変化する演算結果を1つのクライアント側htmlに情報をまとめたい