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

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

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.

[nonamemembers]

the one and only explanation for pure websocket with react app on entire youtube

[I_gusto]

This looks like a conversation Dinesh and Gilfoyle would have 😂👌🏽

[nuelakinsiku]

how do you suggest i send header authorization to the header using typescript I keep getting errors do websocket accept headed arguements like HTTP?

[kevin-ruoe]

6:26 Is there a possibility to get two same IDs with that method?

[johncena-mwge]

Good to see a fellow "Silicon Valley" fan :D

[akshatlifts]

but when we deploy it to remote server it doest work it show websoket connection failed

[shuhaozhang]

Gilfoyle and Dinesh lol! What an ending

[Annie-czjw]

Oh my goodness thank you! For the clear explanation, giving the complete source code, and it's so pretty!

[littlebitprogrammer]

how to detect real-time update from an API ?

[unnathi]

Hi, the tutorial is too good, thanks. Where does this data get store?

[ringoaikocascade]

This is one of the most efficient, cut to the point tutorials I've ever had. Thank you.

[CaratBooD]

What happens if you close the tab, will you lose the messages?

[rajkishorejena]

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

[Arrezzz]

tyvm!
class components super deprecated by now though.

[fardinkhan]

How to do this in functional component?

[p.rajesh]

'PORT' is not recognized as an internal or external command....this prb m getting in client side, in package.json..cn any1 hlp?

[markhaur]

thank you for your informative video. great effort

[mrkhoros]

Well this guy copy pastes code and poorly explain them. This is not a tutorial