Using an SSE Stream in a ReactJS application

Owned by Selvyn Wright
Last updated: Aug 29, 2019
2 min read

The code demonstrates how to consume an SSE stream in a ReactJS application.

For extra info if you are lost in the code see

HTML5 SSE (streaming data)

flask

Setup for Python

Install Python - https://www.python.org/downloads/

Using the command line install the following python packages

pip install flask pip install flask_cors

Unarchive the file below to a unique location on your machine (somewhere where it’s easy to find)

 

From the command line navigate to the folder where you have extracted this archive, and run the following command

python webServiceStream.py

Observe the output, it should conclude with a message saying Running on http://0.0.0.0:8080/ (Press CTRL+C to quit)

Using your browser, enter the URL http://localhost:8080, you should see the message “Data Generator is running…”

Change the URL to http://localhost:8080/streamTest/, you should now see a stream of data (this is not a HTML5 SSE stream).

Change the URL to http://localhost:8080/streamTest/sse/, you should now see a stream of data (this is a HTML5 SSE stream).

You are now ready to connect your React or Angular view to the stream.

Setup for React

install Node.js - https://nodejs.org/en/download/

Using the command line install the following React packages

npm install rxjs npm install rxjs-hooks

Running the application

Use the command and create a new react application

 

Open the project in your IDE

Replace the code in App.js with the code below

Note: The endpointUrls.pythonStream should be replaced with the URL for your own SSE stream of data.

 

Create a config.jsx file and add the code below into it. Setting the pythonStream field to the URL that the python application is streaming the HTML5 SSE data on.

config.jsx

 

Run your React application with