使用 socket.io express js 更改页面答案

【问题标题】：Changing pages using socket.io express js使用 socket.io express js 更改页面
【发布时间】：2021-02-27 07:37:09
【问题描述】：

我看到过类似的问题，但仍然找不到我的问题的解决方案。我正在尝试使用 socket.io 但没有房间创建棋盘游戏。在第一页，玩家输入它应该被路由到下一页的名称。但这并没有发生。这是我的代码。 index.js：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));
var count = 0;
var users = {};
app.get('/', function (req, res) {
    res.render("Welcome");
});
app.get("/wait", function(req, res){
    res.render("Waiting");
});
io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('chat message', function (msg) {
        console.log('message: ' + msg);
        count++;
        users[msg] = socket.id;
        console.log(users);
        console.log(count);        //count = 1
    });
    socket.on('disconnect', function () {
        console.log('user disconnected');
    });
});
console.log(count); //count = 0
app.post('/', function(req, res){
    if(count === 1)
    {
        res.redirect('/wait');
    }    
});

http.listen(3000, function () {
    console.log("Server running on port 3000");
});

我希望它在 count=1 时转到 wait.ejs。如何解决计数问题？

欢迎.ejs：

<body>
    <h1>Welcome to Game</h1>
    <form action="/" method="post">
        <div class="form-group row">
            <label for="inputUsername" class="col-sm-2 col-form-label">Username</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputUsername" required />
                <button>Send</button>
            </div>
        </div>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            var socket = io();
            $('form').submit(function (e) {
                e.preventDefault(); // prevents page reloading
                socket.emit('chat message', $('#inputUsername').val());
                return false;
            });
        });
    </script>

</body>

到目前为止，我还没有添加任何 CSS。没有错误，但 app.post() 不起作用。

【问题讨论】：

标签： node.js express socket.io ejs

【解决方案1】：

我很确定是因为您取消了表单提交。聊天消息被发送，计数被更新，但实际表单没有被发布。您可以保持这样，但向 / 路由发出 ajax 请求（使用 fetch 或 axios）。或者只是删除 e.preventDefault() 但这会重新加载页面。

【讨论】：