Question

我尝试与node.js和socket.io聊天，但我尝试了6个小时来解决我的问题，但我没有成功。

的index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Socket.io</title>
</head>
<body>
  <h1>Communication avec socket.io !</h1>

  <div id="formulaire">
    <form action="" method="post" id="form">
      <input type="text" id="pseudo" placeholder="Pseudo"/>
      <input type="text" id="message" placeholder="Message"/>
      <input type="submit" value="Envoi"/>
    </form>
  </div>
  <div id="wrapper">
    Texte par défaut
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script>
    var socket = io.connect('http://localhost:8080');

    $("#formulaire").submit(function() {
      var pseudo = $("#pseudo").val();
      var message = $("#message").val();
      alert(pseudo = " " + message);
      socket.emit("pseudo", pseudo);
      socket.emit("message", message);
    });

    socket.on("message", function (message) {
      alert("bien récupéré depuis serveur: " + message); //It works
      var wrapper = document.getElementById('wrapper');
      wrapper.innerHTML = "Le message est: " + message; //It doesn't work ?????
    });
  </script>
</body>
</html>

app.js

var http = require("http");
var fs = require("fs");

// Serving index.html to the client
var server = http.createServer(function(req, res) {
  fs.readFile("./index.html", "utf-8", function(error, content) {
    res.writeHead(200, {"Content-Type": "text/html"});
    res.end(content);
  });
});

// Loading socket.io
var io = require("socket.io").listen(server);

// Logging in console when a client connects
io.sockets.on("connection", function (socket) {
  //socket.emit("message", "A new client has connected");
  socket.on("pseudo", function(pseudo) {
    console.log(pseudo);
    socket.emit("pseudo", pseudo);
  });

  socket.on("message", function(message) {
    console.log(message);
    socket.emit("message", message);
  });
});

server.listen(8080);

我不明白，因为使用服务器消息中的变量打开警报但是innerHTML没有被填充。

Answer 1

由于pseudo和message是表单中的输入字段，因此默认情况下会重新加载页面，因为您单击了提交按钮。为了防止这种情况，您需要将return false;放在提交处理程序的末尾，如下所示：

$("#formulaire").submit(function() {
    var pseudo = $("#pseudo").val();
    var message = $("#message").val();
    console.log(pseudo = " " + message);
    socket.emit("pseudo", pseudo);
    socket.emit("message", message);
    return false;
});

请注意，我将alert替换为console.log，其中的输出可以在控制台中查看，您可以在Google Chrome中使用F12打开该输出。我发现它不那么烦人的调试目的。（它不会创建弹出窗口，它可以打印数组和对象）

Socket.io：很奇怪

1 个答案: