SSE: Receive JSON from a Flask server through EventSource API - reactjs

Question

I have a Flask application which responds to a ReactJS application primarily with json. This is important because the Flask app is sending objects from our postgres database.
Recently I started building a "feed" for our website. How I imagine it working: React client issues a GET request to the Flask server for the "items" which will populate the feed. I want to use the EventSource API, using a SSE/stream . This should yield much more fluid page rendering from the user's perspective and allow for much more data to be sent to the client with noticeable loading time (right?).
The problem: EventSource API seems to require a content_type = 'text/event-stream'... which is not ideal for sending objects which much more naturally send as JSON. When I try to send JSON and change the content_type to 'application/json', the browser complains that EventSource was expecting 'text/event-stream'.
My question: is there anything inherent to EventSource which restricts it to 'text/event-stream' responses?
Also! CORS is involved in this process. But I don't think its in the way, because it works for the rest of my app. so this is communication between an app hosted at localhost:5000 and localhost:3000.
Some code:
Flask Server
item_feed.py
#bp.get('/items/stream')
def item_stream():
count = request.args.get("count", None)
def stream_messages_to_client(count):
i = 0
while i < int(count):
data = { "message": "This is a test object."}
# message = "data: This is a test streamable message.\n\n" # This will be received.
message = json.dumps(data) # This will not be received--and this is what I want.
i += 1
yield message
# content_type = 'text/event-stream' # This will be received.
content_type = 'application/json' # This will not be received.
response = Response(stream_with_context(
stream_messages_to_client(count)
), content_type=content_type)
return response
React JS Client
ItemFeed.js
export const ItemFeed = () => {
let [searchParams, setSearchParams] = useSearchParams();
const defaultMessages = [];
const [messages, setMessages] = useState(defaultMessages);
const [isConnectionOpen, setIsConnectionOpen] = useState(false);
const paramsString = searchParams.toString();
const url = process.env.REACT_APP_SERVER + `/items/stream?${paramsString}`;
const eventSource = new EventSource(url, { withCredentials: true })
const handleConnectionOpen = () => {
setIsConnectionOpen(true);
}
const handleStreamedData = (e) => {
// const { message } = JSON.parse(e.data); // This will not parse
const message = e.data; // This will parse, assuming 'data: {{ message }}\n\n'
(messages.length < 10)
? setMessages([...messages, message])
: eventSource.close();
}
const handleConnectionClose = () => {
setIsConnectionOpen(false);
}
eventSource.onopen = handleConnectionOpen;
eventSource.onmessage = handleStreamedData;
eventSource.onclose = handleConnectionClose;
useEffect(() => {
// do something
}, [messages]);
return (
<div className="row">
<p>this is a test</p>
{messages.map((message, index) => (
<div className="col-12" key={message}>{ message }</div>
))}
</div>
);
}