Skip to content

SSE not working over http2 #394

@masterchief164

Description

@masterchief164

I was trying to use the spdy package to implement SSE in my application. The code worked flawlessly over http1.1 but when I switched over to http2 the sse stopped working. Although the simple get/post requests work but SSE shows net::err_http2_protocol_error and then a new request starts and it gets the data but the connection then closes.
Below is the app.js file


const cors = require('cors');
const spdy = require("spdy")
const express = require('express');
const cookieParser = require('cookie-parser');
const Router = require('./routes/index.router');
const morgan = require('morgan');
const app = express();
const fs = require('fs');

app.use(express.static("public"))

app.use(morgan('dev'))

app.use(cors({
    credentials: true,
    origin: ['http://localhost:3001', 'https://smart-attendance-blue.vercel.app']
}));

app.use(express.json());
app.use(cookieParser());
app.use(express.urlencoded({extended: true}));


app.use('/', Router);


app.get('/', (req, res) => {
    res.send('Hello World!');
});


const port = process.env.PORT || 8000;

const start = async () => {
    try {

        spdy.createServer(
            {
                key: fs.readFileSync("./server.key"),
                cert: fs.readFileSync("./server.crt")
            },
            app
        ).listen(port, (err) => {
            if (err) {
                throw new Error(err)
            }
            console.log("Listening on port 8000")
        })
    } catch (e) {
        console.log(e)
    }
}

start();

This is my sesionController which handles my SSE

    try {
        const user = req.user;
        const courseId = req.query.courseId;
        const document = await addSession(user, user); 
        const session = document.toObject();
        session.nonce = crypto.randomInt(10000000, 99999999);
        const headers = {
            'Content-Type': 'text/event-stream',
            'Connection': 'keep-alive',
            'Cache-Control': 'no-cache',
        };
        res.writeHead(200, headers);
        console.log("wrote")
        session.nonce = crypto.randomInt(10000000, 99999999);
        const data = `data: ${JSON.stringify({id: session._id, nonce: session.nonce})}\n\n`;
        res.write(data);
        let interval = setInterval(async () => {
            session.nonce = crypto.randomInt(10000000, 99999999);
            await client.set(session._id.toString(), session.nonce)
            const data = `data: ${JSON.stringify({id: session._id, nonce: session.nonce})}\n\n`;
            res.write(data);
            console.log("wrote")
        }, 5000);

        req.on('close', () => {
            console.log("closed")
            clearInterval(interval);
        });
        // req.on('error', (e) => {
        //     console.log("error", e)
        // });
        // res.status(200).send(session);
        // console.log(session);
    } catch (error) {
        console.log(error);
        res.status(500)
            .send({error});
    }
}

These are the screenshots of the network tabs and the detailed view of the network requests.

image

image

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions