Node.js WebSocket Tutorial - Real-Time Chat Room using Multiple Clients
HTML-код
- Опубликовано: 10 сен 2024
- Welcome to this all-inclusive guide where I'll walk you through creating your very own real-time chat application using WebSockets and Node.js! If you're looking to enhance your full-stack development skills by learning how to establish a real-time connection between multiple clients, you're in the right place.
🛠️ What You'll Learn:
Setting up a robust server using Node.js and WS package for WebSocket implementation.
Crafting a user-friendly interface with basic HTML and JavaScript to interact with WebSocket.
Techniques to effortlessly connect multiple users to the chat room, enabling seamless real-time communication.
📦 Technologies Covered:
- Node.js
- WebSocket (WS Package)
- HTML
- JavaScript
🤹♂️ GitHub: github.com/kar...
✅ Subscribe for more developer tips and tricks: bit.ly/Cogniti...
🐦 Stay in the loop on Twitter: / karlhadwen
👍 Liked the video?
- Give it a thumbs-up 👍
- Share it with your network 🌐
- And don’t forget to SUBSCRIBE for more top-notch developer content! 🔔
🙏 Thanks for tuning in! See you in the next episode where we continue to make tech easy and accessible for everyone! ✌️
#JavaScript #WebSocket #RealTimeChat #Nodejs #WebSocketTutorial #JSWebSocket #WebSocketJavaScript #WebSocketServer #WebSocketClient #MultiUserChat #FullStackDevelopment #RealTimeApplications #JSWebSocketAPI #HTMLChatRoom #ConnectMultipleClients #WebSocketOnMessage #WebSocketSend #WebDevelopmentTutorial
![[DOKKAN BATTLE] Worldwide Campaign Announcement Video Part 2!](http://i.ytimg.com/vi/JpT5Voak6WA/mqdefault.jpg)
✅ Please remember to Subscribe: bit.ly/CognitiveSurge
truly the best tutorial helping me with my web dev module at uni
thanks mahn
It's soothing to listen to you. Do not change a damn thing!
I liked the port selection bro !
Thank you for the tutorial, works well! I had to make one change though in server.js:
client.send(data.toString());
For me data was a Buffer and not a string, so I had to toString on data. Not sure if it's because I'm on firefox or if it's a different version of ws, or what.
Tenks. I'm on Firefox too. Maybe problem is in ws version. Tested on chrome without correction and got object blob. So problem is with ws i guess.
i have tried to solve the same problem thanks for the solution
It works! I have the same problem with Opera browser, thanks for the solution
Amazing!!! Thanks
The best chatroom tutorial ive came across well done mate!
Wow, thanks!
for some reason when i text myself from different tab, i can see just [Object Blob] and nothing more. But my own text is normal. What could be the problem?
nice tutorial - concise, normal voice tone and speed and no talking head. I like how he is having fun after it works. well known feeling:)
Would there be any reason the server would hang and not display anything? Server says it's running in the console, but it's just loading when I go to localhost at the port. I've tried using different ports, I've tried copying and pasting the index.html and server.js files directly from the repo, and nothing.
I was able to get index.html to show up by using `const app = express();` and adding a get route (after app.listen instead of server.listen) with a res.sendFile to display the html, but of course since I was using app and not server, the line `const wss = new WebSocket.Server({ server }) didnt work, so when I tried to send something in the message box i got the 'No WebSocket Connection :(' message. Not sure what I'm missing. Any thoughts?
I can't get yarn to work. I tried the standard npm start and following the instructions on yarn's website, but no luck. Guess I'll find a tutorial that doesn't use yarn
Your sense of humor keeps me interested and engaged. You should make more content
Maybe in the future!
I tried it and I keep getting [object Blob] after sending the message?
I believe I set everything correctly, but when I type something on one web, I get [object blob] on the other web. Do you know why this is?
That's a binary object: developer.mozilla.org/en-US/docs/Web/API/Blob
@@CognitiveSurge How do we fix it?
4:02 Oh no it's the SEX number
oops
Neat, straight to the point. Thank you for sharing.
Welcome!
can you make a video about a simple social app please! and thank you for the course it helped me a lot
Let me take a look and see what's in the pipeline :)
in index.html file in script tag you used localhost can we use Process.env.port and server you created using http create server i have used express to create server then in server js const wss = new WebSocket.Server({ server }) what should i write in ({ }) ?
How to implement on live server(cpanel).We are faceing *No WebSocket connection error on live
Hey mate, great tutorial. I just wanted to ask if you would advise moving the client-side stuff to a separate file for bigger projects and how you would organise that?
Hey! hard to say really, but I'd just separate files into folders that are broad, and just keep chopping away and re-organising until it feels right. If you were to leave the project for 3 months and go back to it, would you understand where to find files immediately? that's the goal
i get [object Blob] when i write message on other clients.
Same bro
@@andree8712 client.send(data.toString());
Should fix it, but after changing it, do not forget to restart your server. I wasted some hours figuring that out 😵.
hey, what is your vscode theme that you are using? thank you
It works! Thanksw
You're welcome!
You and Express requirement are the will-they-wont-they love story of the century lol, great video though
Hahaha
on mine one shows text on web it shows object
15:13
😁😁
Chatting yourself
xD
Hi everyone! I don't speak english so much but I wanted to asking about the line with three equals sign 11:00, in the video he used this syntax but I don't understand very good the why exactly, can anyone explain me please? Thank you! and great video. Pd: sorry for my english.
This is triple equals, I'm doing an equality check but my editor has custom fonts setup that makes it look a little strange!
Liked, subscribed, commented. Make more awesome tech tutorials
Thanks so much!
how can I run this so that i can send the localhost link to my friends
Put it on a web server, maybe DigitalOcean?
@@CognitiveSurge is there a way that I can keep the messages up on the screen even after either I or the user refreshes the tab
@@drew1424 You could use localstorage but then the messages would be out of sync if new messages come. Maybe a database would be a better solution?
Karl Hadwen can you make a tutorial on that?
it is many to many at on time. can you give one to one from many? example cahat on website where is one operator and writes to different one from many visitors.
Yep, look at holding state for visitors and then connect that state to an operator
@@CognitiveSurge theoreticaly it is. but practish no understand
Can you please make a same video with WEbrtc and was library? please
The port was damn 😂🔥
This is beautiful
Haha thanks
is it possible to run in pm2 cluster and scale horizontally?
Yep
How would you handle rooms where only room members get the messages?
Save the data in a db maybe?
Hello! Very useful stuff. Just a small bug. If everone runs that javascript to show each message, when someone is typing and another user sends a message, all messageboxes are erased. I just made another function to show a self message and another one to show other users messages.
Good spot, would you be able to put together a PR for this?
@@CognitiveSurge What's a "PR"? Anyways, this is what I use after some tweaking: pastebin.com/bNmeg2aJ
@@fling97 PR = Pull Request
Hi, I have a question. So my question is if you are trying to upload your real time chatting does it work across the internet? Thank you so much
I am pretty sure you can
@@nukebommer360 because when I uploaded in the github it doesnt work but in my pc locally it will work
do you need like npm start or something in github?
Yes it does
For an example we have a website and an android application so a customer is sign up into the website but after sometime he/she download our app and login into the application but he is not registered, so basically I have a question that how can we sync data website and the mobile application...
When I search on Google that I got a result that you should a RESTFUL API, but I can't understand that how can I implement it because in youtube everyone build an android application through the firebase Which is much expensive comparison to other hosting provider like bluehost, hostinger etc..
Please Guide me as a mentor, how can I solve this problem????
awesome !!!!
Thanks!!
@Karl Hadwen what if i want to name each user who is joining the chat how can i do that
Hmm, try adding it once a user connects, so as soon as a connection is open, send a message to everyone
@@CognitiveSurge can you give a detailed way to do that?
all these tutorials found on YT are great but no one ever says what software they are using to code these in.
Node.js? It's on the thumbnail
it says no websocket connection when i test it
Mock the socket
Thanks Sir
Welcome!
I would like something similar. How would you add multi-room capability?
If you pass a value to WS you could specific who you send the messages to, e.g. a user switches room from 1 (default) to 5, you then send the message to room 5 and not any other room
Good tutorial. Everything matches what I've been doing and I even have a server function that pings the client every 10 seconds. The question is sometimes a client's connection closes for no reason. I opened 3 browsers on 3 machines to test my latest changes in our production environment and I noticed after I refreshed the client to get a new connection that when I made my 1st changes from that client I got a web socket is closed or closing so although the DB got updated, no other client got the message. This might have been 1 minute or so but that doesn't make sense since most of the time I can go days without refreshing and I still have a connection.
Ignore that it just happens, but what would I do to reconnect automatically without forcing the user to refresh? Could I just add a reconnect to the close event?
Why don't you use socket.io?
it dosent matter what technology you use :)
Does google keep( notes website) use Web socket?
Hmm, not sure actually
@@CognitiveSurge I guess notes making app is near real time.
why do you use yarn ...shouldnt it be npm
I prefer it, both do the same job though
please, send me source code?
hi~what's your vscode theme?
I can't remember for this one :(
how to send message for a specific client
look at identifying people via a guid
What font are you using in MS Code ?
"editor.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace", - my configs are on Github gists.
Hi, great video, is there a finished product available? Maybe on glitch?
Afraid not :( I very rarely upload my stuff
what is the difference between WebSocket library and socket.io?
I can't think of the top of my head but I think how it polls...there was some underlying reason I didn't use socket.io -- but also mainly because I use WS for a personal project and I prefer it
@@CognitiveSurge socket io is a library built on top of websocket
ps love your tutorials would love if you could do a tdd style app for backend like your todoist app :)
socket.io under the hood uses websockets whenever it's possible, but when the client doesn't support them then it tries to imitate websockets (probably by http polling). So basically the main difference is backward compatibility.
Im getting a object Blob
Sorry, not sure
lmao @ 7min
please do user-auth with form validation with react+mysql+nodejs. no third party.
I've got a massive project with this, but it will take some time to record, next few weeks I'll record it