javascript - Client not receiving Server Sent Events from Express.js server - Stack Overflow

admin管理员组

文章数量:1394554

I have a Next.js (React) client that I've setup to listen to Server-Sent Events from my Node.js/Express.js server, but it doesn't seem to be receiving messages for some reason.

The open and error events of EventSource are working properly, but whenever I use .onmessage it doesn't detect anything.

What am I doing wrong?

Express.js Code:

router.get('/stream/:walletAddress', async (req, res, next) => {
    try {
        res.set({
            Connection: 'keep-alive',
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Access-Control-Allow-Origin': '*'
        });
        res.flushHeaders();

        let x = 0;
        const id = setInterval(() => {
            res.write(`event: message\n`);
            res.write(`data: ${x++}\n\n`);
        }, 2000);

        res.on('close', () => {
            console.log('Client closed.');
            clearInterval(id);
        });
    } catch (err) {
        next(err);
    }
});

Next.js (React) Code:

import { API_URL } from 'config';
import { useWalletStore } from 'src/stores';


export const FetchTxsProvider = ({ children }) => {
    const safeSdkReader = useWalletStore(state => state.safeSdkReader);

    useEffect(() => {
        const eventSource = new EventSource(
            `${API_URL}/transactions/stream/${safeSdkReader.getAddress()}`
        );

        eventSource.onopen = function (e) {
            console.log('Successfully connected.');
        };

        eventSource.onerror = function (err) {
            console.error(err);
            eventSource.close();
        };

        // ! Should fire here but doesn't!
        eventSource.onmessage = function (event) {
            console.log('Event: ', event);
        };

        return () => {
            console.log('Connection closed.');
            eventSource.close();
        };
    }, [safeSdkReader]);

    return <>{children}</>
};

I have a Next.js (React) client that I've setup to listen to Server-Sent Events from my Node.js/Express.js server, but it doesn't seem to be receiving messages for some reason.

The open and error events of EventSource are working properly, but whenever I use .onmessage it doesn't detect anything.

What am I doing wrong?

Express.js Code:

router.get('/stream/:walletAddress', async (req, res, next) => {
    try {
        res.set({
            Connection: 'keep-alive',
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Access-Control-Allow-Origin': '*'
        });
        res.flushHeaders();

        let x = 0;
        const id = setInterval(() => {
            res.write(`event: message\n`);
            res.write(`data: ${x++}\n\n`);
        }, 2000);

        res.on('close', () => {
            console.log('Client closed.');
            clearInterval(id);
        });
    } catch (err) {
        next(err);
    }
});

Next.js (React) Code:

import { API_URL } from 'config';
import { useWalletStore } from 'src/stores';


export const FetchTxsProvider = ({ children }) => {
    const safeSdkReader = useWalletStore(state => state.safeSdkReader);

    useEffect(() => {
        const eventSource = new EventSource(
            `${API_URL}/transactions/stream/${safeSdkReader.getAddress()}`
        );

        eventSource.onopen = function (e) {
            console.log('Successfully connected.');
        };

        eventSource.onerror = function (err) {
            console.error(err);
            eventSource.close();
        };

        // ! Should fire here but doesn't!
        eventSource.onmessage = function (event) {
            console.log('Event: ', event);
        };

        return () => {
            console.log('Connection closed.');
            eventSource.close();
        };
    }, [safeSdkReader]);

    return <>{children}</>
};

• javascript
• node.js
• reactjs
• express
• server-sent-events

Share Improve this question Follow asked May 31, 2023 at 15:33 Adrian D.Adrian D. 75411 gold badge77 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

Don't know why, but the headers were missing 'Content-Encoding': 'none'.

res.writeHead(200, {
  'Content-Type': 'text/event-stream',
  'Cache-Control': 'no-cache',          
  'Content-Encoding': 'none',
  'Connection': 'keep-alive',
  'Access-Control-Allow-Origin': '*'
});

A lot of times dealing with pub/sub systems, the subscriber or consumer can connect to the broker which can fire all of the events of starting, but getting no messages. Are you sure you’re connected to the right destination?

The Next.js is looking for /transactions/stream/... where Express.js looks like it might be pointing to just the resource /stream/.... Is that expected?

本文标签： javascriptClient not receiving Server Sent Events from Expressjs serverStack Overflow