NodeJS Express Routing - 僅呈現第一個請求

Question

在服務器腳本中，我嘗試提供不同的 html 文件。 當 app.post('/login'...) 進來時， res.sendFile() 正在工作並且 html 被呈現。 在第二次調用時，當 app.get('/go') 進來時，文件被提供，但不顯示。 我無法解釋為什么不顯示第二個 HTML 文件。 我究竟做錯了什么？

第二個請求來自 javascript 中的 fetch 請求

 socket.on('gameStarted', (data) => { console.log("Game started"); fetch('/go', {method: 'GET'}); })

已提供但未顯示

 app.post('/login', async (req, res, next) => { var roomNR = req.body.player.gameCode; var playerName = req.body.player.nickname; var codeValid = await checkCode(activeRoomsCollection, gameCodes, roomNR); var playerExists = await playerCollection.findOne({ playerName: playerName }) if (codeValid) { if ((playerExists === null) || !playerExists) { playerCollection.insertOne({ room: roomNR, playerName: playerName, state: false }); console.log(`Added player '${playerName}' with roomnumber '${roomNR}'`); res.sendFile(path.join(__dirname + '/../../public/lobby.html'), function (err) { if (err) { console.log(err); res.status(err.status).end(); } else { console.log('Sent Lobby'); } }); } else { // updateDomElement(player, elementId, data) //res.send('Benutzername existiert bereits'); } } else { res.send('Code ungültig'); } }); app.get('/go', (req, res, next ) => { res.sendFile(path.join(__dirname + '/../../public/raetsel1.html'), function (err) { if (err) { console.log(err); res.status(err.status).end(); } else { console.log('Sent Raetsel1'); } }); });

Answer 1

fetch()從不單獨顯示任何內容。 這是您的 Javsascript 向遠程服務器發出 http 請求，然后這些服務器將內容返回給您的 Javascript 的一種方式。 這些 http 請求的結果只會發送到您的 Javascript。 頁面視圖中的任何內容都不會受到fetch()調用的影響。

如果您希望fetch()調用的結果在頁面中顯示某些內容，則需要編寫 Javascript 來執行此操作（將內容插入當前頁面）。

相反，如果您只想讓瀏覽器轉到新頁面，請更改以下內容：

fetch('/go', {method: 'GET'});

對此：

window.location = "/go";

這將導致瀏覽器轉到 URL，檢索內容並顯示它。 這將關閉當前頁面並加載並顯示一個新頁面，瀏覽器中 URL 欄中的 URL 將顯示更新的位置。

請注意，如果您在兩個頁面中都有 socket.io 代碼，它將斷開當前的 socket.io 連接，然后在新頁面中運行 Javascript - 導致它創建一個新的 socket.io 連接（如果您在新頁面中有代碼）頁面來執行此操作），因為當您在瀏覽器中加載和顯示新網頁時，socket.io 連接會發生這種情況。