HTTPS Stream with websockets / Socket.IO (MERN) - websocket

Question

Hi I am wondering how I get this behavior:
There is a Button which starts the stream of a specific DIV (already worked using HTTP).
The Stream should be encrypted using HTTPS on localhost.
I changed the connection to HTTPS, created a key and a certificate with this command:openssl req nodes new x509 keyout server.key out server.cert. In the Chrome Dev Tool / Network Section I receive this:
Chrome Screenshot
BUT: the part on the server where I log that a user connected successfully isn't executed and I can't figure out why.
my react component:
import React, { useEffect, useState, useRef } from 'react';
import html2canvas from 'html2canvas';
import io from 'socket.io-client';
const socket = io('https://localhost:8080', {
transports: ['websocket'],
cors: {
origin: 'http://localhost:3000',
},
});
function Stream() {
const [message, setMessage] = useState("Streaming: OFF");
const [streaming, setStreaming] = useState(false);
const sectionRef = useRef(null);
useEffect(() => {
if (!streaming) return;
const intervalId = setInterval(() => {
html2canvas(sectionRef.current).then(canvas => {
socket.emit("streaming", canvas.toDataURL("image/webp"));
});
}, 40);
return () => {
clearInterval(intervalId);
};
}, [streaming]);
const startStream = () => {
setMessage("Streaming: ON");
setStreaming(true);
};
const stopStream = () => {
setMessage("Streaming: OFF");
setStreaming(false);
};
return (
<div>
<h2>Anchor:</h2>
<button onClick={startStream} disabled={streaming}>Start streaming</button>
<button onClick={stopStream} disabled={!streaming}>Stop streaming</button>
<p>{message}</p>
<div ref={sectionRef}>
{/* Replace this with the section of the website you want to stream */}
<p>This is the section of the website that will be streamed</p>
</div>
</div>
);
}
export default Stream;
and the server looks like this:
const https = require('https');
const fs = require('fs');
const cors2 = require('cors');
const options = {
key: fs.readFileSync(\__dirname + '/server.key'),
cert: fs.readFileSync(\__dirname + '/server.cert')
};
const server = https.createServer(options);
const io = require('socket.io')(server);
io.use(cors2({
origin: "\*",
methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
allowedHeaders: "Content-Type,Authorization"
}));
io.on('connection', (socket) =\> {
console.log('a user connected');
socket.on('streaming', (data) =\> {
console.log("received streaming data: ", data);
io.emit('streaming', data);
});
});
server.listen(8080, () =\> console.log('listening on '));
changed browser to Firefox, activated chrome://flags/#allow-insecure-localhost