| Info |
|---|
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
| Code Block |
|---|
|
pip install flask
pip install flask_cors |
Unarchive the following
| View file |
|---|
| name | python-datagenerator.zip |
|---|
|
file below to a unique location on your machine (somewhere where it’s easy to find)
| View file |
|---|
| name | python-datagenerator.zip |
|---|
|
From the command line navigate to the folder where you have extracted this archive, and run the following command
| Code Block |
|---|
|
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 the command line install the following React packages
| Code Block |
|---|
|
npm install rxjs
npm install rxjs-hooks |
...
Use the command and create a new react application
| Code Block |
|---|
|
npx create-react-app <directory> |
...
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
| Code Block |
|---|
|
export const endpointUrls = {
pythonStream: 'http://localhost:8080/streamTest/sse'
} |
...
Run your React application with