Build Real Time Chat Rooms With Node.js And Socket.io



In this video you will be expanding on a real time chat application by adding room support. You will use Socket.io to manage real time web socket connections to a Node.js server that will allow you to communicate real time chat messages to all clients connected to a single server.

Upon completing this project you will have a fully functioning chat application with room support. This project will also give you the basic groundwork needed to build complex chat applications such as Slack and Discord.

🚨 IMPORTANT:
Part One:

📚 Materials/References:

Starting GitHub Code:
Final GitHub Code:
Socket.io:
Top 8 JavaScript Array Methods:

🧠 Concepts Covered:

– Using Socket.io to create web sockets
– How to send messages to clients in real time
– Handling chat room segregation
– Appending elements with JavaScript
– Sending messages to the server in real time

🌎 Find Me Here:

Twitter:
Discord:
GitHub:
CodePen:

#ChatApp #RealTimeChat #JavaScript

Nguồn: https://newblurayrelease.com/

Xem thêm bài viết khác: https://newblurayrelease.com/lap-trinh-php/

  • Does this work if doing phone chat application?

    FinskaRS July 30, 2020 6:29 am Reply
  • why do you still don't have a tick after your channel name?

    s04p-99 July 30, 2020 6:29 am Reply
  • that's awesome! everyone else is just talking about 20 minutes to explain every detail and it becomes very confusing, but you, just do amazing things that i was looking for months! videos are very short and informative, code is readable because it's pretty formatted, and most important, it's not confusing at all, even for me, i started learning node.js about 3 days ago but i understand! thanks! your channel is too underrated btw… (I shared with all my friends, and even not friends) keep it up man!

    s04p-99 July 30, 2020 6:29 am Reply
  • how can I add this to my website?

    joseph evangelista July 30, 2020 6:29 am Reply
  • Thanks so fucking much, you fucking saved me lol

    die rn July 30, 2020 6:29 am Reply
  • I'm using visual studio code when i run the code its giving me an error .

    Mahanth D July 30, 2020 6:29 am Reply
  • The 1st part of the code works properly but this one is not working please help me out

    Mahanth D July 30, 2020 6:29 am Reply
  • thankyou so much for such a good tutorial.
    please make a continuation video on this connecting mongodb database to store user chats

    Rahul M July 30, 2020 6:29 am Reply
  • <%%> tags don't work for me 🙁 help

    Krystian R July 30, 2020 6:29 am Reply
  • Hi everybody, a new community of socketio is released on Instagram namely socketiocommunity, you can post your queries there too

    Chandan Bansal July 30, 2020 6:29 am Reply
  • How about using a database with an event listener instead of socket.io? Is that a bad idea?

    C July 30, 2020 6:29 am Reply
  • Hi , how can I delete chat room that is created ? I would like to know not only how to create but also how to delete the chat room

    Martynas Majaras July 30, 2020 6:29 am Reply
  • How can I escape whitespaces in join link in indez.ejs if room name(ex. Room One) contains whitespaces.
    <a href="/<%= room %>"> Join </a>

    Trendy Masthi July 30, 2020 6:29 am Reply
  • Great intro to socket.io! Keep these videos coming!

    Chris Tsantiris July 30, 2020 6:29 am Reply
  • can you show us how to upload this on heroku?
    if you think this is helpful hit like so kyle can see it

    Mihnea Aleman July 30, 2020 6:29 am Reply
  • You know building on this and the previous video, adding webRTC for video/audio chat would be neat!

    John Weland July 30, 2020 6:29 am Reply
  • Hello my friend. What is nodemon used for in your package.json?

    Thanasis Athanasi July 30, 2020 6:29 am Reply
  • Not sure if I did something wrong, but my 'chat-message' emit was not sending the package to both sender and chat participants, only the participants (username joined the room and chat messages only showing on other clients). So instead of using socket.to(room).broadcast.emit('chat-message') I used io.to(room).emit('chat-message') and it worked.

    Jacob Ross July 30, 2020 6:29 am Reply
  • Thanks! But how you will make that users who are already in the room will NOT receive socket event when new room is created, as he dont need it.

    Eugene Fedorov July 30, 2020 6:29 am Reply
  • Lool, this is insane… 😁 I created one-time pad encryption library to protect users messages before they goes true the socket.io. Even socket running true the ssl, its still vulerable because government services can decrypt ssl, but my app has power over it and convert message with the ascii dots. 😁

    BlackZero Rs July 30, 2020 6:29 am Reply
  • The "room-created" event needs to check, if it has a "roomContainer" available (which is only on index.ejs), otherwise those, who are in a room, get ugly error messages once a new room is created.
    Third part: Deploy to netlify / zeit / etc?

    Robert Wildling July 30, 2020 6:29 am Reply
  • I am really enjoying this. I would love to see a series done to make a discord or slack like system. Even if its just single server. add in mongo for history and user along wit passport of JWT. man it would be rad.

    John Weland July 30, 2020 6:29 am Reply
  • What if I want to make a chrome extension

    Hogo_1510 July 30, 2020 6:29 am Reply
  • Great tutorial. Easy to understand. As a new to Node.js and Socket.io, I was looking for chat apps tutorial to use for our website and I think this is the best tutorial I found. I went through and finished it.
    Now, I was trying to embed on our website but sent me '404 Not Found'.
    if I have index.php and want to put a "Chat with us" navigator, how can I do this? I mean how can I link this such as
    <a href="chatApp/index.ejs" target="_blank">Chat With Us</a> ?

    It gives me:
    <% Object.keys(rooms).forEach(room => { %>

    <%= room %>

    Join <% }) %>
    textbox is here then "New Room"

    Thank you for this tutorial.

    CaptureYour DreamImage July 30, 2020 6:29 am Reply
  • thanks a lot

    Mossa Sameer July 30, 2020 6:29 am Reply
  • I have a question. How do I link stylehseets? I added some and it appears in my source-code. I can open the link via browser and the see code there but it isn't applied to the dom. Is there anything special I use to do? It's lying in the public dir next to script.js

    Valnuss July 30, 2020 6:29 am Reply
  • Thank u so much man

    Kabeer Jaffri July 30, 2020 6:29 am Reply
  • Can these be converted to React?

    Jorge Lopez July 30, 2020 6:29 am Reply
  • socket is not working :/ in google chorm but work with other browser. name cant detect keep saying null or undefine

    Play4Fun July 30, 2020 6:29 am Reply
  • how to detect user typing event??

    Muhammad Waqas July 30, 2020 6:29 am Reply
  • great video . (y)

    Muhammad Waqas July 30, 2020 6:29 am Reply
  • Thanks a lot for this video and the previous one, very helpful!

    Farouk BF July 30, 2020 6:29 am Reply
  • you are so handsome……

    Sean Wei July 30, 2020 6:29 am Reply
  • fodase pó kayle

    João Guedes July 30, 2020 6:29 am Reply
  • I'm using VS Code too, and have run `npm i express ejs` and they are both in my package.json, but EJS isn't appearing in the languages list, so it's not being formatted properly. Have I forgotten a step or missed something? I have also asked a question on StackOverflow here: https://stackoverflow.com/questions/59238175/visual-studio-code-isnt-recognising-ejs

    Edit: I have installed the EJS syntax highlighting plugin, but this still doesn't make the language appear in the list.

    William Jones July 30, 2020 6:29 am Reply
  • can you do the same one with multiple chat rooms?

    khoa huynh July 30, 2020 6:29 am Reply
  • Doesn t really work

    Gonçalo Fernandes July 30, 2020 6:29 am Reply
  • You've done really good job there, really appreciate that (and also the video before, with simple Socket.io chat).

    This is a great tutorial to get at least basic understanding of communication between sockets and server, and what's the most important – sending data between them which allows you not only to make a chat but also something more interesting, like games 🙂

    Socket.io happens to be a surprisingly simple library when it comes to client-server logic and it's also pretty well documented, at least in my opinion 😀 This is one of the must-watches for making web applications if you don't like learning from scratch.

    ToomcioZioomcio July 30, 2020 6:29 am Reply
  • it would be cool if you made something like omegle. Users connect to a random generated a room and only 2 users can connect

    Ilias Harvey July 30, 2020 6:29 am Reply
  • Hi guys, I actually built a real time chat website based on this info. Check it out at www.delachat.com . Thanks.

    Roy H July 30, 2020 6:29 am Reply
  • I have a request to each and everyone who is following this channel, This guy needs our support and we must spread this channel like an Amazon Wild Fire or even something more. I hope people like Kyle get better exposure. Come on guys, lets push this guy up !

    Arup Kumar Nag July 30, 2020 6:29 am Reply
  • How to run this I m so confuse here
    Coz I don’t use node.js before

    Share #one July 30, 2020 6:29 am Reply
  • YES! 😀 Amazing! 😀 thank you 😀
    You're hired!

    Dennis Thisner July 30, 2020 6:29 am Reply
  • Thanks. It was very helpful. Can you extend this with private chat?

    ijaz khan July 30, 2020 6:29 am Reply
  • You should make a part 3 in which you show how to make privatised chat of only 3 people or show how to make them with password.

    MeTeachesProgramming July 30, 2020 6:29 am Reply
  • OMG you're the man! I have a question, how would you handle a kick/ban system??

    Jesus Garcia July 30, 2020 6:29 am Reply
  • This the best WebSocket Tutorial, hands down man
    You are a Sharp developer
    Tomorrow I am going to buy, your React.js Course without a doubt

    TheF1 Sachin July 30, 2020 6:29 am Reply

Leave a Reply

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