Question

我正在尝试使用Node.js和Socket.io制作网络聊天应用程序。我让用户键入输入表单，然后单击发送按钮发送消息。现在它处于开发阶段，所以我只想查看消息是否从客户端传递到服务器。所以在我的客户端，当单击提交按钮时，我使用发出事件，并将消息传递给服务器。在我的服务器端，我有代码监听此事件并将其记录下来。但每次我运行它时，客户端每次提交表单时都会断开连接并重新连接，并且消息不会按照我的预期记录。

这是来自app.js

的代码

  io.on('connection', function(socket){
  console.log('Client connected!');

  socket.on('message_sent', function(msg){// Just for testing purposes
    console.log('Clent says: ' + msg);
  });

  socket.on('disconnect', function(){
    console.log('Clent disconnected!');
  });
});

我得到的只是＆＃34;客户连接！＆＃34;和＆＃34;客户端已断开连接！＆＃34;每当我尝试发送消息时。这是客户端上运行的脚本

<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('message_sent', $('#usermessage').val());
    $('#usermessage').val('');
    return false;
  });
</script>

关于为什么这不起作用的正确解释将非常有用。

Answer 1

HTML元素可能会应用默认设置，您可能需要覆盖它们。将<button/>添加到<form/>元素时，会出现一个事件;提交活动。期望重定向到表单中的指定URL。如果表单没有url，则会重新加载页面。要覆盖它，您需要阻止按钮的默认行为。试试这个：

var socket = io();
$('form').submit(function(ev){
  ev.preventDefault(); //the secret sauce
  socket.emit('message_sent', $('#usermessage').val());
  $('#usermessage').val('');
  return false;
});

Answer 2

在jsfiddle上，您的表单只是<form>尝试更改为<form action="">，就像您正在使用的教程一样。

Answer 3

当您将脚本放在<head>标记内时，在DOM操作之前，您应该确保dom已准备就绪，因为如果没有，则没有form将submit事件附加到其中;所以在jquery dom ready函数中包装你的脚本：

<script>
  $(function() {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault();
      socket.emit('message_sent', $('#usermessage').val());
      $('#usermessage').val('');
    });
  });
</script>

提交表单上的网页重新加载

3 个答案: