Тёмный

WebSockets tutorial: How to go real-time with Node and React 

LogRocket
Подписаться 12 тыс.
Просмотров 116 тыс.
50% 1

Learn how to build a real-time chat app with Node and React using WebSockets.
Introduction -- 00:00
HTTP protocol -- 00:17
Build a chat app -- 03:01
Create the server -- 04:09
Creat the client --07:00
Implement a login functionality -- 11:52
Implement user interface -- 13:45
Conclusion -- 19:57
GitHub repo: github.com/kokanek/web-socket...
Try LogRocket for free: logrocket.com/?yt43
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Try it for free: logrocket.com/signup/

Наука

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

 

10 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@msenkovich3799
@msenkovich3799 3 года назад
Loved this video. Nice work!
@armino_dev
@armino_dev 4 года назад
Great tutorial! Thank you.
@nonamemembers4494
@nonamemembers4494 Год назад
the one and only explanation for pure websocket with react app on entire youtube
@milindmorey5309
@milindmorey5309 Год назад
Very Nice Tutorial , Thank You !
@markhaur6092
@markhaur6092 3 года назад
thank you for your informative video. great effort
@leeladharkanthamreddi1460
@leeladharkanthamreddi1460 Год назад
Nicely Explained, Thanks
@Annie-cz4jw
@Annie-cz4jw 2 года назад
Oh my goodness thank you! For the clear explanation, giving the complete source code, and it's so pretty!
@SudhanshuRamTripathi
@SudhanshuRamTripathi 2 года назад
Beautiful explanation 💯💯❤️❤️ Thanks 👍
@rajkishorejena5250
@rajkishorejena5250 3 года назад
Thanks, Exert Video I am looking for, which contains the required information only. Special thanks for integration with Reactjs in this short period of Video tutorial. Continue it ............👍
@justin.ndwiga
@justin.ndwiga Год назад
This looks like a conversation Dinesh and Gilfoyle would have 😂👌🏽
@vantung2210
@vantung2210 2 года назад
Thanks a lot. It helped me.
@philipfuster2282
@philipfuster2282 3 года назад
Great Tutorial! Thank you so much :)
@akshatlifts1446
@akshatlifts1446 8 месяцев назад
thankyou soo much
@johncena-mw3ge
@johncena-mw3ge 3 года назад
Good to see a fellow "Silicon Valley" fan :D
@nuelakinsiku8702
@nuelakinsiku8702 Год назад
how do you suggest i send header authorization to the header using typescript I keep getting errors do websocket accept headed arguements like HTTP?
@navinrangar2626
@navinrangar2626 Год назад
nice thankyou
@shuhaozhang7332
@shuhaozhang7332 2 года назад
Gilfoyle and Dinesh lol! What an ending
@kevin-ru6oe
@kevin-ru6oe 3 года назад
6:26 Is there a possibility to get two same IDs with that method?
@unnathi7041
@unnathi7041 Год назад
Hi, the tutorial is too good, thanks. Where does this data get store?
@Arrezzz
@Arrezzz 2 года назад
tyvm! class components super deprecated by now though.
@littlebitprogrammer778
@littlebitprogrammer778 3 года назад
how to detect real-time update from an API ?
@develop_it
@develop_it 2 года назад
ws protocol name is for tcp?
@Ann-eb8hh
@Ann-eb8hh 2 года назад
What happens if you close the tab, will you lose the messages?
@akshatlifts1446
@akshatlifts1446 8 месяцев назад
but when we deploy it to remote server it doest work it show websoket connection failed
@fardinkhan3993
@fardinkhan3993 2 года назад
How to do this in functional component?
@jatinbatra6513
@jatinbatra6513 28 дней назад
how to deploy it on github
@evgenylevchenya8734
@evgenylevchenya8734 2 года назад
It's the class component in 2020
@ringoaikocascade
@ringoaikocascade 4 года назад
This is one of the most efficient, cut to the point tutorials I've ever had. Thank you.
@ringoaikocascade
@ringoaikocascade 4 года назад
And on top of that, the company manages to slip their ads a bunch of time and still not annoying at all because the ads are efficient as well haha
@p.rajesh942
@p.rajesh942 3 года назад
'PORT' is not recognized as an internal or external command....this prb m getting in client side,in package.json..cn any1 hlp?
@shivpatel4499
@shivpatel4499 3 года назад
write set PORT=1992 && react-scripts-start
@viswatejbhamidipati7716
@viswatejbhamidipati7716 3 года назад
@@shivpatel4499 it didnt work for me help!
@JazzTheDogOfWar
@JazzTheDogOfWar 2 года назад
the start script should be "start": "SET PORT=1992 && react-scripts start"
@loganwright3423
@loganwright3423 3 года назад
ComponentDidMount in 2020?
@severedghost
@severedghost 3 года назад
The repo for this code is nearly 3 years old.
@loganwright3423
@loganwright3423 3 года назад
Yikes. Looks like instead of creating updated content, they just made a video explaining old code.
@javiermartin9627
@javiermartin9627 3 года назад
​@@loganwright3423 stop heating and start making videos showing us your programming skills. He's helping people, what's wrong with you?
@loganwright3423
@loganwright3423 3 года назад
@@javiermartin9627 sure. What video do you want me to make first? Want me to do websockets with hooks?
@markvaldez8602
@markvaldez8602 3 года назад
@@loganwright3423 yes please!
@taoufikcomputerscience5222
@taoufikcomputerscience5222 Год назад
bad sound
@mrkhoros
@mrkhoros 4 года назад
Well this guy copy pastes code and poorly explain them. This is not a tutorial
@hm-zg3ee
@hm-zg3ee 3 года назад
lol
@severedghost
@severedghost 3 года назад
Some of it is also outdated as well.
@coltonsweeney9428
@coltonsweeney9428 3 года назад
You're not wrong, also what the hell is that UUID function @ 5:17? Just use the UUID package lol
@raisedbyreels
@raisedbyreels 3 года назад
I suspected as much thanks for confirming my suspicions
Далее
Cat Plays with Window Washer
00:22
Просмотров 2,1 млн
How React Hooks can replace React Router
29:36
Просмотров 12 тыс.
How To Create A Messaging App With Socket.io And React
1:44:08
Don't Use Websockets (Until You Try This…)
6:46
Просмотров 288 тыс.
WebSocket in NodeJS | Socket.IO - Real Time Messaging
32:27
How to use WebSockets with React and Node
1:11:51
Просмотров 21 тыс.
КРУТОЙ ТЕЛЕФОН
0:16
Просмотров 4,8 млн