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/
Xem thêm Bài Viết:
- Đập Tam Hiệp hé lộ sự thật Đập lớn nhất thế giới làm trái đất quay chậm lại, Nếu vỡ Trung quốc sẽ ?
- Git and GitHub for Beginners – Crash Course
- Giới thiệu tổng quan về Tuturial Laravel 6
- Người Việt ở Mỹ bây giờ hiện tại đang đứng ngồi không yên chứ không đùa đâu
- Review chi tiết GIÀY CẦU LÔNG Yonex giá rẻ AKAYU S
Does this work if doing phone chat application?
why do you still don't have a tick after your channel name?
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!
how can I add this to my website?
Thanks so fucking much, you fucking saved me lol
I'm using visual studio code when i run the code its giving me an error .
The 1st part of the code works properly but this one is not working please help me out
thankyou so much for such a good tutorial.
please make a continuation video on this connecting mongodb database to store user chats
<%%> tags don't work for me 🙁 help
Hi everybody, a new community of socketio is released on Instagram namely socketiocommunity, you can post your queries there too
How about using a database with an event listener instead of socket.io? Is that a bad idea?
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
How can I escape whitespaces in join link in indez.ejs if room name(ex. Room One) contains whitespaces.
<a href="/<%= room %>"> Join </a>
Great intro to socket.io! Keep these videos coming!
can you show us how to upload this on heroku?
if you think this is helpful hit like so kyle can see it
You know building on this and the previous video, adding webRTC for video/audio chat would be neat!
Hello my friend. What is nodemon used for in your package.json?
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.
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.
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. 😁
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?
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.
What if I want to make a chrome extension
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.
thanks a lot
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
Thank u so much man
Can these be converted to React?
socket is not working :/ in google chorm but work with other browser. name cant detect keep saying null or undefine
how to detect user typing event??
great video . (y)
Thanks a lot for this video and the previous one, very helpful!
you are so handsome……
fodase pó kayle
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.
can you do the same one with multiple chat rooms?
Doesn t really work
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.
it would be cool if you made something like omegle. Users connect to a random generated a room and only 2 users can connect
Hi guys, I actually built a real time chat website based on this info. Check it out at www.delachat.com . Thanks.
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 !
How to run this I m so confuse here
Coz I don’t use node.js before
YES! 😀 Amazing! 😀 thank you 😀
You're hired!
Thanks. It was very helpful. Can you extend this with private chat?
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.
OMG you're the man! I have a question, how would you handle a kick/ban system??
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