Socket.io：非常奇怪

我尝试与node.js和socket.io聊天，但我尝试了6个小时以解决我的问题，但我没有成功。Socket.io：非常奇怪

的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不会被填充。

来源

2016-01-18 John Mary

请正确缩进您的代码以使其可读。 – jfriend00

我的答案能解决您的问题吗？ – leroydev

因为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; 
});

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

来源

2016-01-18 10:10:52 leroydev

Socket.io：非常奇怪

回答

相关问题