Guides

Socket.io Chat App Using Websockets



In this video we will build a real-time chat application using socket.io, Node.js and Express. I will show you how to create a 2-way communication layer over websockets

UPDATED VIDEO WITH MONGODB:

RELATED COURSES
Learn Node.js From Scratch: https://www.eduonix.com/affiliates/id/16-10033
Learn Node.js with 12 Projects: https://www.eduonix.com/affiliates/id/16-10200

48 Comments

  • liງhtຊคrt - Graphic Artist

    instead of app.get()….. for routing you can also use app.use(express.static("FOLDER NAME"));

  • Motaz Darwish

    hi Brad, i have a problem, TypeError: callback is not a function
    at Socket.<anonymous> (/./././server.js:35:9)
    .. so it has a problem with the callback, how to fix this?

  • Britt Burge

    Hello, is there anyway you could show me how to show a radio button and checkbox selection by one user in real time on another tab. I know the idea is similar to the chat app, but I really am having difficulty getting this to work.

  • Shilpa Dhirajbhai

    Hello sir,I have try to your socket code tutorial but when i close one user connection then show below error in my ubuntu terminal.
    /var/www/html/iochat/server.js:26
    users.splice(users,indexOf(socket.username),1);
    ^
    ReferenceError: indexOf is not defined

  • Tanel Salu

    Could have explained the code a bit more but overall good vid, thanks!
    Here's the code: https://github.com/TSalu/Socket.io-Chat-App

  • the challenger 346

    What do I have in the code that is incorrect
    <html>

    <head>

    <title>4ORCECORE</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script src="/socket.io/socket.io.js"></script>

    <style>

    *{

    margin-top: 30px;

    }

    </style>

    </head>

    <body>

    <div class="container">

    <div class="row">

    <div class="col-md-4">

    <div class="well">

    <h3>Online Users</h3>

    <ul class="list-group" id="users"></ul>

    </div>

    </div>

    <div class="col-md-8">

    <div class="chat" id="chat"></div>

    <form id="messageForm">

    <div class="form-group">

    <label>Enter Message</label>

    <textarea class="form-control" id="message"></textarea>

    <br />

    <input type="submit" class="btn btn-primary" value="Send Message">

    </div>

    </form>

    </div>

    </div>

    </div>

    <script>

    $(funtion(){

    var socket = io.connect();

    var $messageForm = $('#messageForm');

    var $message = $('#message');

    var $chat = $('#chat');

    $messageForm.submit(funtion(e){

    e.preventDefault();

    socket.emit('send message', $message.val());

    message.val();

    });

    socket.on('new message', function(data){

    $chat.append('<div class="well">'+data.message+'</div>');

    });

    });

    </script>

    </body>

    </html>

  • Marshall GfxandMultimedia

    thanks Brad for a wonderful video….pls install need some help this time its chat application on react-native , nodejs server and socket.io
    I have not been able to connect with nodejs from react-native app … i will appreciate if you can help me out .thnks

  • MIHIR TANKSALE

    Thanks for the video !!!!
    How can I install the same on friends computer , how should I make exe for this ……….?

  • Shumail Mehmood

    sir how to send the message to a specific customer or the use of namespace in nodejs express.
    can you make a tutorial on that topic

  • oussama ben hassen

    when I press the button to login , I can't move to the next page?
    Someone know what's the problem please?

  • Philip Gouldman

    The script you had in your html page…could you just put that in another js file and include it in the head section?

  • Cole Park

    If anyone is wondering about the %s in console.log, it's just a substitution string which gets swapped with the extra parameters value.

  • barnama

    I couldnt find a complte tutorial fo socket.io on youtube
    I need a deep learning of socket.io please let me know if there is some resources
    like working with ping, timeout, force new, adapter, radis, secure connection, and so on
    thank you for the video

  • Surentharan

    I followed the same code as said in the webpage.. but when i enter username and click submit it is not showing the chat screen.. it again show the enter username screen… Can any one help me with this issue .. I have attached the entire coding in the comment below

  • Arnab Santra

    This is one of the most practical tutorials ever!! Without any annoying bgm… ;p
    I was able to make my first chat app watching this… Thanks a gazillion!! <3

  • orz

    anyone know what's the difference between socket io and socket client io? if im developing the client side on an app, i must use socket-io-client or socket.io is enough?
    thanks!!

  • Steve Burrus

    "Can u plz provide the link where all the code is saved?" Brad I wanna echo someone's earl;ier question of you. I R EALLY NEED that code if you care like providing it to me/all of us. Incidentally I've seen this video of yours' before.

  • Abdul Hadi Bhagat

    after entering the username somewhere my app disconnects dont know why can anyone help me with it ?

  • Murtaza Haj

    can u show how to float the divs left and right align?
    i am able to align them right and left by using condition in javascript for send message html , but it doesnt show correctly

  • A N

    Traversy, 15:35 thank you for this… I was wondering since 9:40 why you push and then splice. Thanks for the great video, man.

  • smibbie

    you should do a follow up for this. I'm having a really difficult time using socket.io with heroku. i keep getting a websocket handshake error that crashes my site.

  • Code AI

    please do more of websockets! this is awesome! please guys support me on this comment if you want him to make more of web sockets!

Leave a Reply

Your email address will not be published. Required fields are marked *