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..6b84ed77 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,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" />
diff --git a/contexts/SocketContext.tsx b/contexts/SocketContext.tsx
index 879e9992..657de40d 100644
--- a/contexts/SocketContext.tsx
+++ b/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 = {
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",
   };
 };
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 {