javascript - 快速发送新的 HTML 页面，无需重定向

Question

我目前有一个使用node.js +express +socket.io 的登录页面。有没有办法在不重定向客户端的情况下向客户端发送新的 HTML 页面？ (即留在 www.dns.com 与 www.dns.con/home)。我尝试了 res.sendFile，但是客户端看不到接受新的 HTML 文件。

当前代码

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html'); //sets initial HTML page
});

io.on('connection', function (socket) {
    socket.on('login', function (username) {
        if (username === 'user')
        {
            console.log("Login Sucessful");
            app.get('/', function (req, res) { 
                res.sendFile(__dirname + '/main.html'); //doesn't change HTML page
            });
        }
    });
});

http.listen(80, function () {
    console.log('listening on port 80');
});

Answer 1

通过运行

app.get('/', function (req, res) { 
    res.sendFile(__dirname + '/main.html'); //doesn't change HTML page
});

在该 if 中，您只是为将来的请求添加另一条路由，这不是您想要做的。在许多其他情况下，这并不是正确的做法。

您可以通过套接字发送 HTML 文件的内容，然后在客户端进行处理。有一个 javascript 函数，可以用给定的 HTML 内容替换整个页面。

或更有效的方法，只需发送文件的路径，然后在客户端使用 ajax 调用加载文件，然后用 ajax 调用的结果替换整个页面内容。

io.on('connection', function (socket) {
    socket.on('login', function (username) {
        if (username === 'user')
        {
            console.log("Login Sucessful");
            socket.send('replace-page', 'main.html'); // send the file name
        }
    });
});

在客户端，有一个函数正在监听 replace-page 事件。根据您使用的技术，您可以通过多种方式加载内容并替换页面。