CODEWITHSUNDEEP
node.jssocket.io
Joe Kasavage
Joe Kasavage

Reputation: 522

Socket.io Chat Tutorial not functioning properly

So I finally decided to give Node.js a shot. I decided to go with a small chat app to break the ice. The tutorial I am following is directly from the socket.io site.

http://socket.io/get-started/chat/

I am following the tutorial word for word and have even tried to copy and paste the code into the source and am getting no where when I type in text and send it. It is supposed to be coming up in my command prompt, however it is not.

I had the user connected and user disconnected messages appear but I am stumped on this one as I have followed the tutorial step by step.

Index.js

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

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

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

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

Index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Chat</title>

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

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

</body>
</html>

I am assuming I fouled up some where but am not seeing it, even though I did try and copy and paste it. Also, if it matters I am using Windows 8.1 and Chrome. I checked around and could find no answer to this problem as well. Any help would be great.

EDIT: The problem was with jQuery, for some reason it is not responding as it should. After rewriting the script in vanilla it works as intended.

Index.js - JavaScript

<script>
    var socket = io();

    function sendMessage() {
        var msg = document.getElementById('m');

        socket.emit('message', msg.value);
        msg.value = '';
        return false;
    }
</script>

HTML:

<form action="" onsubmit="javascript:sendMessage();">
        <input id="m" autocomplete="off" /><button>Send</button>
</form>

Upvotes: 14

Views: 4154

Answers (2)

Tim Lindsey
Tim Lindsey

Reputation: 757

A little after the fact, but I had the same issue and tied it back to a load order issue. Just move the code that is binding to the form to the bottom of <body> rather than in <head>. It's a little misleading as some of the earlier code in the tutorial was directly in <head>.

Upvotes: 7

xShirase
xShirase

Reputation: 12389

You can activate logging for Socket.IO in Chrome by typing in your console :

localStorage.debug = "socket.io-client:socket"

and on the server side :

DEBUG=* node yourfile.js

Also, you want the script to be executed when the document is ready, in order to use jQuery so you need to delay it a bit :

$( document ).ready(function() {
   var socket = io();
   $('form').submit(function(){
       socket.emit('chat message', $('#m').val());
       $('#m').val('');
       return false;
   });
});

Upvotes: 15

Related Questions