Question

我正在尝试使用node.js / express / socket.io设置一个基本的聊天应用程序，但出于某种原因，当客户端发送消息时（这有效，另一个客户端将收到消息）它还会刷新客户端和url从localhost：3000转到localhost：3000 /？（添加/？结束，我不知道这意味着什么）。看了几个小时后，我的代码中找不到任何错误。我有：

server.js：

let app = require('express')();
let http = require('http').Server(app);
let io = require('socket.io')(http);
let port = process.env.PORT || 3000;

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

http.listen(port,() => { console.log('listening on *:' + port) });

    io.on('connection', socket => {
        socket.on('chat', text => {
        io.sockets.emit('chat', `<p>${text}</p>`);
    });

});

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<style>
    .chat_view{
        height: 300px;
        width: 200px;
        border: 5px ridge black;
        overflow-y: scroll;
    }
</style>
</head>
<body>
<div class="chat" id="chat">
    <div class="chat_view" id="chat_view">
    </div>
    <form id="chat_form">
        <input type="text" title="chat_input" id="chat_input" style="width: 206px">
    </form>
</div>
<script>
let socket = io();

$('#chat_form').submit( () => {
    let text = $('#chat_input').val();
    socket.emit('chat', text);
});

socket.on('chat', text => {
    let chat_view = document.getElementById('chat_view');
        chat_view.innerHTML += text;
        chat_view.scrollTop = chat_view.scrollHeight;
});

</script>
</body>
</html>

和package.json：

{
  "name": "RatScrew",
  "version": "0.0.1",
  "dependencies": {
    "express": "^4.15.3",
    "socket.io": "^2.0.2"
  }
}

Answer 1

如果您正在收听提交事件，则表示该表单将实际尝试POST并发送到服务器（在您的情况下将刷新屏幕）。如果您使用JavaScript与服务器通信并且不需要直接通过浏览器发布表单数据，则只需从回调中返回false。有些浏览器也希望你也可以调用e.preventDefault（）。

Answer 2

将您的代码更改为：

$('#chat_form').submit((event)=>{
    event.preventDefault();
    let text = $('#chat_input').val();
    socket.emit('chat', text);
});

提交表单时使用的默认方法是GET方法，它使服务器再次发送index.html并刷新页面。
您可能需要查看https://www.w3.org/TR/html401/interact/forms.html

尝试使用node.js

2 个答案: