diff --git a/package-lock.json b/package-lock.json
index bef7a8c..2f06b45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.3.7",
+        "@microsoft/signalr": "^8.0.0",
         "@types/node": "^20.14.9",
         "agora-electron-sdk": "^4.3.2",
         "antd": "^5.18.2",
@@ -1434,6 +1435,18 @@
         "node": ">= 12.13.0"
       }
     },
+    "node_modules/@microsoft/signalr": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/@microsoft/signalr/-/signalr-8.0.0.tgz",
+      "integrity": "sha512-K/wS/VmzRWePCGqGh8MU8OWbS1Zvu7DG7LSJS62fBB8rJUXwwj4axQtqrAAwKGUZHQF6CuteuQR9xMsVpM2JNA==",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "eventsource": "^2.0.2",
+        "fetch-cookie": "^2.0.3",
+        "node-fetch": "^2.6.7",
+        "ws": "^7.4.5"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3245,6 +3258,17 @@
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
       "dev": true
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
@@ -6230,7 +6254,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmmirror.com/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -6748,11 +6771,27 @@
         "es5-ext": "~0.10.14"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/execa": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/execa/-/execa-1.0.0.tgz",
@@ -7065,6 +7104,15 @@
       "resolved": "https://registry.npmmirror.com/fecha/-/fecha-4.2.3.tgz",
       "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
     },
+    "node_modules/fetch-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/fetch-cookie/-/fetch-cookie-2.2.0.tgz",
+      "integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==",
+      "dependencies": {
+        "set-cookie-parser": "^2.4.8",
+        "tough-cookie": "^4.0.0"
+      }
+    },
     "node_modules/file-type": {
       "version": "11.1.0",
       "resolved": "https://registry.npmmirror.com/file-type/-/file-type-11.1.0.tgz",
@@ -8337,7 +8385,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -9860,7 +9907,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -10793,6 +10839,11 @@
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
@@ -10821,6 +10872,14 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/query-string": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/query-string/-/query-string-5.1.1.tgz",
@@ -10834,6 +10893,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11942,6 +12006,11 @@
       "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-1.0.1.tgz",
       "integrity": "sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug=="
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
     "node_modules/resedit": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/resedit/-/resedit-2.0.2.tgz",
@@ -12223,7 +12292,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
       "optional": true
     },
     "node_modules/sass": {
@@ -12461,6 +12529,11 @@
       "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
+      "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -13478,11 +13551,32 @@
       "resolved": "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz",
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
     },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie/node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/tree-kill": {
       "version": "1.2.2",
@@ -13782,6 +13876,15 @@
       "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
       "deprecated": "Please see https://github.com/lydell/urix#deprecated"
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/url-parse-lax": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
@@ -14048,14 +14151,12 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -14254,6 +14355,26 @@
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xmlbuilder": {
       "version": "15.1.1",
       "resolved": "https://registry.npmmirror.com/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
@@ -15547,6 +15668,18 @@
         "cross-spawn": "^7.0.1"
       }
     },
+    "@microsoft/signalr": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/@microsoft/signalr/-/signalr-8.0.0.tgz",
+      "integrity": "sha512-K/wS/VmzRWePCGqGh8MU8OWbS1Zvu7DG7LSJS62fBB8rJUXwwj4axQtqrAAwKGUZHQF6CuteuQR9xMsVpM2JNA==",
+      "requires": {
+        "abort-controller": "^3.0.0",
+        "eventsource": "^2.0.2",
+        "fetch-cookie": "^2.0.3",
+        "node-fetch": "^2.6.7",
+        "ws": "^7.4.5"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -16615,6 +16748,14 @@
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
       "dev": true
     },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "requires": {
+        "event-target-shim": "^5.0.0"
+      }
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
@@ -18876,7 +19017,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmmirror.com/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
       "optional": true,
       "requires": {
         "iconv-lite": "^0.6.2"
@@ -19179,11 +19319,21 @@
         "es5-ext": "~0.10.14"
       }
     },
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+    },
     "eventemitter3": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
     },
+    "eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA=="
+    },
     "execa": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/execa/-/execa-1.0.0.tgz",
