The code demonstrates how to consume an SSE stream in a ReactJS application.
Note: The endpointUrls.dockerurlwindowsvb should be replaced with the URL for your own SSE stream of data.
import React, { useState } from 'react'; import { useObservable } from 'rxjs-hooks'; import { Observable } from 'rxjs'; import { map, withLatestFrom } from 'rxjs/operators'; import { endpointUrls } from './config'; const stringObservable = Observable.create(observer => { const source = new EventSource(endpointUrls.dockerurlwindowsvb); source.addEventListener('message', (messageEvent) => { console.log(messageEvent); observer.next(messageEvent.data); }, false); }); function App() { const [stringArray, setStringArray] = useState([]); useObservable( state => stringObservable.pipe( withLatestFrom(state), map(([state]) => { let updatedStringArray = stringArray; updatedStringArray.unshift(state); if (updatedStringArray.length >= 50) { updatedStringArray.pop(); } setStringArray(updatedStringArray); return state; }) ) ); return ( <> {stringArray ? stringArray.map((message, index) => <p key={index}>{message}</p>) : <p>Loading...</p>} </> ); } export default App;