Merge pull request #18 from Programmer-Network/ws-structure-refactor

Implement Web Sockets, improve file structure
Programmer-Network · Oct 26, 2023 · 4635df5 · 4635df5
2 parents 5ebef2e + fa22b17
commit 4635df5
Show file tree

Hide file tree

Showing 37 changed files with 490 additions and 337 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,9 @@
-dist
+chrome-extension/dist
 node_modules
 pnpm-lock.yaml
 .todo
 .env
 messages.json
 links.json
-api/*.js
+api/*.js
+types.js
diff --git a/api/server.ts b/api/server.ts
@@ -1,24 +1,13 @@
-import fastify, {
-    FastifyInstance,
-    FastifyReply,
-    FastifyRequest,
-} from "fastify";
-import cors from "@fastify/cors";
 import fs from "fs";
+import fastify, { FastifyReply, FastifyRequest } from "fastify";
+import FastifySocketIO from "fastify-socket.io";
+import cors from "@fastify/cors";
+import { Socket } from "socket.io";
+
 import { getRandomHexColor, parseLinks, saveLinks } from "./utils";
+import { CustomFastifyInstance, IMessage, SocketType } from "../types";
 
-export interface IMessage {
-    sessionId: string;
-    id: string;
-    platform: string;
-    content: string;
-    emojis: string[];
-    author: string;
-    badges: string[];
-    authorColor: string;
-}
-
-const server: FastifyInstance = fastify({ logger: true });
+const server = fastify({ logger: true }) as CustomFastifyInstance;
 const messages: IMessage[] = [];
 const savedMessages: IMessage[] = [];
 const userColors: { [key: string]: string } = {};
@@ -27,43 +16,12 @@ server.register(cors, {
     origin: true,
 });
 
-server.post(
-    "/api/messages",
-    async (request: FastifyRequest, reply: FastifyReply) => {
-        const message = request.body as IMessage;
-        if (
-            messages.length > 0 &&
-            messages[messages.length - 1].sessionId !== message.sessionId
-        ) {
-            messages.push({
-                sessionId: message.sessionId,
-                id: Math.random().toString(36).substr(2, 9),
-                platform: message.platform,
-                content: "Chat reload",
-                author: "System",
-                emojis: [],
-                badges: [],
-                authorColor: "text-indigo-500",
-            });
-        }
-
-        if (!userColors[message.author]) {
-            userColors[message.author] = getRandomHexColor();
-        }
-
-        const links = parseLinks(message.content);
-        if (links.length > 0) {
-            await saveLinks(links);
-        }
-
-        messages.push({
-            ...message,
-            authorColor: userColors[message.author],
-        });
-
-        reply.code(201).send();
-    }
-);
+server.register(FastifySocketIO, {
+    cors: {
+        origin: "*",
+        methods: ["GET", "POST"],
+    },
+});
 
 server.get("/api/messages", async (_: FastifyRequest, reply: FastifyReply) => {
     reply.send(messages);
@@ -85,6 +43,46 @@ server.post(
     }
 );
 
+let reactSocket: Socket | null = null;
+let extensionSocket: Socket | null = null;
+
+server.ready((serverError) => {
+    if (serverError) {
+        console.log(serverError);
+        process.exit(1);
+    }
+
+    server.io?.on("connection", (socket: Socket) => {
+        socket.on("register", (type) => {
+            if (type === SocketType.REACT) {
+                reactSocket = socket;
+            } else if (type === SocketType.EXTENSION) {
+                extensionSocket = socket;
+            }
+        });
+
+        socket.on("message", async (message) => {
+            if (socket === reactSocket) {
+                extensionSocket?.emit("message", message);
+            } else if (socket === extensionSocket) {
+                if (!userColors[message.author]) {
+                    userColors[message.author] = getRandomHexColor();
+                }
+
+                const links = parseLinks(message.content);
+                if (links.length > 0) {
+                    await saveLinks(links);
+                }
+
+                reactSocket?.emit("message", {
+                    ...message,
+                    authorColor: userColors[message.author],
+                });
+            }
+        });
+    });
+});
+
 const start = async () => {
     try {
         await server.listen({

diff --git a/chat/index.html b/chat/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chat Fusion</title>
-  </head>
-  <body class="bg-[#1b1f23]">
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Chat Fusion</title>
+    </head>
+    <body class="bg-[#1b1f23]">
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
diff --git a/chat/public/index.html b/chat/public/index.html
@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="./popup.js"></script>
-    <link rel="stylesheet" href="./popup.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS</title>
+        <script type="module" crossorigin src="./popup.js"></script>
+        <link rel="stylesheet" href="./popup.css" />
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
 </html>
diff --git a/chat/src/App.tsx b/chat/src/App.tsx
@@ -1,13 +1,13 @@
 import { createContext, useEffect, useState } from "react";
 import { Chat } from "./Components/Chat";
 import { useMessageListener } from "./Hooks/UseMessageListener";
-import { IMessage } from "./types";
 import classNames from "classnames";
+import { IMessage } from "../../types";
 
 export const LevelContext = createContext(null);
 
 function App() {
-    const messages = useMessageListener();
+    const { messages, sendMessage } = useMessageListener();
     const [focusedMessage, setFocusedMessage] = useState<IMessage | null>(null);
     const [filter, setFilter] = useState("");
     const [filtered, setFiltered] = useState<IMessage[]>([]);
@@ -17,7 +17,9 @@ function App() {
         setFiltered(
             filter
                 ? []
-                : messages.filter((message) => message.author === filter)
+                : messages.filter(
+                      (message: IMessage) => message.author === filter
+                  )
         );
     };
 
@@ -33,7 +35,9 @@ function App() {
             return;
         }
 
-        setFiltered(messages.filter((message) => message.author === filter));
+        setFiltered(
+            messages.filter((message: IMessage) => message.author === filter)
+        );
     }, [messages, filter]);
 
     return (
@@ -45,6 +49,7 @@ function App() {
         >
             <div>
                 <Chat
+                    sendMessage={sendMessage}
                     messages={filtered.length ? filtered : messages}
                     focusedMessage={focusedMessage}
                     setFocusedMessage={setFocusedMessage}

diff --git a/chat/src/Components/Chat/Chat.tsx b/chat/src/Components/Chat/Chat.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useRef, FC, useState } from "react";
-import { IMessage } from "../../types";
 import { Message } from "../Message";
 import classNames from "classnames";
 import { ReloadIcon } from "../../assets/Icons/Reload";
+import { IMessage } from "../../../../types";
 
 export const Chat: FC<{
     messages: IMessage[];
+    sendMessage: (message: string) => void;
     focusedMessage: IMessage | null;
     setFocusedMessage: (message: IMessage | null) => void;
     onAction: (action: string, data: unknown) => void;
@@ -19,9 +20,11 @@ export const Chat: FC<{
     };
 
     const scrollToBottom = () => {
-        if (messagesEndRef.current) {
-            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+        if (!messagesEndRef.current) {
+            return;
         }
+
+        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     };
 
     useEffect(() => {
@@ -56,6 +59,7 @@ export const Chat: FC<{
                     <div ref={messagesEndRef}></div>
                 </div>
             </div>
+
             {!focusedMessage && (
                 <div className="flex items-center justify-center pb-8">
                     <ReloadIcon

diff --git a/chat/src/Components/ChatDivider/ChatDivider.tsx b/chat/src/Components/ChatDivider/ChatDivider.tsx
@@ -2,15 +2,15 @@ import { FC } from "react";
 import { IMessage } from "../../types";
 
 export const ChatDivider: FC<{
-  message: IMessage;
+    message: IMessage;
 }> = ({ message }) => {
-  const { platform } = message;
+    const { platform } = message;
 
-  return (
-    <div className="w-100 border-b border-b-gray-700 text-center h-5 my-12">
-      <span className="text-white text-xs mb-2 bg-indigo-700 p-2 uppercase">
-        <b className="-tracking-tight">{platform}</b> reloaded
-      </span>
-    </div>
-  );
+    return (
+        <div className="w-100 border-b border-b-gray-700 text-center h-5 my-12">
+            <span className="text-white text-xs mb-2 bg-indigo-700 p-2 uppercase">
+                <b className="-tracking-tight">{platform}</b> reloaded
+            </span>
+        </div>
+    );
 };
diff --git a/chat/src/Components/Message/Message.tsx b/chat/src/Components/Message/Message.tsx
@@ -3,6 +3,22 @@ import { IMessage } from "../../types";
 import classNames from "classnames";
 import { SaveIcon } from "../../assets/Icons/Save";
 import { FilterToggle } from "../FilterToggle/FilterToggle";
+import { TwitchIcon } from "../../assets/Icons/Twitch";
+import { YouTubeIcon } from "../../assets/Icons/YouTube";
+import { KickIcon } from "../../assets/Icons/Kick";
+
+const getIcon = (platform: string) => {
+    switch (platform) {
+        case "twitch":
+            return <TwitchIcon className="text-indigo-700 w-8 mr-4" />;
+        case "youtube":
+            return <YouTubeIcon className="text-rose-700 w-9 mr-4" />;
+        case "kick":
+            return <KickIcon className="text-green-700 w-9 mr-4" />;
+        default:
+            return null;
+    }
+};
 
 export const Message: FC<{
     message: IMessage;
@@ -32,7 +48,7 @@ export const Message: FC<{
             onMouseOver={() => setHoveredId(message.id)}
             onMouseLeave={() => setHoveredId("")}
             className={classNames(
-                "flex flex-col cursor-pointer relative border-l-4 border-dotted border-gray-500 px-4 py-2",
+                "flex flex-col cursor-pointer relative border-gray-500 px-4 py-2",
                 {
                     "px-16 py-16 w-4/12 border-8 border-l-8":
                         focusedMessage && focusedMessage.id === message.id,
@@ -48,6 +64,7 @@ export const Message: FC<{
                     "flex-col !items-start !justify-start p-4": focusedMessage,
                 })}
             >
+                <span>{getIcon(message.platform)}</span>
                 <div
                     style={{ color: message.authorColor }}
                     className={classNames(
@@ -61,12 +78,7 @@ export const Message: FC<{
                 >
                     <div className="flex gap-1 items-center">
                         {badges?.map((badge, index) => (
-                            <img
-                                key={index}
-                                className="w-7 h-7"
-                                src={badge}
-                                alt={badge}
-                            />
+                            <img key={index} src={badge} alt={badge} />
                         ))}
                     </div>
                     {author}