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

  Рет қаралды 116,195

LogRocket

4 жыл бұрын

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-chat
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/

Пікірлер: 56
@nonamemembers4494
@nonamemembers4494 Жыл бұрын
the one and only explanation for pure websocket with react app on entire youtube
@msenkovich3799
@msenkovich3799 3 жыл бұрын
Loved this video. Nice work!
@armino_dev
@armino_dev 4 жыл бұрын
Great tutorial! Thank you.
@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 ............👍
@milindmorey5309
@milindmorey5309 Жыл бұрын
Very Nice Tutorial , Thank You !
@markhaur6092
@markhaur6092 3 жыл бұрын
thank you for your informative video. great effort
@SudhanshuRamTripathi
@SudhanshuRamTripathi 2 жыл бұрын
Beautiful explanation 💯💯❤️❤️ 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!
@justin.ndwiga
@justin.ndwiga Жыл бұрын
This looks like a conversation Dinesh and Gilfoyle would have 😂👌🏽
@leeladharkanthamreddi1460
@leeladharkanthamreddi1460 Жыл бұрын
Nicely Explained, Thanks
@johncena-mw3ge
@johncena-mw3ge 3 жыл бұрын
Good to see a fellow "Silicon Valley" fan :D
@philipfuster2282
@philipfuster2282 3 жыл бұрын
Great Tutorial! Thank you so much :)
@vantung2210
@vantung2210 2 жыл бұрын
Thanks a lot. It helped me.
@akshatlifts1446
@akshatlifts1446 8 ай бұрын
thankyou soo much
@shuhaozhang7332
@shuhaozhang7332 2 жыл бұрын
Gilfoyle and Dinesh lol! What an ending
@navinrangar2626
@navinrangar2626 Жыл бұрын
nice thankyou
@Arrezzz
@Arrezzz 2 жыл бұрын
tyvm! class components super deprecated by now though.
@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?
@evgenylevchenya8734
@evgenylevchenya8734 2 жыл бұрын
It's the class component in 2020
@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?
@littlebitprogrammer778
@littlebitprogrammer778 3 жыл бұрын
how to detect real-time update from an API ?
@develop_it
@develop_it 2 жыл бұрын
ws protocol name is for tcp?
@fardinkhan3993
@fardinkhan3993 2 жыл бұрын
How to do this in functional component?
@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
@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!
@jatinbatra6513
@jatinbatra6513 Ай бұрын
how to deploy it on github
@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
HOW DID HE WIN? 😱
00:33
Topper Guild
Рет қаралды 43 МЛН
1 or 2?🐄
00:12
Kan Andrey
Рет қаралды 55 МЛН
Nutella bro sis family Challenge 😋
00:31
Mr. Clabik
Рет қаралды 13 МЛН
1$ vs 500$ ВИРТУАЛЬНАЯ РЕАЛЬНОСТЬ !
23:20
GoldenBurst
Рет қаралды 1,7 МЛН
Clicks чехол-клавиатура для iPhone ⌨️
0:59
Samsung Galaxy 🔥 #shorts  #trending #youtubeshorts  #shortvideo ujjawal4u
0:10
Ujjawal4u. 120k Views . 4 hours ago
Рет қаралды 6 МЛН
$1 vs $100,000 Slow Motion Camera!
0:44
Hafu Go
Рет қаралды 21 МЛН
تجربة أغرب توصيلة شحن ضد القطع تماما
0:56
صدام العزي
Рет қаралды 51 МЛН