@@ -19439,6 +19589,15 @@
       "resolved": "https://registry.npmmirror.com/fecha/-/fecha-4.2.3.tgz",
       "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
     },
+    "fetch-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/fetch-cookie/-/fetch-cookie-2.2.0.tgz",
+      "integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==",
+      "requires": {
+        "set-cookie-parser": "^2.4.8",
+        "tough-cookie": "^4.0.0"
+      }
+    },
     "file-type": {
       "version": "11.1.0",
       "resolved": "https://registry.npmmirror.com/file-type/-/file-type-11.1.0.tgz",
@@ -20417,7 +20576,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "optional": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -21575,7 +21733,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
       "requires": {
         "whatwg-url": "^5.0.0"
       }
@@ -22239,6 +22396,11 @@
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
@@ -22269,6 +22431,11 @@
         }
       }
     },
+    "punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="
+    },
     "query-string": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/query-string/-/query-string-5.1.1.tgz",
@@ -22279,6 +22446,11 @@
         "strict-uri-encode": "^1.0.0"
       }
     },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -23043,6 +23215,11 @@
       "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-1.0.1.tgz",
       "integrity": "sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug=="
     },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
     "resedit": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/resedit/-/resedit-2.0.2.tgz",
@@ -23228,7 +23405,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
       "optional": true
     },
     "sass": {
@@ -23399,6 +23575,11 @@
       "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
+    "set-cookie-parser": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
+      "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
+    },
     "set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -24213,11 +24394,28 @@
       "resolved": "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz",
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
     },
+    "tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "requires": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "dependencies": {
+        "universalify": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz",
+          "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg=="
+        }
+      }
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "tree-kill": {
       "version": "1.2.2",
@@ -24428,6 +24626,15 @@
       "resolved": "https://registry.npmmirror.com/urix/-/urix-0.1.0.tgz",
       "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg=="
     },
