尝试使用 node.js 设置基本聊天应用程序时出错答案

【问题标题】：error trying to set up basic chat app with node.js尝试使用 node.js 设置基本聊天应用程序时出错
【发布时间】：2017-06-04 19:36:10
【问题描述】：

我正在尝试使用 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"
  }
}

【问题讨论】：

标签： node.js express socket.io

【解决方案1】：

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

【讨论】：

我真的不需要表单，我只想在按下输入时提交输入，是否有类似 .addEventListener('enter', () =>... 这样的东西会使输入行为进入？
您可以将输入更改为按钮而不是提交按钮，然后处理它的点击事件。
是的，我知道该怎么做，但我希望在按下回车键时发送文本。
那将是另一个问题，但是有很多关于它的教程。基本上，你会监听一个 keyup 事件，然后检查它是哪个键，如果它是 enter 键，则执行你的 Ajax 调用

【解决方案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

【讨论】：