PDA

View Full Version : Mobile Chat with Sencha Touch + node.js + socket.io



mrsunshine
12 Dec 2010, 4:10 PM
Mobile Chat with Sencha Touch + node.js + socket.io

This is an example for a sencha touch based chat client which gets messages pushed from a chat-server written in node.js. For the connection between server and client i use socket.io as implementation of websockets.

I wrote / write this application to have a playground to demonstrate things.

features of the sencha touch chat client:
- mvc architecture
- use localstorage for user settings
- gravatar avatar icons based on user email
- css3 chat bubbles
- pushed chat messages over web-socket
- custom theme (scss)

features node.js chatserver
- using socket.io
- using connect

Screenshots:
http://farm6.static.flickr.com/5010/5256117666_705806051d_d.jpghttp://farm6.static.flickr.com/5289/5256117494_d909f84039_d.jpg


Screencast:

http://vimeo.com/17742839
http://vimeo.com/17742839

Live Demo:
currently i search for a free node.js hoster
got an no.de coupon will try to set up the demo soon

Sourcecode:
https://github.com/mrsunshine/Mobile-Chat-with-Sencha-Touch---node.js---socket.io-

Roadmap:
I plan to use this app as playground which will be continuous upgraded to explain and show different topics of sencha touch and node.js.
if you have cool ideas let me know.

Updates:
14.12.2010 - Added socket.io wrapper class and rewrote use of socket in controller
13.12.2010 - first release

Hope you like it ;-)

Nils

grgur
12 Dec 2010, 4:16 PM
Absolutely fantastic work, as usual, Nils.

This is by far the best demonstration of Sencha Touch I've seen to date, and obviously not just ST. An experienced developer can learn a lot just from this example.

Keep it up!

Steffen Hiller
12 Dec 2010, 4:59 PM
Nice nice. Indeed looking forward to the juicy source. :)

jamesgpearce
12 Dec 2010, 5:33 PM
Very nice. Good work! :-)

tomalex0
12 Dec 2010, 8:25 PM
Cool, thats a nice implementation, looking for more ;)

AndreaCammarata
13 Dec 2010, 12:56 AM
Very nice work! :)
I'm even working on a real time comunication system on my Aral project and it is almost finally complete.
As soon I will post a vimeo video to demostrate the capabilities.
Instead of using Node.js and socket.io, I use the XMPP protocol thanks to a jabber server installed on my own server.
I even start with Node.js but jabber gives me more features and flexibility.
I even developed an "animoticon" style, which will allow you to send animation to other users thanks to CSS3 animations and Sencha Animator which is a great product.

Again, great work mrsunshine!!!

mrsunshine
13 Dec 2010, 1:06 AM
Wow thanks for the nice feedback,
i ll share the code on github or something similar hopefully this night

tobiu
13 Dec 2010, 2:16 AM
hi nils,

it looks really nice! i will take some time soon to take a closer look into the code :)

kind regards
tobi

SimonFlack
13 Dec 2010, 2:54 AM
Cool app. Great work.

edspencer
13 Dec 2010, 11:00 AM
Come on... let's see some code :)

Example looks great

mrsunshine
13 Dec 2010, 1:17 PM
I published the source code of the first alpha version on github
https://github.com/mrsunshine/Mobile-Chat-with-Sencha-Touch---node.js---socket.io-

we did a test with some devices at dkd office today,

chat worked on iOS Devices, different Androids and Safari and chrome

mrsunshine
13 Dec 2010, 4:51 PM
Added socket.io wrapper class and rewrote use of socket in controller

jay@moduscreate.com
14 Dec 2010, 7:36 AM
impressive. Would be cool to see an iRC proxy ;)

AndreaCammarata
14 Dec 2010, 3:03 PM
Hi guys, as I promise I posted a new video to demonstrate my real time communication system using jabber and XMPP protocol.
Take a look at this post:
http://www.sencha.com/forum/showthread.php?118672-Aral-Network-Chat-(with-jabber-server)

Cheers

mrsunshine
30 Dec 2010, 2:07 AM
Will talk about the app at the next extjs meetup in frankfurt
http://www.meetup.com/Ext-JS-User-Group-Frankfurt/calendar/15848404/

gabrielstuff
6 Jan 2011, 2:28 AM
Hi there,
Very nice work.
I was wondering what was the best approach, to produce a webApp with ChatRoom, and instantMessage.
Actually, I was wondering, what was the best way to integrate instant message in sencha framework, sothat I'll be able to talk with iphone, android, blackberry user.

Any infos, please share !

Thank you !

gabrielstuff
18 Apr 2011, 12:23 AM
Hello There,

Could you provide some infos about your chat application ?
Would you recommand it for creating a simple chat service ?

Thank you !

Ekambos
28 Sep 2011, 2:43 AM
Sweet Application.
Bravo

Diego Garcia
27 Apr 2012, 8:57 AM
Hey very nice work mrsunshine!! It gaves me a very very good base to understand chat applications. Thanks a lot for sharing!!