+    "url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "url-parse-lax": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
@@ -24615,14 +24822,12 @@
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "requires": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -24778,6 +24983,12 @@
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "requires": {}
+    },
     "xmlbuilder": {
       "version": "15.1.1",
       "resolved": "https://registry.npmmirror.com/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
diff --git a/package.json b/package.json
index 135cfca..53d1506 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
+    "@microsoft/signalr": "^8.0.0",
     "@types/node": "^20.14.9",
     "agora-electron-sdk": "^4.3.2",
     "antd": "^5.18.2",
diff --git a/preload.js b/preload.js
index 88b021b..14577fb 100644
--- a/preload.js
+++ b/preload.js
@@ -169,11 +169,11 @@ contextBridge.exposeInMainWorld(
       joinChannel(false)
     },
     // 加入频道
-    setJoinChannel: () => {
-      videoID = `vidoe-${234}-${agoraAonfig.channelId}`;
+    setJoinChannel: (data) => {
+      // videoID = `vidoe-${data.userid}-${data.channelId}`;
       rtcEngine.joinChannelEx(agoraAonfig.token, {
-        channelId: agoraAonfig.channelId,
-        localUid: 234,
+        channelId: data.channelId,
+        localUid: data.userid,
       }, {
         autoSubscribeAudio: true, //设置是否自动订阅所有音频流
         autoSubscribeVideo: true, //设置是否自动订阅所有视频流
diff --git a/src/App.tsx b/src/App.tsx
index b41ab02..8ff7f24 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import Login from '@/page/Login/index'
 import Meeting from '@/page/Meeting/index'
 import NotFound from '@/page/NotFound/index'
 import { storage } from '@/utils'
+import { Spin } from "antd";
 
 const App: React.FC = () => {
   const navigate = useNavigate();
@@ -16,6 +17,7 @@ const App: React.FC = () => {
     width: window.innerWidth,
     height: window.innerHeight,
   });
+  const [spinning, setSpinning] = useState(false);
   useEffect(() => {
     if (storage.getItem('TOKEN')) {
       window.electron.setMainWindowSize({
@@ -31,21 +33,38 @@ const App: React.FC = () => {
       })
       navigate('/login')
     }
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-      window.electron.getIsMaximized().then((res: boolean) => {
-        const dom = document.getElementById('root') as any;
-        dom.style.borderRadius = res ? '0px' : '10px'
-      })
-    };
     window.addEventListener('resize', handleResize);
+    const originalSetItem = window.localStorage.setItem;
+    window.localStorage.setItem = function (key, value) {
+      originalSetItem.call(this, key, value);
+      const event = new Event('customStorageChange') as any;
+      event.key = key
+      event.value = value
+      window.dispatchEvent(event);
+    };
+    window.addEventListener('customStorageChange', handleCustomStorageChange);
+
     return () => {
       window.removeEventListener('resize', handleResize);
+      window.removeEventListener('customStorageChange', handleCustomStorageChange);
     };
   }, []);
+
+  const handleResize = (): void => {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+    window.electron.getIsMaximized().then((res: boolean) => {
+      const dom = document.getElementById('root') as any;
+      dom.style.borderRadius = res ? '0px' : '10px'
+    })
+  };
+  const handleCustomStorageChange = (e: any): void => {
+    if (e.key === 'loading') {
+      setSpinning(Boolean(e.value))
+    }
+  };
   return (
     <>
       <Routes>
@@ -59,6 +78,7 @@ const App: React.FC = () => {
         <Route path='/meeting' element={<Meeting />} />
         <Route path='*' element={<NotFound />} />
       </Routes>
+      <Spin spinning={spinning} fullscreen />
     </>
   )
 }
diff --git a/src/api/Home/Index/index.ts b/src/api/Home/Index/index.ts
index c865b53..2dfc1e7 100644
--- a/src/api/Home/Index/index.ts
+++ b/src/api/Home/Index/index.ts
@@ -18,3 +18,9 @@ export const GetCheckoutRoomNum = (roomNum: string) =>
     method: 'get',
   })
 
+export const GetRoomRtcToken = (roomNum: string) =>
+  request({
+    url: `/room/tk/rtc?roomNum=${roomNum}`,
+    method: 'get',
+  })
+
diff --git a/src/page/Home/Index/index.tsx b/src/page/Home/Index/index.tsx
index 6f5165b..81de0be 100644
--- a/src/page/Home/Index/index.tsx
+++ b/src/page/Home/Index/index.tsx
@@ -3,8 +3,7 @@ import { useEffect, useState } from "react";
 import Operation from '@/components/Operation';
 import { useNavigate } from 'react-router-dom';
 import { Button, Input, Modal, Pagination, Empty, message } from "antd";
-import { GetRoom, PostRomm, GetCheckoutRoomNum } from '@/api/Home/Index';
-// import { clipboard } from 'electron'
+import { GetRoom, PostRomm, GetCheckoutRoomNum, GetRoomRtcToken } from '@/api/Home/Index';
 const Index: React.FC = () => {
   const navigate = useNavigate();
   const [list, setList] = useState({
@@ -52,6 +51,13 @@ const Index: React.FC = () => {
       }
     })
   }
+  const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise<void> => {
+    await GetRoomRtcToken(roomNum).then(res => {
+      if (res.code === 200) {
+        callBack(res.data)
+      }
+    })
+  }
 
   return (
     <>
@@ -108,7 +114,11 @@ const Index: React.FC = () => {
                       <Button type="primary"
                         iconPosition={'end'}
                         onClick={() => {
-                          navigate('/meeting')
+                          getRoomRtcToken(item.roomNum, (res: any) => {
+                            if (res) {
+                              navigate(`/meeting?channelId=${item.roomNum}&token=${res}`)
+                            }
+                          })
                         }}
                         icon={<img src="/src/assets/icon9.png" alt="" />}
                         className='m-ant-btn'>
@@ -234,7 +244,11 @@ const Index: React.FC = () => {
               }
               isGetCheckoutRoomNum(joinRoomFrom, (bool: boolean) => {
                 if (bool) {
-
+                  getRoomRtcToken(joinRoomFrom, (res: any) => {
+                    if (res) {
+                      navigate(`/meeting?channelId=${joinRoomFrom}&token=${res}`)
+                    }
+                  })
                 } else {
                   message.error('房间号不存在！')
                 }
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 00eb18c..0e4ce6f 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -8,10 +8,13 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Button, Input, Popover, Modal, Checkbox, message, Select, Slider } from "antd";
 import { SearchOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
+import { storage } from '@/utils';
+import * as signalR from '@microsoft/signalr';
 const Meeting: React.FC = () => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const [statusList, setStatusList] = useState({
     userList: false,
     userChatList: false,
@@ -94,7 +97,35 @@ const Meeting: React.FC = () => {
   const [videoID, setVideoID] = useState('')
 
   useEffect(() => {
+    // const user = JSON.parse(storage.getItem('user') as string);
+    // const connection = new signalR.HubConnectionBuilder().withAutomaticReconnect()
+    //   .withUrl("http://192.168.2.8:5192/session-manage", {
+    //     skipNegotiation: true,
+    //     transport: signalR.HttpTransportType.WebSockets,
+    //     accessTokenFactory: () => user.token
+    //   })
+    //   .build();
 
+    // connection.start()
+    //   .then(() => console.log('Connection started!'))
+    //   .catch(err => console.error('Error while establishing connection: ', err));
+
+    // connection.on("GetUserId", (message) => {
+    //   console.log(message);
+    // });
+
+    // setTimeout(() => {
+    //   connection.invoke("GetUserId",'11111')
+    //     .catch(err => console.error(err));
+    // }, 3000);
+    // return () => {
+    //   connection.stop()
+    // }
+    window.electron.setJoinChannel({
+      channelId: searchParams.get('channelId') as string,
+      userid: searchParams.get('userid') as string,
+      token: searchParams.get('token') as string,
+    })
   }, []);
 
   const changeStatusList = (row: any, itemIndex: number, rowIndex: number): void => {
@@ -257,8 +288,7 @@ const Meeting: React.FC = () => {
                   {list.map((item) =>
                     <SwiperSlide key={item}>
                       <div className={styles.meetingContentSwiperCard}>
-                        <div className={styles.meetingContentSwiperCardVdeio}></div>
-                        {/* <div style={{ color: 'white', position: 'absolute', left: 0, top: 0 }}>{item}</div> */}
+                        <div className={styles.meetingContentSwiperCardVdeio} id={videoID}></div>
                         {meetingContentUser()}
                       </div>
                     </SwiperSlide>
@@ -266,7 +296,7 @@ const Meeting: React.FC = () => {
                 </Swiper>
               </div>
               <div className={`${styles.meetingContentVideo} drag`}>
-                <div className={styles.meetingContentVideoDom} id={videoID}></div>
+                <div className={styles.meetingContentVideoDom}></div>
                 {meetingContentUser()}
               </div>
             </div>
diff --git a/src/render.d.ts b/src/render.d.ts
index 968da00..e6dd5ad 100644
--- a/src/render.d.ts
+++ b/src/render.d.ts
@@ -9,7 +9,7 @@ export interface IElectronAPI {
   setMainWindowSize: (config: any) => void;
   getIsMaximized: () => Promise<boolean>;
   setViewStatus: (status: 'quit' | 'maximize' | 'minimize' | 'unmaximize') => void;
-  setJoinChannel: () => Promise<void>;
+  setJoinChannel: (data: { channelId: string, userid: string, token: string }) => Promise<void>;
   getVideoId: () => string;
   startRecordingDeviceTest: (indicationInterval: number) => void;
   stopAudioDeviceLoopbackTest: () => void;
diff --git a/src/utils/request/request.ts b/src/utils/request/request.ts
index 886a94d..08648a4 100644
--- a/src/utils/request/request.ts
+++ b/src/utils/request/request.ts
@@ -85,6 +85,7 @@ class Request {
 
   request<T>(config: RequestConfig): Promise<T> {
     return new Promise((resolve, reject) => {
+      storage.setItem('loading', true)
       if (config.interceptors?.requestInterceptors) {
         config = config.interceptors.requestInterceptors(config)
       }
@@ -99,6 +100,8 @@ class Request {
         })
         .catch((err: any) => {
           reject(err)
+        }).finally(() => {
+          storage.setItem('loading', false)
         })
     })
   }