SSE Implementation

[rrums123]

Hello!

I have problem when implementing SEE between Payload and a simple html & JS use EventSource

I've tried to implement the endpoint from collection and direct express route. Both seems sending the data, but not received.

The endpoints:
server.ts

const start = async () => {
    // ... code
    app.get('/stream', (req, res) => {
        console.log('server: Client connected')
        const headers = {
            'Content-Type': 'text/event-stream',
            'Connection': 'keep-alive',
            'Cache-Control': 'no-cache, no-transform',
            'Access-Control-Allow-Origin': '*'
        };

        res.writeHead(200, headers)

        const intervalId = setInterval(() => {
            const date = new Date().toLocaleString()
            console.log('Sending', date)
            res.write(`data: ${date}`)
        }, 5000)

        res.on('close', () => {
            console.log('server: Client closed connection')
            clearInterval(intervalId)
            res.end()
        })
    })

    app.listen(process.env.PORT || 3000)
}

Also tried in collections enpoint
Both have same output from server, it was sending the data

server: Client connected
Sending 12/5/2023, 8:45:04 PM
Sending 12/5/2023, 8:45:09 PM

But not received anything from Html

  <div id="sse-data"></div>

  <script>
    const eventSource = new EventSource('http://localhost:3000/stream')

    function updateMessage (message) {
      const list = document.getElementById('sse-data')
      const item = document.createElement('p')
      item.textContent = message
      list.appendChild(item)
    }

    eventSource.onmessage = function (event) {
      console.log("event received")
      console.log(event)
      updateMessage(event.data)
    }

    eventSource.onerror = function () {
      updateMessage('Server closed connection')
      eventSource.close()
    }
  </script>

Have anyone experienced on implementing SSE?
Thank you in advance!

[rrums123]

I've found the solution

1. it should be on server.ts
2. only set Access-Control-Allow-Origin and Content-Type to headers

Here is the full endpoint:

const start = async () => {
    // Initialize Payload
    // ...

    app.get('/stream', (req, res) => {
        console.log('server: Client connected')
        res.setHeader('Content-Type', 'text/event-stream')
        res.setHeader('Access-Control-Allow-Origin', '*')

        const intervalId = setInterval(() => {
            const date = new Date().toLocaleString()
            console.log(`server: Sending ${date}`)
            res.write(`data: ${date}\n\n`)
        }, 5000)

        res.on('close', () => {
            console.log('server: Client closed connection')
            clearInterval(intervalId)
            res.end()
        })
    })

    app.listen(process.env.PORT || 3000)
}