From 6f411232bdd51bc9aefded89ba30644394e62d98 Mon Sep 17 00:00:00 2001 From: alex Date: Thu, 20 Apr 2023 22:29:51 +0200 Subject: [PATCH] websocket --- src/App.js | 47 +++++------- src/Components/SideMenu/index.js | 25 ++++++- src/Pages/Login/index.js | 2 +- src/constants.js | 38 ---------- src/utils.js | 121 +++++++++++++++++++++++++++++++ 5 files changed, 160 insertions(+), 73 deletions(-) delete mode 100644 src/constants.js create mode 100644 src/utils.js diff --git a/src/App.js b/src/App.js index 226bba7..1732ae1 100644 --- a/src/App.js +++ b/src/App.js @@ -5,37 +5,21 @@ import PageContent from "./Components/PageContent"; import SideMenu from "./Components/SideMenu"; import Login from "./Pages/Login"; import { Layout } from "antd"; -import { Constants, ClientUserDataPreview, ClientUserData } from "./constants"; - -function useUserSession() { - const getUserSession = () => { - return JSON.parse(localStorage.getItem("session")); - }; - - const [userSession, setUserSession] = useState(getUserSession()); - - const saveUserSession = (session) => { - setUserSession(session); - - if (session === undefined) { - localStorage.removeItem("session"); - } else { - localStorage.setItem("session", JSON.stringify(session)); - } - }; - - return { - setUserSession: saveUserSession, - userSession, - }; -} +import { + Constants, + ClientUserDataContextPreview, + ClientUserDataContext, + UseUserSession, + WebSocketProvider, +} from "./utils"; export default function App() { - const { userSession, setUserSession } = useUserSession(); - const [userData, setUserData] = useState(ClientUserDataPreview); + const { userSession, setUserSession } = UseUserSession(); + const [userData, setUserData] = useState(ClientUserDataContextPreview); useEffect(() => { if (!userSession) return; + fetch(Constants.API_ADDRESS + "/user", { method: "GET", @@ -49,6 +33,7 @@ export default function App() { return res.json(); } + setUserSession(); return Promise.reject(res.status); }) .then((data) => setUserData(data)) @@ -61,10 +46,12 @@ export default function App() { return ( - - - - + + + + + + ); } diff --git a/src/Components/SideMenu/index.js b/src/Components/SideMenu/index.js index 5a1ed4e..cd92800 100644 --- a/src/Components/SideMenu/index.js +++ b/src/Components/SideMenu/index.js @@ -9,13 +9,19 @@ import Sider from "antd/es/layout/Sider"; import { useContext, useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import PropTypes from "prop-types"; -import { ClientUserData, Constants, UseUserSession } from "../../constants"; +import { + ClientUserDataContext, + Constants, + UseUserSession, + WebSocketTestContext, +} from "../../utils"; export default function SideMenu({ setUserSession }) { const { userSession } = UseUserSession(); const location = useLocation(); const [selectedKeys, setSelectedKeys] = useState("/"); - const clientUserData = useContext(ClientUserData); + const clientUserDataContext = useContext(ClientUserDataContext); + const webSocketTestContext = useContext(WebSocketTestContext); useEffect(() => { const pathName = location.pathname; @@ -67,10 +73,21 @@ export default function SideMenu({ setUserSession }) { mode="vertical" items={[ { - icon: , + icon: ( + + ), }, { - label: clientUserData.Username, + label: clientUserDataContext.Username, icon: , }, { diff --git a/src/Pages/Login/index.js b/src/Pages/Login/index.js index fe377e8..d9f8209 100644 --- a/src/Pages/Login/index.js +++ b/src/Pages/Login/index.js @@ -1,7 +1,7 @@ import { LockOutlined, LoginOutlined, UserOutlined } from "@ant-design/icons"; import { Button, Form, Input, Modal, notification } from "antd"; import PropTypes from "prop-types"; -import { Constants } from "../../constants"; +import { Constants } from "../../utils"; import { useState } from "react"; import { Buffer } from "buffer"; diff --git a/src/constants.js b/src/constants.js deleted file mode 100644 index 2d8325e..0000000 --- a/src/constants.js +++ /dev/null @@ -1,38 +0,0 @@ -import { createContext, useState } from "react"; - -export const Constants = { - API_ADDRESS: "http://localhost:8080/v1", -}; - -let l = "loading..."; - -// for the data preview when the request is not finished -export const ClientUserDataPreview = { - Username: l, - Email: l, -}; - -export let ClientUserData = createContext(null); - -export function UseUserSession() { - const getUserSession = () => { - return JSON.parse(localStorage.getItem("session")); - }; - - const [userSession, setUserSession] = useState(getUserSession()); - - const saveUserSession = (session) => { - setUserSession(session); - - if (session === undefined) { - localStorage.removeItem("session"); - } else { - localStorage.setItem("session", JSON.stringify(session)); - } - }; - - return { - setUserSession: saveUserSession, - userSession, - }; -} diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..77d30a4 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,121 @@ +import { createContext, useEffect, useState } from "react"; + +/** + * constants + */ +export const Constants = { + API_ADDRESS: "http://localhost:8080/v1", + WS_ADDRESS: "ws://localhost:8080/ws", +}; + +/** + * client user data + */ + +let l = "loading..."; + +// for the data preview when the request is not finished +export const ClientUserDataContextPreview = { + Username: l, + Email: l, +}; + +export let ClientUserDataContext = createContext(null); + +/** + * user session + */ +export function UseUserSession() { + const getUserSession = () => { + return JSON.parse(localStorage.getItem("session")); + }; + + const [userSession, setUserSession] = useState(getUserSession()); + + const saveUserSession = (session) => { + setUserSession(session); + + if (session === undefined) { + localStorage.removeItem("session"); + } else { + localStorage.setItem("session", JSON.stringify(session)); + } + }; + + return { + setUserSession: saveUserSession, + userSession, + }; +} + +/** + * websocket + */ +let webSocketContextPreview = { + connectionBadgeStatus: "error", + connectedWebSocketUsersCount: 0, +}; + +export const WebSocketTestContext = createContext(webSocketContextPreview); + +export function WebSocketProvider({ children, userSession }) { + const [isReady, setIsReady] = useState(false); + const [connectionBadgeStatus, setConnectionBadgeStatus] = useState("error"); + const [connectedWebSocketUsersCount, setConnectedWebSocketUsersCount] = + useState(0); + + let socket = null; + + const connect = () => { + socket = new WebSocket(Constants.WS_ADDRESS + "?auth=" + userSession); + + socket.onopen = () => { + console.log("connected"); + setConnectionBadgeStatus("success"); + setIsReady(true); + }; + + socket.onmessage = (event) => { + const data = JSON.parse(event.data); + console.log("received message", data); + + const cmd = data.Cmd; + const Body = data.Body; + + switch (cmd) { + case 1: + setConnectedWebSocketUsersCount(Body); + break; + } + }; + + socket.onclose = (event) => { + setIsReady(false); + setConnectionBadgeStatus("error"); + console.log("closed", event.reason.code); + + if (event.reason.code === 1005) return; + + console.log("reconnecting..."); + + setTimeout(() => connect(), 1000); + }; + }; + + useEffect(() => { + connect(); + + return () => socket.close(); + }, []); + + return ( + + {children} + + ); +}