Merge pull request #361 from Game-as-a-Service/doc/starting-the-project

doc:📝 add starting the project and socket endpoint

.env.development

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_INTERNAL_ENDPOINT=http://localhost:3030
+NEXT_PUBLIC_INTERNAL_SOCKET_ENDPOINT=http://localhost:3030
 NEXT_PUBLIC_MOCK=true

.env.example

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_INTERNAL_ENDPOINT=
+NEXT_PUBLIC_INTERNAL_SOCKET_ENDPOINT=
 NEXT_PUBLIC_MOCK=

.env.production

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_INTERNAL_ENDPOINT=https://api.gaas.waterballsa.tw
+NEXT_PUBLIC_INTERNAL_SOCKET_ENDPOINT=https://api.gaas.waterballsa.tw
 NEXT_PUBLIC_MOCK=false

README.md

@@ -22,7 +22,7 @@ yarn test
 
 ## Unit Test
 yarn unit-test
-### Test singel files/folder
+### Test single files/folder
 yarn jest $PATH
 
 ## E2E Test
@@ -32,6 +32,28 @@ yarn e2e-test
 yarn storybook
 ```
 
+### Starting the Project
+
+如何在自己的本地跑前端專案，並連接 webSocket
+
+```yaml
+# 調整 .env.development file
+# 後端 RESTful API 的 url
+NEXT_PUBLIC_INTERNAL_ENDPOINT=
+# 後端 Socket 的 url
+NEXT_PUBLIC_INTERNAL_SOCKET_ENDPOINT=
+# 取消前端 Mock Data
+NEXT_PUBLIC_MOCK=false
+```
+
+```bash
+# 使用 yarn install dependencies
+# 如果出現 Error 可以改成使用 yarn install 下載
+yarn
+# 啟動專案
+yarn dev
+```
+
 ## Git Cooperation
 
 - Branch Name: `feature/ticket-name`
@@ -69,7 +91,7 @@ yarn storybook
 2. 未捕捉到的：開 PR 時綁 Github Projects
    > 這樣在 Github Projects 就能看到原本的 User Story 跟 Sprint 過程中多做的 bugs，如果這週沒辦法完成的就開 Issues 在下次開會時納入討論
 
-# Contributor
+## Contributor
 
 <a href="https://github.com/Game-as-a-Service/Game-Lobby/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=Game-as-a-Service/Game-Lobby" />

contexts/SocketContext.tsx

@@ -2,28 +2,26 @@ import { Env, getEnv } from "@/lib/env";
 import { createContext } from "react";
 import { Socket, io } from "socket.io-client";
 
-const { internalEndpoint, env } = getEnv();
+const { internalSocketEndpoint, env, isMock } = getEnv();
 
 export const SOCKET_URL = "/api/internal/socketio";
 
+const rootConfig = {
+  autoConnect: false,
+  reconnection: true,
+  reconnectionDelay: 10000,
+  reconnectionDelayMax: 10000,
+  reconnectionAttempts: Infinity,
+};
+
 const config =
-  env === Env.DEV || process.env.NEXT_PUBLIC_CI_MODE
+  (env === Env.DEV && isMock) || process.env.NEXT_PUBLIC_CI_MODE
     ? {
         path: SOCKET_URL,
         addTrailingSlash: false,
-        autoConnect: false,
-        reconnection: true,
-        reconnectionDelay: 10000,
-        reconnectionDelayMax: 10000,
-        reconnectionAttempts: Infinity,
+        ...rootConfig,
       }
-    : {
-        autoConnect: false,
-        reconnection: true,
-        reconnectionDelay: 10000,
-        reconnectionDelayMax: 10000,
-        reconnectionAttempts: Infinity,
-      };
+    : rootConfig;
 
 export enum SOCKET_EVENT {
   CONNECT = "connect",
@@ -42,7 +40,7 @@ export enum SOCKET_EVENT {
 }
 
 export const createSocket = (token: string | null | undefined) => {
-  return io(internalEndpoint, { auth: { token }, ...config });
+  return io(internalSocketEndpoint, { query: { token }, ...config });
 };
 
 type StoreContextType = {

lib/env.ts

@@ -6,13 +6,16 @@ export enum Env {
 interface IEnv {
   env: Env;
   internalEndpoint: string;
+  internalSocketEndpoint: string;
   isMock: boolean;
 }
 
 export const getEnv = (): IEnv => {
   return {
     env: (process.env.NODE_ENV as Env) || Env.DEV,
     internalEndpoint: process.env.NEXT_PUBLIC_INTERNAL_ENDPOINT || "",
+    internalSocketEndpoint:
+      process.env.NEXT_PUBLIC_INTERNAL_SOCKET_ENDPOINT || "",
     isMock: process.env.NEXT_PUBLIC_MOCK === "true",
   };
 };

pages/api/mock/socketio.ts

@@ -24,7 +24,7 @@ let sendOnlineUsers: NodeJS.Timeout;
 
 function registeringMiddleware(io: ServerIO) {
   io.use((socket, next) => {
-    const token = socket.handshake.auth.token;
+    const token = socket.handshake.query.token;
     if (token == undefined) {
       next(new Error("not authorized"));
     } else {