Vue.Js + Node.js - SSE not received by client

Question

I'm writing a webapplication that is split into a client (Vue.Js) and a backend (Node.js)

I've implemented a SSE-Endpoint to my endpoint:

Node.js

module.exports = (request: Request, response: Response) => {

    // create utilities class
    let util: RequestUtilities = new RequestUtilities(request);

    try {

        // get request parameters
        let clientId = util.getParameter('clientId');

        // respose write head
        response.writeHead(status, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Content-Encoding': 'none',
            'Connection': 'keep-alive',
            'Access-Control-Allow-Origin': '*'
        })
        //response.flushHeaders()

        // response write
        response.write('TEST')
        response.flush();

        // text message
        setInterval(() => {
            //response.write('event: message\n');
            response.write(`data: ${clientId}\n`);
            response.flush()
        }, 5000);


        // request close
        request.on('close', () => {
            response.end('OK')            
        });

This endpoint is called via /api/v2/events and expects a GET parameter called clientId

The server uses the npm module compression

When I'm calling this endpoint by a browser, the SSE-Messages are received successfully. But when I'm calling this endpoint via Postman or my webapplication, the SSE-messages are not received.

I'm using the EventSource or VueSSE (Vue.use(VueSSE), npm vue-sse)

Vue component

<template>...</template>
<script>
let sseClient;

export default {
    methods: {
         buttonClick() {

              // using EventSource
              let evtSrc = new EventSource(localhost/api/v2/events?clientId=test)
              evtSrc.onmessage = (msg) => { console.log(msg) }
              evtSrc.addEventListener('progress', (evt) => { console.log(evt) })
              evtSrc.addEventListener('', (evt) => { console.log(evt) })
              evtSrc.onerror = (err) => { console.log(err) }

              // using vue-sse
              sseClient.connect()
                  .then(a => { console.log(a) })
                  .catch(e => { console.log(e) })

         }
    },
    mounted() {
        this.getProcessingStatusArray();
        sseClient = this.$sse.create("http://localhost:3060/api/v2/events?clientId=sadf");
        sseClient.on('error', (e) => { console.log(`ERROR: ${e}`) })
        sseClient.on('message', (m) => { console.log(`MESSAGE: ${m}`) })
        sseClient.on('', (m) => { console.log(`MESSAGE: ${m}`) })

    },
}
</script>

Both , the EventSource and the Vue-SSE module are called successfully but do not receive any response from my node-server.

Did I miss something? I've searched many hours but didn't find any solution.

Thanks in advance

Answer 1

The request was malformatted and missed 2 line breaks at the end of the message.

Instead of

`data: ${clientId}\n` 

or

`data: ${clientId}`

it should be:

`data: ${clientId}\n\n`