SSE, WebSockets, or Polling? Build a Real-Time Stock App with React and Hono

1. middleware

   1 3 982 9.5 TypeScript

   monorepo for Hono third-party middleware/helpers/wrappers (by honojs)

   

   For the server I used @hono/node-ws and NodeJS's built in EventEmitter to update my endpoint when the data changed. For the client I created my own custom hook, which used the Singleton design pattern to manage open WebSocket connections to different urls and avoid duplication. I also added an optional valueParser function that will parse the value from a string to an object.

2. AppSignal

   www.appsignal.com sponsored

   Monitoring that respects your time & budget. APM, error tracking, and dashboards for modern web apps. Ten-minute setup, transparent flat pricing, and support from engineers who actually use the product.

   

3. Socket.io

   2 861 63,207 8.7 TypeScript

   Bidirectional and low-latency communication for every platform

   

   Complexity: WebSockets require you to handle connection lifecycle events, such as errors and reconnections. While the code example I provided could suffice for simple use cases, more complex use cases might arise, like automatic reconnection and queueing messages sent by the client when the connection wasn't open. For that, you can either extend this code or use an external library like react-use-websocket for a relatively lightweight react implementation or socketio for both client and server SDKs.

4. stock-market-feed

   3 1 2 6.1 TypeScript

   A quick demo of real-time updating techniques in React and Hono

   

   You can find the complete code for the project built in this article in this GitHub repository and a live demo in this URL. Happy coding!

5. hono

   4 127 32,088 9.6 TypeScript

   Web framework built on Web Standards

   

   Today we'll try to answer these questions by looking at some methods to stream real-time data and build our own small real-time stock market feed app in Hono and React to illustrate the differences between these methods. For the visual side of things we'll be using shadcn charts to display randomly generated data.

Suggest a related project