How to use WebSockets - JavaScript Tutorial For Beginners

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.mozilla.org/en-US/d...
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

[@thebadshave503]

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.

[@ramsp35]

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.

[@JC-fd8ho]

where is those 25 pages?

[@DarkOceanShark]

@@JC-fd8ho Bruh...

[@untildawn5714]

After watching this, I upgraded a customer's website where she could send images to her dropbox API over websocket. Thank you

[@b10gaming2]

why she??? hmmmm

[@user-ux2kk5vp7m]

@@b10gaming2 because the customer is a woman

[@eqisoftcom]

Wow! The best tutorial on WebSockets for beginners ever. Thanks.

[@pato6350]

What an amazing channel! Found you 3 videos back, totally love your videos! Thank you!

[@HenokWehibe]

I knew I found what I was looking for after watching just one minute, great work

[@JeremyJRutherford]

A super simple and easy to understand introduction to WebSockets - thanks!!

[@tborges3736]

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.

[@narendrasudrik5073]

Very well explained with conciseness and clarity. Also, thank you very much for the reference link. Much appreciated. !!

[@JohnDoe-ov6uu]

Fantastic video, mate! Simple, and to the point.

[@honey30prachi]

loved the simplicity and to-the-point approach of explanation. Great Work

[@jordanski5421]

Clear and easy to understand, couldn't ask for more.

[@fonta1009]

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

[@UnknownEntity606]

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.

[@jameshelton9878]

Wow! Great tutorial! The pacing was great and you showed me the basics. (You also showed me VS Code lol)

[@CoderArchive]

Nice! web sockets are pretty amazing!

[@DipanjanPatra]

This is an amazing introduction video! No time wasted.

[@pramadito]

wow this one is really to the point. really easy to follow. thanks~

[@bigywhile8164]

Thank you kindly! Clear explanation with demonstrative example.

[@RaviKaroria]

Short and sweet. The only content needed to get us started. Thanks.

[@dcode-software]

No problem

[@xk2102]

Clear and to the point, thank you!

[@Marc-ek6gf]

Thank you so much for this clear tutorial!!

[@samsonM08]

Thank you.! Great exaplanation, subscribed.!

[@yitzchaksviridyuk932]

Thanks a lot! Great video 👍

[@drbalontotis2474]

short and very useful, thanks man

[@blackslash4954]

OP tutorial. Thank you for clarifying the concept.

[@gregzho5843]

The is the vest tutorial for any kind of web frameworks like PHP, Perl, Python, Rails. Appreciate.

[@viktorlernt6063]

A very very very nice explanation. Thank you!

[@edinetgrunhed6000]

this is underrated tutorial.

[@SemenAlexndrovich]

Very nice video. Thanks a lot!

[@DarianBenam]

Fantastic tutorial!

[@Zentamusic]

amazing video thank you so much!

[@BioInASec]

Best of the best man , Thank you so much

[@gemilaguinaldo6723]

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

[@sebastianblackley9291]

Really good tutorial. Thanks

[@h.nazmulhassanrakib5058]

very good Explenation. thanks a lot

[@bolajibello8917]

Awesome! Please let's dive in deeper

[@starriet]

simple but great example :)

[@davidsyengo1893]

Straight to the point

[@techwithshudarsan559]

Very good tutorial for beginners.

[@pratikmehta6207]

Very Nice Explanation in such a short video!

[@dcode-software]

Glad you liked it!

[@rostyslav5334]

Thanks for the content!

[@dcode-software]

No worries!

[@eidenblock]

very good explanation, ty

[@TobCraft]

Very cool video :) thx 🙏🏼

[@cm3462]

This is so good dude.

[@kenedyhenrique141]

Very useful, thank you!

[@dcode-software]

No worries Kenedy!

[@thatoyaonebogopa9483]

Great and simple intro.

[@AkamiChannel]

Great tutorial.

[@ivosuper]

Best explaination ever :)

[@basado73832]

Put it in 1.5 velocity, it's still understandable, great diction, thanks a lot.

[@aravind.a]

Good Information bro.

[@xdmemeguy]

Very useful video

[@Sneak2Win]

great tutorial!

[@dcode-software]

