<pedrocorreia.net ⁄>
 

<Real-time Applications With Node.js and Socket.IO ⁄ >




clicks: 14901 14901 2012-05-04 2012-05-04 goto programacao myNews programacao  Bookmark This Bookmark This


Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for the past little while. Today we'll be looking at developping collaborative web applications, that is applications which more than one person can interact with the data at the same time. However, we'll be spicing it up a little bit by making it real time, so no need to refresh the page every time you want to see the new data! In order to do this, you'll be needing Node.js and the Socket.IO module (easily installable via the npm tool. Although I don't like having too many requirements for a post, I'll also be using jQuery 1.7.2 in order to facilitate DOM manipulation. Finally, you'll also need some kind of web server (try and implement it in Node for fun!) as we'll encounter some cross-domain constraints if we don't.

So what will we be building today? We'll be building an application which shows a simple task tracking application, which will contain a master list of tasks to be done. We'll also be keeping it simple, so people will be able to add tasks and mark tasks as done. It will update real time, so therefore we will have to make a system which allows us to notify everyone watching the list when a task is added or completed. The list will also have to be sent whenever there is a new visitor for the page in order to make sure they also see all the current tasks. For simplicity's sake, we will be storing the tasks in memory on the server side, however I encourage you to use it as an experiment for connecting Node to a number of different persistence services.

In case you've never worked with Socket.IO before, it is a library which allows us to have two-way real-time communication on a web page. It makes use of a variety of techniques in order to increase the browser compatibility, making use of WebSockets if available and falling back to techniques such as AJAX polling and a Flash socket. If you've ever done socket programming for desktop applications, working with Socket.IO will feel very familiar. If you haven't, have no fear! Messages (packets) are sent back and forth with an identifier. Callbacks for a given identifier are implemented on the receiving end which works with the data. The nice thing about this is that we are using Javascript for both the sending and receiving data. Think of sending a packet like leaving a voicemail: you have a phone number and a message, and if the receiver chooses to receive messages for that phone number, he can work with the message.



este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:

http://codingcookies.com/2012/05/01/real-time-applications-with-node-j...




Subscribe News RSS  Subscribe News Updates by E-mail





myNews <myNews show="rand" cat="programacao" ⁄>

RouterJs: easy routing for your ajax Web applications new ...

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that Rout (...)

clicks: 14979 14979 2012-05-14 2012-05-14 goto url (new window) haithembelhaj.g... goto myNews programacao


Backbone computed properties new ...

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model (...)

clicks: 14726 14726 2012-05-13 2012-05-13 goto url (new window) https://gist.gi... goto myNews programacao


Create Instagram Filters With PHP new ...

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP (...)

clicks: 14427 14427 2012-05-12 2012-05-12 goto url (new window) net.tutsplus.co... goto myNews programacao


Android Query new ...

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI el (...)

clicks: 14983 14983 2012-05-12 2012-05-12 goto url (new window) code.google.com... goto myNews programacao


HTML5 jQuery Paint Plugin new ...

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area (...)

clicks: 25369 25369 2012-05-12 2012-05-12 goto url (new window) websanova.com/t... goto myNews programacao


Sass vs. LESS vs. Stylus: Preprocessor Shootout new ...

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to (...)

clicks: 14199 14199 2012-05-11 2012-05-11 goto url (new window) net.tutsplus.co... goto myNews programacao


Real-time Applications With Node.js and Socket.IO new ...

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for th (...)

clicks: 14901 14901 2012-05-11 2012-05-11 goto url (new window) codingcookies.c... goto myNews programacao


15 Handpicked jQuery Drop Down Menus Tutorials new ...

Here we are presenting another brilliant collection of 15 jQuery navigation menu that you can downlo (...)

clicks: 13997 13997 2012-05-10 2012-05-10 goto url (new window) smashingapps.co... goto myNews programacao