React WebSocket Demo

Exploring the use of WebSockets while maintaining performance and managing connection cleanup.

This is a small projet to demonstrate the use of WebSockets in React. The WebSocket API allows for two way communication between a client and a server.

WebSockets are an ideal use-case for a stock ticker, which has been built here. Stock data is updated in real time from a server every few seconds.

If the WebSocket connection is lost, an error banner is shown to indicate this to the user. A attempt is made to re-connection every few seconds.

For a project like this, consideration must be given to performance as well as clean up. This project manages both, by ensuring unused socket connections are terminated and components are not unnecessarily re-rendered.

To facilitate this, Redux-Saga is used to clean up any unused connections, and Reselect creates memoized selectors which caches output based on input.

A sample websocket server has been included with this project (NodeJS) and the source code is on github.com/matfin/react-websocket-demo.