Nr of active connections

[mdvanes]

see ActiveConnections.tsx

Show the (number of) active connections to homeremote server, e.g. with meta data such as browser vendor, OS, username.

Only realistic option for web socket, because this is the only thing that the homeremote server really manages.
E.g. dockerlist or domoticz all have to poll their own back-end services. So they either use front-end polling or a web socket and then back-end polling.

Resources:

• https://stackoverflow.com/questions/64320308/react-observable-epic-with-redux-toolkit-and-typescript
• Usage with redux toolkit redux-observable/redux-observable#706
• https://stackoverflow.com/questions/45069489/using-redux-observable-and-subscribing-to-a-websocket#45069612

[mdvanes]

After upgrading to Nest 7:

Because of this issue https://stackoverflow.com/questions/64788443/nestjs-hot-module-replacement-invalid-options-object for now use yarn start:dev-temp

[mdvanes]

Also see: https://docs.nestjs.com/microservices/grpc and https://docs.nestjs.com/techniques/server-sent-events

[mdvanes]

Server Sent Events works, but does not have connections so can't be used to show connected users.

Websocket gateway works in the /feature/stream branch, but WebSocket does not support forwarding cookies, so also no httponly cookies.

Could be worked around with an GET endpoint that returns the key / a key specific for websockets that is send in the websocket payload.

Also make sure that socket.io does not downgrade to polling over HTTP in the background.

[mdvanes]

This old code (summer 2021) never worked

/* TODO
                
        Websocket in NestJS
        Websocket: when there is any connection, start polling the backend service, otherwise don't poll

        Use redux-observable

        */

// import { Card, CardContent, CardHeader, Typography } from "@mui/material";
import { FC } from "react";
// import { useGetMessagesQuery } from "../../../Services/activeConnectionsApi";
// import { io } from "socket.io-client";

// const run = (curr: string[], fn: (x: string[]) => void) => {
// const run = (curr: string[], fn: any) => {
//     // const socket = io("http://localhost:8080");
//     // TODO should work for same domain:

//     // const socket = io();
//     // setTimeout(() => {
//     //     console.log("socket?", socket);
//     // }, 2000);

//     // socket.emit("events", { test: "test" });

//     // socket.on("connect", function () {
//     //     console.log("Connected", socket.id);
//     //     // console.log(socket.id); // x8WIv7-mJelg7on_ALbx

//     //     socket.emit("events", { test: "test" });
//     //     socket.emit("identity", 0, (response: any) =>
//     //         console.log("Identity:", response)
//     //     );
//     // });
//     // socket.on("events", function (data) {
//     //     console.log("event", data);
//     // });
//     // socket.on("exception", function (data) {
//     //     console.log("event", data);
//     // });
//     // socket.on("disconnect", function () {
//     //     console.log("Disconnected");
//     // });

//     const socket = new WebSocket("ws://localhost:3002/hr-events");
//     socket.onopen = function () {
//         console.log("Connected");
//         socket.send(
//             JSON.stringify({
//                 event: "events",
//                 data: "test",
//             })
//         );
//         socket.onmessage = function (data) {
//             console.log(data.data);
//             fn((x: string[]) => x.concat(data.data));
//         };
//     };
// };

// TODO fix servername and portnumber
// TODO fix fallback when connection to ws not available
// TODO use RTK Query for Observable

// Also see branch feature/stream and eventsource stash
const ActiveConnections: FC = () => {
    // const [messages, setMessages] = useState<string[]>([]);
    // const { data } = useGetMessagesQuery("redux");
    // // x.

    // useEffect(() => {
    //     // run(messages, setMessages);
    // }, []);

    // useEffect(() => {
    //     console.log("data:", data);
    // }, [data]);

    // return (
    //     <Card style={{ marginTop: 10 }}>
    //         <CardHeader title="Active connections" />
    //         <CardContent>
    //             <Typography>Active connections (WIP)</Typography>
    //             <ul>
    //                 {messages.map((m) => (
    //                     <li key={m}>{m}</li>
    //                 ))}
    //             </ul>
    //         </CardContent>
    //     </Card>
    // );
    return null;
};

export default ActiveConnections;