You're welcome!

[@eof_lemongrab]

Cheers, Dom!

[@dcode-software]

No worries Earl

[@sunilpatidar7056]

superb explained thanks

[@dcode-software]

You're welcome 🙂

[@matheusmgp1]

THANK YOU

[@thomasgardner479]

life saver mate

[@killoucreepergames1181]

Ty !

[@rameshh.b523]

Superb!!

[@soladersomay3594]

Thank alot

[@ankurbhatia7898]

Hi, great video. Do ou also have an example with websocket over tls?

[@ramrmarquez]

ESTE ES. EL MEJOR. Y MAS SENCILLO. VIDEO SOBRE COMO USAR E IMPLEMENTAR. WEBSOCKETS USANDO. LA BIBLIOTECA "WS" MUCHAS MUCHAS GRACIAS ..... : )

[@federicokrum]

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?

[@dcode-software]

Hey, yeah of course :) thank you

[@noah_ishappy]

Dcode : Video Me : 😁😁😁

[@petaca39]

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

[@webuiuxdeveloper3092]

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

[@lookalike6270]

Would be great if you could do a more advanced one, of say a Server supporting multiple Clients :)

[@giuseppezeni3960]

Useful

[@davidfernandotorres3484]

great explanation! I also like your vscode theme, what's their name?

[@user-dk1ru3yx9i]

thx!

[@lolfail26]

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

[@fusion.chronicles]

Can you please make a video on this?

[@enesyurtsever]

@@fusion.chronicles Why don't you?

[@harrisoncramer]

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.

[@cm3462]

see @hearbeathero comment below. Since v8 of ws, data is passed as a buffer

[@enesyurtsever]

That's what I looking for! thnks

[@kayan_dev]

رائع Amazing

[@kalinduR96]

thanks

[@brunoichbinfdp]

mine has just shown up ' upgrade is required '

[@JohnDoe-rk7ex]

Is it posible to do a websockets tutorial using php and js? Great video.

[@navjotsingh2457]

Ty

[@kmtsvetanov]

10/10

[@GvardilChannel]

hey! thank you for the tutorial, what the kinda theme do you use?

[@GvardilChannel]

and font?)

[@JNET_Reloaded]

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?

[@_.sunnyraj._]

Make a tutorial on real time chat app using web socket

[@farshadrasa5443]

I get a Blob as data. Any idea why?

[@deei5130]

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.

[@Fun-io9kv]

Thanx for tut. Can we use ws for client to client/p2p communication?

[@dcode-software]

Yep, you can

[@dcode-software]

Sorry no you probably can't as you need a web sockets server to connect to

[@chesterxp508]

GoodJob!

[@dchubad]

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

[@kangsan2014]

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.

[@RomanH91]

Good keyboard sound. What is a brand of keyboard?

[@dcode-software]

Cooler Master MasterKeys Pro S RGB with Cherry MX Blue Switches

[@nitromaen]

My seasoned nerd ears recognised the Cherry Blue switches immediately. Alas, I'm not impressed. The Brown gang remains unsurpassed.

[@ItIsJan]

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

[@mnchabel8402]

What about cors? how does it just connect?

[@enesyurtsever]

12:18 in my message event the data is coming as blob

[@016632]

can you do a fs tutorial writing data to file???

[@HenryPan]

Cool

[@_.sunnyraj._]

0 DISLIKES EXPLAINS IT ALL

[@LidiyaChernomorova]

my localhost says: Failed to load resource: the server responded with a status of 426 (Upgrade Required) =((( why can it happen?

[@theartist8835]

make sure that the connection and upgrade headers are set.

[@lonewolfcoding5208]

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

[@marcheler7009]

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 ?

[@heartbeathero]

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

[@cm3462]

@@heartbeathero thanks for taking the trouble to write this out

[@naveen1000]

Is server writing in python works?

[@miraikuriyama6418]

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?

[@dcode-software]

Unfortunately this depends on the service provider - you'd need to check your provider and see if they support Node.js and WebSocket connections

[@emielmuter3990]

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!

[@dcode-software]

It's because you need to be using the back ticks, like this: ` For more info, see JavaScript Template Strings