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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

Q&A

1回答

688閲覧

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

shiro05270

総合スコア7

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

0グッド

0クリップ

投稿2018/03/20 05:02

編集2022/01/12 10:55

前提・実現したいこと

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>

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

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

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

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

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

k.tada

2018/03/20 05:12

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

2018/03/20 06:21

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

回答1

0

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

js

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

投稿2018/03/20 05:19

turbgraphics200

総合スコア4267

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

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

shiro05270

2018/03/20 06:00 編集

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

2018/03/20 06:05

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

2018/03/20 06:29

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

2018/03/20 10:07

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問