Tested for Streaming using WebGL (#1758)

* fix(contest): not use subscription for contest switch * refactor(index): lazy imports * feat(contest): webgl stream tests passed * fix(contest): update graphql on arena queries * fix
eesast · Apr 21, 2024 · 6accf3c · 6accf3c
1 parent cf522be
commit 6accf3c
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 105 deletions.
diff --git a/src/app/ContestSite/Components/THUAI6/StreamNative.tsx b/src/app/ContestSite/Components/THUAI6/StreamNative.tsx
@@ -82,7 +82,8 @@ const THUAI6: React.FC<StreamProps> = ({ streamUrl }) => {
         }
       },
     );
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const canvasRef = React.useRef(null);
   const h = 50;

diff --git a/src/app/ContestSite/Components/THUAI7/StreamWebGL.tsx b/src/app/ContestSite/Components/THUAI7/StreamWebGL.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from "react";
 import { RpcError } from "grpc-web";
-import { AvailableServiceClient } from "@/generated/grpc-web/THUAI7/ServicesServiceClientPb";
-import * as MessageType from "@/generated/grpc-web/THUAI7/MessageType_pb";
-import * as Message2Clients from "@/generated/grpc-web/THUAI7/Message2Clients_pb";
-import * as Message2Server from "@/generated/grpc-web/THUAI7/Message2Server_pb";
+import { AvailableServiceClient } from "@/generated/grpc-web/THUAI6/ServicesServiceClientPb";
+import * as MessageType from "@/generated/grpc-web/THUAI6/MessageType_pb";
+import * as Message2Clients from "@/generated/grpc-web/THUAI6/Message2Clients_pb";
+import * as Message2Server from "@/generated/grpc-web/THUAI6/Message2Server_pb";
 import { FloatButton, Layout, Modal, Progress, Row } from "antd";
 import { ArrowsAltOutlined } from "@ant-design/icons";
 import React from "react";
@@ -62,6 +62,8 @@ const THUAI7: React.FC<StreamProps> = ({ streamUrl }) => {
     }
   };
 
+  const [message, setMessage] = React.useState<string>("");
+
   useEffect(() => {
     const client = new AvailableServiceClient(streamUrl);
     const request = new Message2Server.IDMsg();
@@ -76,16 +78,12 @@ const THUAI7: React.FC<StreamProps> = ({ streamUrl }) => {
           spectator.setPlayerId(2024);
           const stream = client.addPlayer(spectator, {});
           stream.on("data", (response) => {
-            console.log("Received message from server:", response.toObject());
             if (response.getGameState() === MessageType.GameState.GAME_END) {
               stream.cancel();
               console.log("Game Ended.");
             }
-            sendMessage(
-              "UpdateManager",
-              "UpdateMessageByJson",
-              JSON.stringify(response.toObject()),
-            );
+            setMessage(JSON.stringify(response.toObject()));
+            console.log("Received data from server");
           });
           stream.on("status", (status) => {
             console.log("Received status from server:", status);
@@ -101,6 +99,13 @@ const THUAI7: React.FC<StreamProps> = ({ streamUrl }) => {
         }
       },
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (isLoaded && message.length > 0) {
+      sendMessage("UpdateManager", "UpdateMessageByJson", message);
+    }
   });
 
   return (

diff --git a/src/app/ContestSite/ManagerPage/Setting.tsx b/src/app/ContestSite/ManagerPage/Setting.tsx
@@ -11,12 +11,15 @@ const Setting: React.FC<ContestProps> = (props) => {
   const url = useUrl();
   const Contest_id = url.query.get("contest");
 
-  const { data: contestSwitchData, error: contestSwitchError } =
-    graphql.useGetContestSwitchSubscription({
-      variables: {
-        contest_id: Contest_id,
-      },
-    });
+  const {
+    data: contestSwitchData,
+    error: contestSwitchError,
+    refetch: refetchContestSwitch,
+  } = graphql.useGetContestSwitchQuery({
+    variables: {
+      contest_id: Contest_id,
+    },
+  });
 
   const [updateContestSwitch, { error: updateSwitchError }] =
     graphql.useUpdateContestSwitchMutation();
@@ -57,6 +60,7 @@ const Setting: React.FC<ContestProps> = (props) => {
                 team_switch: e.target.checked,
               },
             });
+            refetchContestSwitch();
           }}
         >
           开放组队
