From 4c40820ed4850a61974df141c6dfed0ca9df23a5 Mon Sep 17 00:00:00 2001 From: Johnson Mao Date: Wed, 29 Nov 2023 21:43:37 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=93=9D=20add=20starting=20the=20proje?= =?UTF-8?q?ct=20and=20socket=20endpoint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 1 + .env.example | 1 + .env.production | 1 + README.md | 24 ++++++++++++++++++++++-- contexts/SocketContext.tsx | 7 ++++--- lib/env.ts | 3 +++ 6 files changed, 32 insertions(+), 5 deletions(-) diff --git a/.env.development b/.env.development index 45d84e03..f29e33ae 100644 --- a/.env.development +++ b/.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 \ No newline at end of file diff --git a/.env.example b/.env.example index dd2950e5..f7850ae7 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,3 @@ NEXT_PUBLIC_INTERNAL_ENDPOINT= +NEXT_PUBLIC_INTERNAL_SOCKET_ENDPOINT= NEXT_PUBLIC_MOCK= \ No newline at end of file diff --git a/.env.production b/.env.production index 525d36d3..1fbae12d 100644 --- a/.env.production +++ b/.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 \ No newline at end of file diff --git a/README.md b/README.md index 5d70417a..c6e1e4b8 100644 --- a/README.md +++ b/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,26 @@ 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= +``` + +```bash +# 使用 yarn install dependencies +# 如果出現 Error 可以改成使用 yarn install 下載 +yarn +# 啟動專案 +yarn dev +``` + ## Git Cooperation - Branch Name: `feature/ticket-name` @@ -69,7 +89,7 @@ yarn storybook 2. 未捕捉到的：開 PR 時綁 Github Projects > 這樣在 Github Projects 就能看到原本的 User Story 跟 Sprint 過程中多做的 bugs，如果這週沒辦法完成的就開 Issues 在下次開會時納入討論 -# Contributor +## Contributor diff --git a/contexts/SocketContext.tsx b/contexts/SocketContext.tsx index 879e9992..223b3491 100644 --- a/contexts/SocketContext.tsx +++ b/contexts/SocketContext.tsx @@ -2,14 +2,15 @@ import { Env, getEnv } from "@/lib/env"; import { createContext } from "react"; import { Socket, io } from "socket.io-client"; -const { internalEndpoint, env } = getEnv(); +const { internalEndpoint, internalSocketEndpoint, env } = getEnv(); export const SOCKET_URL = "/api/internal/socketio"; const config = env === Env.DEV || process.env.NEXT_PUBLIC_CI_MODE ? { - path: SOCKET_URL, + path: + internalSocketEndpoint === internalEndpoint ? SOCKET_URL : undefined, addTrailingSlash: false, autoConnect: false, reconnection: true, @@ -42,7 +43,7 @@ export enum SOCKET_EVENT { } export const createSocket = (token: string | null | undefined) => { - return io(internalEndpoint, { auth: { token }, ...config }); + return io(internalSocketEndpoint, { auth: { token }, ...config }); }; type StoreContextType = { diff --git a/lib/env.ts b/lib/env.ts index 26a9043a..3e53ca7f 100644 --- a/lib/env.ts +++ b/lib/env.ts @@ -6,6 +6,7 @@ export enum Env { interface IEnv { env: Env; internalEndpoint: string; + internalSocketEndpoint: string; isMock: boolean; } @@ -13,6 +14,8 @@ 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", }; }; From b52499502db085344f33b149b4292e47b7e2af33 Mon Sep 17 00:00:00 2001 From: Johnson Mao Date: Wed, 29 Nov 2023 21:58:13 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=91=B7=20add=20"doc"=20to=20ci=20auto?= =?UTF-8?q?=20label?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/auto-label.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/auto-label.yaml b/.github/workflows/auto-label.yaml index bb51ecc0..e440653d 100644 --- a/.github/workflows/auto-label.yaml +++ b/.github/workflows/auto-label.yaml @@ -19,6 +19,7 @@ jobs: // Define keyword-to-label mapping const labelRules = [ { keyword: 'feat', label: 'feature' }, + { keyword: 'doc', label: 'documentation' }, { keyword: '[WIP]', label: "don't merge" }, { keyword: 'refactor', label: 'refactor' }, { keyword: 'fix', label: 'bug' }, From 61e89cdda321a6a99c0ac041bbcd601b4247f857 Mon Sep 17 00:00:00 2001 From: Johnson Mao Date: Thu, 30 Nov 2023 21:30:22 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=93=9D=20add=20mock=20data=20and=20ca?= =?UTF-8?q?ncel=20environment=20variable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ contexts/SocketContext.tsx | 29 +++++++++++++---------------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index c6e1e4b8..6b84ed77 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,8 @@ yarn storybook NEXT_PUBLIC_INTERNAL_ENDPOINT= # 後端 Socket 的 url NEXT_PUBLIC_INTERNAL_SOCKET_ENDPOINT= +# 取消前端 Mock Data +NEXT_PUBLIC_MOCK=false ``` ```bash diff --git a/contexts/SocketContext.tsx b/contexts/SocketContext.tsx index 223b3491..e4a74a9a 100644 --- a/contexts/SocketContext.tsx +++ b/contexts/SocketContext.tsx @@ -2,29 +2,26 @@ import { Env, getEnv } from "@/lib/env"; import { createContext } from "react"; import { Socket, io } from "socket.io-client"; -const { internalEndpoint, internalSocketEndpoint, env } = getEnv(); +const { internalEndpoint, 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: - internalSocketEndpoint === internalEndpoint ? SOCKET_URL : undefined, + 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", From 9ab7518ae6d4b8a18fb0d8ade1d8ecaebd46d280 Mon Sep 17 00:00:00 2001 From: Johnson Mao Date: Sat, 23 Dec 2023 12:16:32 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20socket=20op?= =?UTF-8?q?tions=20to=20use=20query=20parameters=20for=20authentication?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- contexts/SocketContext.tsx | 4 ++-- pages/api/mock/socketio.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/contexts/SocketContext.tsx b/contexts/SocketContext.tsx index e4a74a9a..657de40d 100644 --- a/contexts/SocketContext.tsx +++ b/contexts/SocketContext.tsx @@ -2,7 +2,7 @@ import { Env, getEnv } from "@/lib/env"; import { createContext } from "react"; import { Socket, io } from "socket.io-client"; -const { internalEndpoint, internalSocketEndpoint, env, isMock } = getEnv(); +const { internalSocketEndpoint, env, isMock } = getEnv(); export const SOCKET_URL = "/api/internal/socketio"; @@ -40,7 +40,7 @@ export enum SOCKET_EVENT { } export const createSocket = (token: string | null | undefined) => { - return io(internalSocketEndpoint, { auth: { token }, ...config }); + return io(internalSocketEndpoint, { query: { token }, ...config }); }; type StoreContextType = { diff --git a/pages/api/mock/socketio.ts b/pages/api/mock/socketio.ts index 07dbe7b9..0d8f8ac9 100644 --- a/pages/api/mock/socketio.ts +++ b/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 {