Created
May 27, 2012 16:15
-
-
Save anandgeorge/2814934 to your computer and use it in GitHub Desktop.
Socket.io example with jquery and dom manipulation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var io = require('socket.io').listen(8000), | |
| nicknames = {}; | |
| io.sockets.on('connection', function (socket) { | |
| socket.on('user message', function (msg) { | |
| socket.broadcast.emit('user message', socket.nickname, msg); | |
| }); | |
| socket.on('nickname', function (nick, fn) { | |
| if (nicknames[nick]) { | |
| fn(true); | |
| } else { | |
| fn(false); | |
| nicknames[nick] = socket.nickname = nick; | |
| socket.broadcast.emit('announcement', nick + ' connected'); | |
| io.sockets.emit('nicknames', nicknames); | |
| } | |
| }); | |
| socket.on('disconnect', function () { | |
| if (!socket.nickname) return; | |
| delete nicknames[socket.nickname]; | |
| socket.broadcast.emit('announcement', socket.nickname + ' disconnected'); | |
| socket.broadcast.emit('nicknames', nicknames); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href="style.css" rel="stylesheet"> | |
| <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> | |
| <script src="/socket.io/socket.io.js"></script> | |
| <script> | |
| // socket.io specific code | |
| var socket = io.connect('http://localhost:8000'); | |
| socket.on('connect', function () { | |
| $('#chat').addClass('connected'); | |
| }); | |
| socket.on('announcement', function (msg) { | |
| $('#lines').append($('<p>').append($('<em>').text(msg))); | |
| }); | |
| socket.on('nicknames', function (nicknames) { | |
| $('#nicknames').empty().append($('<span>Online: </span>')); | |
| for (var i in nicknames) { | |
| $('#nicknames').append($('<b>').text(nicknames[i])); | |
| } | |
| }); | |
| socket.on('user message', message); | |
| socket.on('reconnect', function () { | |
| $('#lines').remove(); | |
| message('System', 'Reconnected to the server'); | |
| }); | |
| socket.on('reconnecting', function () { | |
| message('System', 'Attempting to re-connect to the server'); | |
| }); | |
| socket.on('error', function (e) { | |
| message('System', e ? e : 'A unknown error occurred'); | |
| }); | |
| function message (from, msg) { | |
| $('#lines').append($('<p>').append($('<b>').text(from), msg)); | |
| } | |
| // dom manipulation | |
| $(function () { | |
| $('#set-nickname').submit(function (ev) { | |
| socket.emit('nickname', $('#nick').val(), function (set) { | |
| if (!set) { | |
| clear(); | |
| return $('#chat').addClass('nickname-set'); | |
| } | |
| $('#nickname-err').css('visibility', 'visible'); | |
| }); | |
| return false; | |
| }); | |
| $('#send-message').submit(function () { | |
| message('me', $('#message').val()); | |
| socket.emit('user message', $('#message').val()); | |
| clear(); | |
| $('#lines').get(0).scrollTop = 10000000; | |
| return false; | |
| }); | |
| function clear () { | |
| $('#message').val('').focus(); | |
| }; | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="chat"> | |
| <div id="nickname"> | |
| <form id="set-nickname" class="wrap"> | |
| <p>Please type in your nickname and press enter.</p> | |
| <input id="nick"> | |
| <p id="nickname-err">Nickname already in use</p> | |
| </form> | |
| </div> | |
| <div id="connecting"> | |
| <div class="wrap">Connecting to socket.io server</div> | |
| </div> | |
| <div id="messages"> | |
| <div id="nicknames"></div> | |
| <div id="lines"></div> | |
| </div> | |
| <form id="send-message"> | |
| <input id="message"> | |
| <button>Send</button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
Thanks! This is exactly what I was looking for.
Works perfectly!
nice
Perfect. Thanks !
nice, very clear!
Thank you
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks. You saved my time.