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：非常奇怪

回答

相關問題