How to pass POST parameters with HTML SSE?

Introduction

In HTML5, Server-Sent Events (SSE) is a technology that enables servers to actively push information to clients. Typically, SSE is used to establish a unidirectional connection from the server to the client, through which the server can send updates to the client.

However, the standard implementation of SSE does not natively support sending POST requests because it relies on the HTTP GET method. If you need to send initialization data when establishing an SSE connection, you can include these parameters as query string parameters in the URL.

Example:

Assume you need to pass a user ID and a subscription type to initialize the SSE connection. Here's how:

html
<!DOCTYPE html>
<html>
<body>
<script>
// Assume userId and subscriptionType are obtained somehow
var userId = 'user123';
var subscriptionType = 'news_update';

// Create a new EventSource object with the URL including necessary query parameters
var source = new EventSource(`http://example.com/events?userId=${encodeURIComponent(userId)}&subscriptionType=${encodeURIComponent(subscriptionType)}`);

source.onmessage = function(event) {
    console.log("Received data: ", event.data);
};

source.onerror = function(error) {
    console.error("EventSource failed:", error);
    source.close();
};
</script>
</body>
</html>

Handling on the Server Side:

On the server side, you should parse these query parameters and use them to customize the data stream sent to the client. Here's a simple example using Node.js and the Express framework:

javascript
const express = require('express');
const app = express();

app.get('/events', function(req, res) {
    const userId = req.query.userId;
    const subscriptionType = req.query.subscriptionType;

    // Set necessary headers to enable SSE
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
    });

    const sendData = () => {
        const data = `Date: ${new Date()}`;
        res.write(`data: ${data}\n\n`);
    };

    // Send data every second
    const intervalId = setInterval(sendData, 1000);

    req.on('close', () => {
        clearInterval(intervalId);
        res.end();
    });
});
app.listen(3000, () => console.log('SSE server started on port 3000'));

Summary

While SSE does not support direct POST requests, you can pass initialization data by including query string parameters in the URL. The server can then read these parameters and provide a tailored data stream based on them.

2024年8月15日 20:29 回复

1个答案

Introduction

Example:

Handling on the Server Side:

Summary

你的答案