Mag - Part 5 – Codeigniter Tutorial – Creating A Web Chat App using JQuery AJAX

11th of November 2012 24

Part 5 – Codeigniter Tutorial – Creating A Web Chat App using JQuery AJAX

In this Codeigniter Tutorial I create a little web based chat application. Users can chat with each other like they would in MSN or IRC etc within your web app. The purpose is to show the approach for creating the app and it also covers JQuery AJAX posting using JSON. For more codeigniter tutorials check out

Share it!

Was it good for you to?


Support for the site!

No sponsors at the moment.

24 great comment(s) for this post

  1. Mostafa Elsayh 9:01 am 11/11 of 2012

    thanks you very very much

  2. TunaMaxx 9:35 am 11/11 of 2012

    I’m a little late on this, but thanks for your tutorials. I really enjoy watching the app evolve.

  3. Petter Thowsen 10:34 am 11/11 of 2012

    When I did my chat in jquery I basically created 2 ajax call functions. 1 for checking if the num_rows is higher than client. If it is, execute function 2, which gets “SELECT * FROM messages OFFSET current_num ORDER BY id ASC”. then .append() it.

  4. vl7llv 10:39 am 11/11 of 2012

    great videos, can u make a video recap on how to put everything together using the source code you put up please

  5. Daryl Williams 10:45 am 11/11 of 2012

    Awesome tutorials. I’m a noob with codeigniter. Have background in PHP and now learning jQuery and Ajax. Great tutorial for a fellow ozzy with dare I say Codeigniter MVC. Keep up the good work dude. Need more tutorials.

  6. zander1989 11:08 am 11/11 of 2012

    Super awesome Tutorials, i made everything you’ve posted !!

  7. aguinaldohernandez 11:16 am 11/11 of 2012

    Sir Al. I’ve tried this ajax with Chrome and it really works great! Thanks to you! . but on IE 8 it cant display the response. I really really love to learn more about CI. Its just that the company to where I work from only uses IE 8. . hoping for your response. godbless. :)

  8. 123soonny 11:33 am 11/11 of 2012

    You are simply Amazing, great job man.

  9. Ian Simmons 12:21 pm 11/11 of 2012

    Ah, nevermind about the IE fix. Found it quick with a google for IE cache problem with ajax.

    Thanks. Moving on to your next series :-)

  10. Ian Simmons 1:18 pm 11/11 of 2012

    Great tut. I never knew a chat messenger could be so easy. I’d definitely like to see the cache fix for IE since only my tech friends know what a firefox or a chrome is lol. I’ll check for the dl on your simplycodeigniter but I love learning from visual demonstration. Thanks for all the work.

  11. pepengdragon 2:07 pm 11/11 of 2012

    is this applicable on lower versions of CI? like 1.7.3?

  12. yashaaa1 2:21 pm 11/11 of 2012

    but still if you add a line ajax will return all the chats from beginning to end, best solution would be adding line by line not innerhtml (.html) whole div .However great video, many thanks for posting

  13. Mario Bruno 3:01 pm 11/11 of 2012

    Awesome tutorial!!! It comes out really nice when you incorporate the CI smiley helper :D
    One question, is it possible to have a little message that says like “fred flinstone is typing” like in msn and facebook? so we know when the other user is typing. I was trying to figure this out

  14. soiswis 3:04 pm 11/11 of 2012

    Thanks once again Al for a great tutorial. By the way guys, can anyone email me the .sql file for the db? My email is: soiswis[at]googlemail[dot]com. Thanks in advance ;-)

  15. Verbloten 3:08 pm 11/11 of 2012

    I posted a Part 6 to simplycodeiginiter but I actually did forget to mention about the “IE FiX”. When I went to do the post I realised that the fix applied to using an AJAX GET request not a POST request. So there is nothing to fix with the .post() call. When it comes to using GET though you should basically send through as one of the parameters the current UTC time so it sees the request as a unique one and doesn’t cache. Cheers!

  16. ruffstylez 3:12 pm 11/11 of 2012

    great stuff!

    can you include the IE fix video?

    Thank you!

  17. Verbloten 4:09 pm 11/11 of 2012

    I uploaded the entire source code at simplycodeigniter. Enjoy

  18. XXchanXX23 5:06 pm 11/11 of 2012

    can you upload na complete file? :)

  19. Verbloten 5:12 pm 11/11 of 2012

    Not that I can think of mate! The client needs to check otherwise they wouldn’t know that someone has posted a message. You can make it a greater interval obviously but no way to prevent a database query each time…

  20. gukkie87 5:18 pm 11/11 of 2012

    Is there a way to refresh all the viewports of everyone on the chat only if someone enters a message? instead of having it run every 2.5sec :)

  21. gukkie87 6:07 pm 11/11 of 2012

    More!!!! You are amazing mate!!

  22. Verbloten 6:18 pm 11/11 of 2012

    Hi mate – see I mentioned you kind of! You are the cause of all my audio sync issues! But I found a nice fix now with Virtualdub so it’s all good! Glad the framerate is more acceptable to you now and thanks heaps for watching! Cya mate! :)

  23. DrRayLV 7:08 pm 11/11 of 2012

    Go till the end :)

  24. winfr34k 7:32 pm 11/11 of 2012

    the vid quality is so nice now ^_^
    the content too =)


Your opinion matters. Add it below.

Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent comments


Copyright since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.