socket io tutorial -- form keeps resetting

295 Views Asked by At

I am about halfway through the socket.io chat tutorial. The / page looks correctly serving index.html but when I hit ENTER or SEND the page resets and I get sent to /? which is also `index.html'.

The js and html are taken from the socket.io web site:

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <script src="/socket.io/socket.io.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  </script>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

The JavaScript has some basic features about connecting and disconnecting - those work fine. The chat messages are setting printed to console. Instead the page just resets.

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

http.listen(3001, function(){
  console.log('listening on *:3000');
});

Node also warns that sendFile is deprecated. I am so busy trying to get this tutorial working, that I don't want to learn new syntax, even though the tutorial is slightly out of date.

This is verion 4.4.0

express deprecated res.sendfile: Use res.sendFile instead index.js:6:7
2

There are 2 best solutions below

0
Bonanza On BEST ANSWER

You need to fix your HTML file. Right now you have scripts between head and body. You need to move them just before closing body block and your code will start working.

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  </script>
  </body>
</html>

About res.sendfile, just use res.sendFile. They removed alias sendfile in express v4.8.0.

1
Sir Demios On

had the same problem with sendfile, its an error in the tutorial that needs fixing use instead

 res.sendFile(__dirname + '/index.html');

which is what it used the at the beginning of the tutorial.

don't think that will solve your other problems, though when i made that same mistake my server froze up at the syntax depricated issue. Also I'm new so I can't just leave this as a comment so instead I'm leaving an incomplete answer.

thanks stackoverflow...