0

I try to make a chat with node.js and socket.io but I tried since 6 hours to resolve my problem but I don't succeed.

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);

I don't understand because the alert gets opened with the variable from the server message but innerHTML doesn't get filled.

Improve this question
2
  • 2
    Please indent your code properly to make it readable.
    – jfriend00
    Commented Jan 18, 2016 at 1:41
  • Does my answer fix your problem?
    – leroydev
    Commented Jan 21, 2016 at 9:29

1 Answer 1

Reset to default
0

Because pseudo and message are input fields in a form, by default, the page get's reloaded because you click a submit button. To prevent this, you need to put return false; at the end of the submit handler, like this: 

$("#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;
});

Note that I replaced alert with console.log, of which the output can be viewed in the console, which you can open with F12 in Google Chrome. I find it to be less annoying for debugging purposes. (it doesn't create a popup and it can print arrays and objects)

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.