@@ -73,6 +77,7 @@ const Setting: React.FC<ContestProps> = (props) => {
                 code_upload_switch: e.target.checked,
               },
             });
+            refetchContestSwitch();
           }}
         >
           上传代码
@@ -87,6 +92,7 @@ const Setting: React.FC<ContestProps> = (props) => {
                 arena_switch: e.target.checked,
               },
             });
+            refetchContestSwitch();
           }}
         >
           天梯对战
@@ -101,6 +107,7 @@ const Setting: React.FC<ContestProps> = (props) => {
                 playground_switch: e.target.checked,
               },
             });
+            refetchContestSwitch();
           }}
         >
           试玩功能
@@ -115,6 +122,7 @@ const Setting: React.FC<ContestProps> = (props) => {
                 stream_switch: e.target.checked,
               },
             });
+            refetchContestSwitch();
           }}
         >
           直播功能
@@ -129,6 +137,7 @@ const Setting: React.FC<ContestProps> = (props) => {
                 playback_switch: e.target.checked,
               },
             });
+            refetchContestSwitch();
           }}
         >
           回放功能

diff --git a/src/app/ContestSite/PlaybackPage.tsx b/src/app/ContestSite/PlaybackPage.tsx
@@ -26,7 +26,7 @@ const PlaybackPage: React.FC<ContestProps> = ({ mode, user }) => {
   });
 
   const { data: contestSwitchData, error: contestSwitchError } =
