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 thoughts on “Socket.io Chat App Using Websockets”

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

    Reply
  2. 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?

    Reply
  3. 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.

    Reply
  4. 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

    Reply
  5. 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

    Reply
  6. 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>

    Reply
  7. 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

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

    Reply
  9. 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

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

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

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

    Reply
  13. 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

    Reply
  14. 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

    Reply
  15. 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

    Reply
  16. 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!!

    Reply
  17. "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.

    Reply
  18. 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

    Reply
  19. 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.

    Reply
  20. 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.

    Reply
  21. 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!

    Reply

Leave a Comment