How to use WebSockets - JavaScript Tutorial For Beginners

Подписаться 135 тыс.

Просмотров 183 тыс.

50% 1

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

Опубликовано:

1 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 171

@enesyurtsever 2 года назад

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

@thebadshave503 2 года назад

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.

@eqisoftcom 4 года назад

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

@heartbeathero 2 года назад

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 2 года назад

you're awesome

@untildawn5714 4 года назад

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

@b10gaming2 2 года назад

why she??? hmmmm

@user-ux2kk5vp7m 2 года назад

@@b10gaming2 because the customer is a woman

@ramsp35 3 года назад

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 2 года назад

where is those 25 pages?

@DarkOceanShark 2 года назад

@@JC-fd8ho Bruh...

@harrisoncramer 3 года назад

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 2 года назад

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

@enesyurtsever 2 года назад

That's what I looking for! thnks

@farshadrasa5443 2 года назад

I get a Blob as data. Any idea why?

@brunoichbinfdp 3 года назад

mine has just shown up ' upgrade is required '

@tokintmash Месяц назад

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

@LidiyaChernomorova 4 года назад

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

@theartist8835 4 года назад

make sure that the connection and upgrade headers are set.

@lolfail26 4 года назад

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 2 года назад

Can you please make a video on this?

@enesyurtsever 2 года назад

@@fusion.chronicles Why don't you?

@victorlindh3129 3 года назад

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.

@fredymon 2 года назад

Thank you, worked for me!

@CoderArchive 4 года назад

Nice! web sockets are pretty amazing!

@webuiuxdeveloper3092 4 года назад

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

@DiamondRoPlayz 2 года назад

This won't work, It will keep saying "Upgrade Required"

@user-rdr1712 Год назад

Facing same issue

@ViewFromAndromeda 8 месяцев назад

@@user-rdr1712 @DiamondRoPlayz Were you both able to figure the 'Upgrade Required' issue out? I am facing the same problem

@noah_edwrds 4 года назад

Dcode : Video Me : 😁😁😁

@fahmymicheal3983 12 дней назад

Please tell me how the websocket server will work on real host if i don't have a terminal to make node index.js????????????????????????????????

@tokintmash Месяц назад

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?

@fahmymicheal3983 24 дня назад

How the script work on real host, Thier i can't make node index.js??????????????????????? 😢😢😢😢😢😢😢😢😅😅😅

@_.sunnyraj._ 4 года назад

Make a tutorial on real time chat app using web socket

@dchubad 4 года назад

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

@ChessMar 3 года назад

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 2 года назад

@cm3462 2 года назад

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

@ramrmarquez 3 года назад

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

@user-rdr1712 Год назад

Getting as "Upgrade Required" in screen. Status Code:426 Upgrade Required

@kangsan2014 9 месяцев назад

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.

@samsonM08 5 месяцев назад

Thank you.! Great exaplanation, subscribed.!

@pato6350 3 года назад

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

@yitzchaksviridyuk932 4 года назад

Thanks a lot! Great video 👍

@_.sunnyraj._ 4 года назад

0 DISLIKES EXPLAINS IT ALL

@HenokWehibe 3 года назад

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

@GunzzYT Год назад

I keep getting this error "require is not defined" other then this i do get the data

@mgsystemsdesarrolloweb4749 2 года назад

When i duplicate browser tab i only recive data from the websocket on the windows who call

@rezanami3925 Год назад

I am trying to send sell or buy request by web socket instead of fetch request on console, is it possible?

@zederickvargas7254 2 года назад

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?

@JoshDeveloper Год назад

what's ur VS code theme name ? :D

@federicokrum Год назад

I see that if the server stops and restart, the connection disconnects and the page never tries to put that connection up again. How can I achieve that?

@TobCraft 2 года назад

Very cool video :) thx 🙏🏼

@crazyg7003 Год назад

Great vedio,i need to port a minecraft server to websocket,how can i do that

@MazanLabeeb 2 года назад

can you please tell me your vs code theme name 😔

@mnchabel8402 4 года назад

What about cors? how does it just connect?

@danielyang4832 2 года назад

if ur using windows please delete $ XD

@016632 4 месяца назад

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

@starriet 2 года назад

simple but great example :)

@TechiesUnofficial Год назад

How do you connect to a remote websocket server?

@markarthur1083 2 года назад

had to set allow origins for springboot

@darkus2015 Год назад

This video is brought to you by the F5 key

@UnknownEntity606 4 месяца назад

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.

@gregzho5843 Год назад

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

@JNET_Reloaded 3 года назад

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?

@deei5130 3 года назад

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.

@narendrasudrik5073 3 года назад

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

@JohnDoe-ov6uu 3 года назад

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

@ItIsJan 2 года назад

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

@lonewolfcoding5208 3 года назад

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

@blackslash4954 7 месяцев назад

OP tutorial. Thank you for clarifying the concept.

@lookalike6270 Год назад

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

@davidfernandotorres3484 2 года назад

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

@basado73832 2 года назад

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

@micha1518 Год назад

Websocket is not defined

@ankurbhatia7898 2 года назад

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

@bigywhile8164 2 года назад

Thank you kindly! Clear explanation with demonstrative example.

@kmtsvetanov 2 года назад

10/10

@fonta1009 11 месяцев назад

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

@kmtsvetanov 2 года назад

I want the ping pong

@Zentamusic 2 года назад

amazing video thank you so much!

@navjotsingh2457 2 года назад

@petaca39 2 года назад

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

@KostaTsourdalakis 4 года назад

Second.

@gemilaguinaldo6723 2 года назад

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

@soladersomay3594 2 года назад

Thank alot

@rameshh.b523 2 года назад

Superb!!

@sebastianblackley9291 Год назад

Really good tutorial. Thanks

@kalinduR96 2 года назад

thanks

@chesterxp508 Год назад

GoodJob!

@rostyslav5334 4 года назад

Thanks for the content!

@dcode-software 4 года назад

No worries!

@honey30prachi Год назад

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

@SagarHingal 2 месяца назад

this was so simple and easy! thanks a ton!

@dcode-software 2 месяца назад

You're welcome!

@argelpamintuango1956 2 года назад

how do they use that in real world application?

@tborges3736 2 года назад

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.

@drbalontotis2474 11 месяцев назад

short and very useful, thanks man

@emielmuter3990 3 года назад

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 3 года назад

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

@h.nazmulhassanrakib5058 3 года назад

very good Explenation. thanks a lot

@DipanjanPatra Год назад

This is an amazing introduction video! No time wasted.

@nonetrix3066 3 года назад

What is that VSCode theme?

@王世豪-h4n 2 года назад

Nice video! And I have a question. Did you use some tool to route url: youtube.local/js/websockets/ ? Is it a http server?

@viktorlernt6063 2 года назад

A very very very nice explanation. Thank you!

@eidenblock Год назад

very good explanation, ty

@JohnDoe-rk7ex 4 года назад

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

@BioInASec 2 года назад

Best of the best man , Thank you so much

@ivosuper Год назад

Best explaination ever :)

@edinetgrunhed6000 4 месяца назад

this is underrated tutorial.

@killoucreepergames1181 3 года назад

Ty !

@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