CODEWITHSUNDEEP
node.jsreactjswebsocket
Mike K
Mike K

Reputation: 6501

What is this websocket that is upgraded when using Node and React?

I setup a basic node backend and ran create react app and I've noticed the following in my network tab:

img1

img2

I didn't set up this WebSocket and I'm curious what is it doing and where is it coming from?

Upvotes: -1

Views: 96

Answers (1)

Arpitha Chandrashekara
Arpitha Chandrashekara

Reputation: 1137

Create React App uses Webpack for bundling and Hot Module Replacement (HMR) of code on the Browser. Webpack internally uses Websockets for HMR (Webpack feature that updates your Javascript without a browser reload)

You can read more about it here - https://www.javascriptstuff.com/understanding-hmr/

If you carefully read this article, under Update Flow, point 4 talks about how websockets are used for hot module replacement.

HMR Server uses websockets to inform the HMR Runtime that it needs an update. HMR Runtime requests those updates over HTTP

So what you are seeing in the network tab is basically the websocket which would be connecting to your webpack dev server to refresh the code on the UI.

Upvotes: 3

Related Questions