Webアプリの処理が共有されてしまう

Question

Webアプリ制作初心者です．
node.js + herokuでWebアプリを作成しています．
サーバーサイド(node.js)で，あるサービスのAPIへアクセスし，それをJavaScriptでブラウザ上に描画するというものです．

デプロイしたURLで，正常にアプリは動いたのですが，全てのURLで処理が共有されてしまいます．
例えば，2つのタブでWebアプリを開いて，一方のタブで描画処理を行った場合，もう一方のタブでも描画処理が行われてしまいます．
処理をユーザーごと，もしくはタブごとに分けたいのですが，どのような方法があるでしょうか．
ご教授お願いいたします．

コードを追加しました．　2021/5/14 11:10

var socketio = io();
$(function(){
   $('#message_form').submit(function(){
       socketio.emit('message', "***"); //ブラウザでボタンが押されたらメッセージを送る
   });
   socketio.on('output',function(msg){ //Nodeから返されたjsonを描画
      draw(msg); //描画関数
   });
});

var express = require('express');
var app = express();
var http = require('http').Server(app);
const io = require('socket.io')(http);
const PORT = process.env.PORT || 7000;

app
    .get('/', (req, res) => res.sendFile(__dirname+'/index.html'))
    .use("/static", express.static(__dirname + "/static"))

http.listen(PORT, function(){
    console.log('server listening. Port:' + PORT);
});

io.on('connection',function(socket){
    socket.on('message',function(msg){
        get_json(); //ブラウザでボタンが押されたらget_json()を実行
    });
});

const axios = require('axios');
var fs = require('fs');
var masterData_output = "";

function get_json(){ //APIへアクセスしてjsonを取得
    (async () => {
        try {
            const response = await axios.get("api-url", { 
                headers: {
                    Cookie: "connect.sid=***"
                },
            });
            masterData_output = JSON.stringify(response.data, null, ' ');
            io.emit('output', masterData_output);
        } catch (error) {
            console.log(error);
        }
    })();
}

Comments

[maisumakun]

どのようなコードを書いたのでしょうか？

[mi_ho]

ご依頼ありがとうございます．
コードを追記しました．
不足があればお申し付けください．

[AbeTakashi]

ご自分で書かれたコードですか？　普通にSocket.IOを使ってるので、むしろその動作が通常に思えますが・・・　Socket.IOを使ってる理由はなんでしょうか？

[mi_ho]

TakashiAbeさん，ありがとうございます．
Node.jsをWebサーバとして使用する際に，レンダリングをするJavaScriptと通信する手段を調べて，Socket.IOに行き着きました．
Socket.IOを使うと，全てのURLで処理が行われてしまうのでしょうか？

[mi_ho]

追記：コードは自分で書いたものです．

[AbeTakashi]

なるほど、Socket.IOは単純に使うと接続してるすべてのコネクションに同じようにデータを返してしまうので、「個を識別して必要な人だけにデータを送信する仕組み」を考えて入れないとそういう挙動になりがちです。単純なチャットアプリをつくるにしてもそのような実装をしないと使い勝手の悪いチャットになります。なので、そういう実装を目指すべきかと思います。ちょっといじればいけるはずですけどね。

参考）
https://blog.katsubemakito.net/nodejs/socketio/realtime-chat2

[mi_ho]

TakashiAbeさん，ご助言ありがとうございます！
Socket.IOについて調べなおしてみます！

[mi_ho]

TakashiAbeさん
参考にいただいた記事を読みました．この方針でいけそうです．
ありがとうございました．

TakashiAbeさんのコメントをベストアンサーにさせていただきたいのですが，「質問への追記・修正の依頼」のコメントにはベストアンサーをつけられないようです．
お手数ですが，同じ内容を回答として投稿していただくことは可能でしょうか．

[AbeTakashi]

ヒントしかお伝えしてないので、同じような悩みを持つ人のために可能な範囲で解決したソースコードを共有して頂き自己解決としていただくのがベストかと思います！

[mi_ho]

TakashiAbeさん
ありがとうございます！
では自分で頑張ってみて，自己解決を書き込もうと思います．

[mi_ho]

アドバイスいただいた方法で解決できたので，自己解決書き込みました！
ありがとうございました！

Answer 1

「質問への追記・修正の依頼」にて，TakashiAbeさんにユーザーを識別してsocket.io通信を行う方法についてアドバイスいただきました．
こちらを参考にコードを書き換えたところ，トークンを用いてユーザーを識別し，必要な人にだけデータの送信を行うことができました！
アドバイスくださった方々，ありがとうございました！

参考にしたWebページ

変更したところにコメントをつけています↓

var socketio = io();
$(function(){
   $('#message_form').submit(function(){
       socketio.emit("message", {
          text: ***,
          token: socketio.id //socketio.id(トークン)を送信
       });
   });
   socketio.on('output',function(msg){ 
      draw(msg);
   });
});

io.on('connection',function(socket){
    socket.on('message',function(msg){
        get_json(msg.token);
    });
});

const axios = require('axios');
function get_json(token){
    (async () => {
        try {
            const response = await axios.get("api-url", { 
                headers: {
                    Cookie: "connect.sid=***"
                },
            });
　　　　　　　io.to(token).emit("output", response.data); //トークンを指定して送信
        } catch (error) {
            console.log(error);
        }
    })();
}

※Nodeは変更に関連する部分のみ