How to use WebSockets - JavaScript Tutorial For Beginners
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- In today's video I'll be taking you through the basics of creating a WebSockets application - we'll be covering the client side and the server side to send messages between the two.
WebSockets allow for two-way, event-driven communication between the web browser and a back-end WebSockets server.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozi...
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #websockets
Love the way you explained 25 pages of theory with a simple example. Direct to the point and no beating around the bush. Thanks a lot for the simple and crisp tutorial.
where is those 25 pages?
@@JC-fd8ho Bruh...
I have to say I've watched a couple videos as I try to teach myself WS, most of them trying to assemble a chat app. Your tutorial is so clear and to the point that I didn't even need the whole chat app dressing and could figure it out on my own. Thanks for explaining the actual point so well. Earned subscribe.
After watching this, I upgraded a customer's website where she could send images to her dropbox API over websocket. Thank you
why she??? hmmmm
@@b10gaming2 because the customer is a woman
Wow! The best tutorial on WebSockets for beginners ever. Thanks.
What an amazing channel! Found you 3 videos back, totally love your videos! Thank you!
loved the simplicity and to-the-point approach of explanation. Great Work
This was.... so beautiful. You don't know how many resources I went through trying to get a basic understanding of websockets. So much BS theory. Thank you.
Thanks for the coding tutorial and thanks for showing in the inspect network tab, showing the message sent/received. That was really important to me as well.
I knew I found what I was looking for after watching just one minute, great work
bro i didnt even notice but i watched another of ur videos and i subbed and i liked then i wanted to know more about webscockets for my website and i say you came first for me and when it worked i said i was gonna sub but its you again for me you are a savior you deserve more then 123k subs
Thank you.! Great exaplanation, subscribed.!
The is the vest tutorial for any kind of web frameworks like PHP, Perl, Python, Rails. Appreciate.
Very well explained with conciseness and clarity. Also, thank you very much for the reference link. Much appreciated. !!
Thank you kindly! Clear explanation with demonstrative example.
This is an amazing introduction video! No time wasted.
short and very useful, thanks man
Short and sweet. The only content needed to get us started. Thanks.
No problem
Fantastic video, mate! Simple, and to the point.
this is underrated tutorial.
Clear and easy to understand, couldn't ask for more.
OP tutorial.
Thank you for clarifying the concept.
this was so simple and easy! thanks a ton!
You're welcome!
This is great but on the NodeJS backend you'll have to convert your data to a string before trying to turn it uppercase. It's coming over for me as a buffer type, not a string, and the `toString()` method is unavailable. Not sure why it's working for him without that type conversion.
see @hearbeathero comment below. Since v8 of ws, data is passed as a buffer
That's what I looking for! thnks
Maybe you could make a video about websockets without any external modules, it took me almost a month because the only guide that can be found is a documentation that explains how it works.
By making a video about it i'm pretty sure you could get a much bigger channel because i've seen how many people are trying to do this but can't
Can you please make a video on this?
@@fusion.chronicles Why don't you?
A super simple and easy to understand introduction to WebSockets - thanks!!
Nice! web sockets are pretty amazing!
Put it in 1.5 velocity, it's still understandable, great diction, thanks a lot.
very good explanation, ty
Really good tutorial. Thanks
thanks for this man! also if you are having troubles fetching http inside websockets (for experimentation), use axios. had a problem using the default fetch api of js
If, in the terminal, you're getting the "Hey, how's it going?" message back as a string buffer instead of the actual sentence, you need to decode it before logging it out, using the string decoder module.
At the top of index.js:
------------------
const { StringDecoder } = require('string_decoder');
const decoder = new StringDecoder('utf8');
-----------------
And, in the connection event:
-----------------
ws.on('message', data => {
console.log('client has sent us', decoder.write(data))
})
-----------------
That makes the message in the terminal appear decoded to a string.
Thank you, worked for me!
A very very very nice explanation. Thank you!
Thanks a lot! Great video 👍
Very Nice Explanation in such a short video!
Glad you liked it!
very good Explenation. thanks a lot
Very cool video :) thx 🙏🏼
This is so good dude.
Hi, great video. Do ou also have an example with websocket over tls?
Best of the best man , Thank you so much
simple but great example :)
good video a query how does the real implementation of the server or directly perform the transfer through an ftp or is there a previous step when performing the ftp
Straight to the point
Best explaination ever :)
12:18 in my message event the data is coming as blob
Awesome! Please let's dive in deeper
Wow! Great tutorial! The pacing was great and you showed me the basics. (You also showed me VS Code lol)
great explanation! I also like your vscode theme, what's their name?
Hey @dcode, can you please make a video on how to setup WebSocket client in React JS?
It will be a great help of yours.
TIA
I am getting "TypeError: data.toUpperCase is not a function" when trying to add the returning message from server.
Has the format of message changed in the mean time? ChatGPT suggests that I should convert the data to string first. Is this correct?
ESTE ES. EL MEJOR. Y MAS SENCILLO. VIDEO SOBRE COMO USAR E IMPLEMENTAR. WEBSOCKETS USANDO. LA BIBLIOTECA "WS"
MUCHAS MUCHAS GRACIAS ..... : )
Great and simple intro.
Can you do a video tutorial on Vanilla Javascript on how to write a websocket and server. I can't use Node JS or AJAX or any other downloadable other langauges at my workplace. Please provide a pure Vanilla Javascript tutorial. Thank you so much if you can.
You are sooooo good explaining !! Can you do this same thing but with multiple clients connecting and the server distinguishing the different clients? Like a tic tac toe game or something similar?
Hey, yeah of course :) thank you
amazing video thank you so much!
Thank you so much for this clear tutorial!!
Thanks for the content!
No worries!
how can i disconnect another connected user? I am tryig to create a 'kick' function so i can disconnect pests from my server. I have a chatroom where some people need to be removed. I can not find anything on making commands like these. thanks
Clear and to the point, thank you!
Good keyboard sound. What is a brand of keyboard?
Cooler Master MasterKeys Pro S RGB with Cherry MX Blue Switches
My seasoned nerd ears recognised the Cherry Blue switches immediately. Alas, I'm not impressed. The Brown gang remains unsurpassed.
hey! thank you for the tutorial, what the kinda theme do you use?
and font?)
life saver mate
Very good tutorial for beginners.
Fantastic tutorial!
wow this one is really to the point. really easy to follow. thanks~
Would be great if you could do a more advanced one, of say a Server supporting multiple Clients :)
Superb!!
my localhost says: Failed to load resource: the server responded with a status of 426 (Upgrade Required) =((( why can it happen?
make sure that the connection and upgrade headers are set.
Is it posible to do a websockets tutorial using php and js? Great video.
Thanx for tut. Can we use ws for client to client/p2p communication?
Yep, you can
Sorry no you probably can't as you need a web sockets server to connect to
superb explained thanks
You're welcome 🙂
Make a tutorial on real time chat app using web socket
THANK YOU
Great tutorial.
what about node js that starts from inside php, i have a program that does that, but trying to goto wss from just ws even with the cert and key files fails to launch due to syntax error, can you help with that at all?
Very useful video
Cheers, Dom!
No worries Earl
Good Information bro.
Very useful, thank you!
No worries Kenedy!
What exactly do i do if i dont have a website but just a folder with a .html file that i open in the browser? like what port do i use
I get a Blob as data. Any idea why?
This might be a really dumb question but how do you use it when it is hosted online? how do you run the index.js on ws server?
Unfortunately this depends on the service provider - you'd need to check your provider and see if they support Node.js and WebSocket connections
great tutorial!
You're welcome!
10/10
I am trying to send sell or buy request by web socket instead of fetch request on console, is it possible?
Thank alot
It works on my local machine but If i try to access from another machine this other client cant connect, any idea of what happen?
can you do a fs tutorial writing data to file???
mine has just shown up ' upgrade is required '
I think it's because you opened the localhost:8082 on your browser. You should run the html file instead. As far as I understand, the port is for data that is sent in the background in this case
Dcode : Video
Me : 😁😁😁
What about cors? how does it just connect?
Nice video! And I have a question. Did you use some tool to route url: youtube.local/js/websockets/ ? Is it a http server?
Please tell me how the websocket server will work on real host if i don't have a terminal to make node index.js????????????????????????????????
idk why but when i try this example code
the "data" on server is type object so i ran into an error when i execute data.toUpperCase()
i have to convert it to a string fist whit String(data) and then i can run the "toUpperCase" Method on it .
can someone explain this to me ?
If toUpperCase isn't working then the following should explain why.
In version 8 of ws text messages are no longer decoded to "string" but are passed as "Buffer".
If you down grade to version 7.3.0 of ws then toUpperCase will work.
But its beter to use version 8 of ws and convert the Buffer into a string before you try changing it to upper case.
// ws.send(data.toUpperCase());
ws.send(String(data).toUpperCase());
More info here:
stackoverflow.com/questions/69485407/why-is-received-websocket-data-coming-out-as-a-buffer
More info here in the release of 8.0.0
github.com/websockets/ws/releases/tag/8.0.0
@@heartbeathero thanks for taking the trouble to write this out
Hi! I'm running into an issue regarding the ${data} part. When it logs 'Client has sent us ${data}' to the console, the message 'Hey how's it going does not appear, but the letters '${data}' themselves get logged. I'm new to js development and I'm at a loss for how to solve this. Do you have any suggestions? Thanks!
It's because you need to be using the back ticks, like this: `
For more info, see JavaScript Template Strings
what's ur VS code theme name ? :D
Useful
I always thought that javascript was kinda lame (Yeah, lame is the word), but after going kinda deeper into it, I found it so fvcking cool
like wtf js you surprised me.
Great vedio,i need to port a minecraft server to websocket,how can i do that
how can i deploy this on my webhosting
my webhosting use php server
and i use client browser on my computer
what about the downloaded libraries is it included like jquery javascript?
im sorry im new to this
because i use jquery and ajax and html5 and javascript not php on client and php on server to send receive from client to server and i use hidden password on the input field to send via ajax
thanks