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 collection's endpoint

Both have same output from server

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

But not received anything

Html

<body>
  <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>
</body>

Have anyone experienced on implementing SSE?

Thank you in advance!

steadysnaillast year
I had a very similar issue a few months ago. Because it was for a small frontend feature that would be used infrequently in-house, I ended up just using a setInterval to fetch the data every 15 seconds when changes were expected. No matter what this inefficient, but it was good enough for my scenario. I hope your post receives some feedback/answers as I would like to use SSE for some future features we have planned. Sorry I cant be of more help.
uljanovslast year
Same problem, please help
.klausslast year
+1
luizzaalast year
+1

rrumslast year

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)
}

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.