socket.ioを使用して同じサーバで違うHTMLファイルを扱いたい

Question

前提

socket.io(サーバサイド)とhtml・javascript(クライアントサイド)を使用して並び替えを行うシステムを作っています。
ファイルのディレクトリは以下のようになっています。

server.jsでDragAndDrop1.htmlを指定しておき、html内の「回答する」ボタンを押した後にDragAndDrop2.htmlに移行するようなプログラムを考えています。その際、server.jsでDragAndDrop1.htmlを指定しているためDragAndDrop2に移行した際にサーバを用いた処理が行えない問題が発生しています。

実現したいこと

DragAndDrop1から2に移行する際にserver.jsもそれに応じてパスを変更するような処理を行いたい

該当のソースコード

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.Server(app);
const io = socketIo(server);

const PORT = 3000;

app.get('/',(req,res) => {
    res.sendFile(__dirname + '/DragAndDrop1.html');
}) ;

server.listen(PORT, () => {
    console.log(`listening on port ${PORT}`);
});

Answer 1

/エンドポイントではなく、/q1,/q2,/q3のようなGETのエンドポイントを作成し、
q1,q2,q3のそれぞれのページでは次のページ(q1ならq2, q2ならq3, q3なら回答全部を一覧表示するようなページ)を指定して作成するようなイメージで作ってみてはいかがでしょうか。
質問ページ表示はGET, 回答登録はPOSTとかで分ければexpress側もかき分けるのは簡単だと思います。

作ってみた後で、戻る機能を実装したくなった場合や、(単に上記で実装した場合は)直接URL欄にq3と入れられるとq3から始められてしまう問題なのが出てくる気がしますが、その場合、やりたいことが明確になっているはずなので、その通りに実装すれば良いと思います。

戻りたいからセッションを使ったり(ビュー側をReactなどでSPAとして実装してみたり)、直接飛ばれた場合は回答状況を参照してリダイレクトしたり、いろいろやることになると思いますが、とりあえず一番上のあたりをやるとイメージがつかめると思います。

Comments

[kinoko_0129]

回答ありがとうございます。上の意見を参考にしてやってみます。