-    graphql.useGetContestSwitchSubscription({
+    graphql.useGetContestSwitchQuery({
       variables: {
         contest_id: Contest_id,
       },
@@ -39,10 +39,12 @@ const PlaybackPage: React.FC<ContestProps> = ({ mode, user }) => {
   });
 
   const Playback = () => {
-    if (contestNameData?.contest_by_pk?.name === "THUAI6") return <THUAI6 />;
-    else if (contestNameData?.contest_by_pk?.name === "THUAI7")
+    const contestName = contestNameData?.contest_by_pk?.name;
+    if (contestName === "THUAI6") {
+      return <THUAI6 />;
+    } else if (contestName === "THUAI7") {
       return <THUAI7 />;
-    else return <NotImplemented />;
+    } else return <NotImplemented />;
   };
 
   return contestSwitchData ? (

diff --git a/src/app/ContestSite/PlaygroundPage.tsx b/src/app/ContestSite/PlaygroundPage.tsx
@@ -36,7 +36,7 @@ const PlaygroundPage: React.FC<ContestProps> = ({ mode, user }) => {
   });
 
   const { data: contestSwitchData, error: contestSwitchError } =
-    graphql.useGetContestSwitchSubscription({
+    graphql.useGetContestSwitchQuery({
       variables: {
         contest_id: contest,
       },

diff --git a/src/app/ContestSite/StreamPage.tsx b/src/app/ContestSite/StreamPage.tsx
@@ -2,11 +2,11 @@ import { useEffect } from "react";
 import React from "react";
 import { useUrl } from "../../api/hooks/url";
 import { ContestProps } from ".";
-import THUAI6 from "./Components/THUAI6/StreamNative";
 import * as graphql from "@/generated/graphql";
 import { message } from "antd";
 import NotImplemented from "./Components/NotImplemented";
 import Loading from "../Components/Loading";
+import THUAI6 from "./Components/THUAI6/StreamNative";
 import THUAI7 from "./Components/THUAI7/StreamWebGL";
 
 export interface StreamProps {
@@ -31,7 +31,7 @@ const StreamPage: React.FC<ContestProps> = ({ mode, user }) => {
   });
 
   const { data: contestSwitchData, error: contestSwitchError } =
-    graphql.useGetContestSwitchSubscription({
+    graphql.useGetContestSwitchQuery({
       variables: {
         contest_id: contest,
       },
@@ -48,17 +48,18 @@ const StreamPage: React.FC<ContestProps> = ({ mode, user }) => {
     ? `http://${url_dev}`
     : "https://api.eesast.com:8879";
 
-  const Stream = (props: StreamProps) => {
-    if (contestNameData?.contest_by_pk?.name === "THUAI6")
-      return <THUAI6 streamUrl={props.streamUrl} />;
-    else if (contestNameData?.contest_by_pk?.name === "THUAI7")
-      return <THUAI7 streamUrl={props.streamUrl} />;
-    else return <NotImplemented />;
+  const Stream = () => {
+    const contestName = contestNameData?.contest_by_pk?.name;
+    if (contestName === "THUAI6") {
+      return <THUAI6 streamUrl={streamUrl} />;
+    } else if (contestName === "THUAI7") {
+      return <THUAI7 streamUrl={streamUrl} />;
+    } else return <NotImplemented />;
   };
 
   return contestSwitchData ? (
     contestSwitchData?.contest_by_pk?.stream_switch ? (
-      <Stream streamUrl={streamUrl} />
+      <Stream />
     ) : (
       <NotImplemented />
     )

diff --git a/src/app/ContestSite/TeamPage/JoinPage.tsx b/src/app/ContestSite/TeamPage/JoinPage.tsx
@@ -24,7 +24,7 @@ const JoinPage: React.FC<TeamProps> = ({ mode, user, refresh }) => {
   const Contest_id = url.query.get("contest");
 
   //查询比赛是否开始报名
-  const { data: contestSwitchData } = graphql.useGetContestSwitchSubscription({
+  const { data: contestSwitchData } = graphql.useGetContestSwitchQuery({
     variables: {
       contest_id: Contest_id,
     },

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -6,7 +6,6 @@ import {
   Layout,
   Menu,
   Popover,
-  Spin,
   Switch,
   Tour,
   TourProps,
@@ -33,6 +32,7 @@ import Authenticate, { tsinghuaRoles } from "./Components/Authenticate";
 import { useUrl } from "../api/hooks/url";
 import { useUser, JwtPayload } from "../api/hooks/user";
 import { subscribe, unsubscribe } from "../api/notification";
+import Loading from "./Components/Loading";
 
 dayjs.extend(relativeTime);
 dayjs.extend(calendar);
@@ -43,6 +43,12 @@ export interface PageProps {
   user: JwtPayload;
 }
 
+const HomeSite = lazy(() => import("./HomeSite"));
+const ContestSite = lazy(() => import("./ContestSite"));
+const InfoSite = lazy(() => import("./InfoSite"));
+const ShareSite = lazy(() => import("./ShareSite"));
+const UserSite = lazy(() => import("./UserSite"));
+
 const App: React.FC = () => {
   const url = useUrl();
   const [user, setUser] = useUser();
@@ -296,22 +302,6 @@ const App: React.FC = () => {
     );
   };
 
-  const Container = styled.div`
-    height: calc(100vh - 72px);
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `;
-
-  const Loading = () => {
-    return (
-      <Container>
-        <Spin size="large" />
-      </Container>
-    );
-  };
-
   const steps: TourProps["steps"] = [
     {
       title: "2024 新版来袭！",
@@ -371,12 +361,6 @@ const App: React.FC = () => {
     );
   };
 
-  const HomeSite = lazy(() => import("./HomeSite"));
-  const ContestSite = lazy(() => import("./ContestSite"));
-  const InfoSite = lazy(() => import("./InfoSite"));
-  const ShareSite = lazy(() => import("./ShareSite"));
-  const UserSite = lazy(() => import("./UserSite"));
-
   return (
     <ConfigProvider
       locale={zhCN}