refactor(web): 登录成功后连接到服务器

shared/api/socket.ts

@@ -0,0 +1,32 @@
+import { io, Socket } from 'socket.io-client';
+import { config } from '../config';
+import _isNil from 'lodash/isNil';
+
+let socket: Socket;
+
+/**
+ * 创建Socket连接
+ * 如果已经有Socket连接则关闭上一个
+ * @param token Token
+ */
+export function createSocket(token: string) {
+  if (!_isNil(socket)) {
+    socket.close();
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    socket = io(config.serverUrl, {
+      transports: ['websocket'],
+      auth: {
+        token,
+      },
+    });
+    socket.once('connect', () => {
+      // 连接成功
+      resolve();
+    });
+    socket.once('error', () => {
+      reject();
+    });
+  });
+}

shared/index.tsx

@@ -1,5 +1,6 @@
 // api
 export { buildStorage } from './api/buildStorage';
+export { createSocket } from './api/socket';
 
 // components
 export { FastForm } from './components/FastForm/index';

web/src/hooks/useEnsureSocket.ts

@@ -0,0 +1,17 @@
+import { createSocket, useAsync } from 'pawchat-shared';
+import { getUserJWT } from '../utils/jwt-helper';
+
+/**
+ * 创建全局Socket
+ */
+export function useEnsureSocket() {
+  const { loading, error } = useAsync(async () => {
+    const token = await getUserJWT();
+    if (typeof token === 'string') {
+      await createSocket(token);
+      console.log('当前socket连接成功'); // TODO
+    }
+  }, []);
+
+  return { loading, error };
+}

web/src/routes/Entry/index.tsx

@@ -9,7 +9,7 @@ import { RegisterView } from './RegisterView';
 
 export const EntryRoute = React.memo(() => {
   return (
-    <div className={'h-full flex flex-row'}>
+    <div className="h-full flex flex-row">
       <div
         className={clsx(
           styles.entryLeft,

web/src/routes/Main.tsx

@@ -1,6 +1,8 @@
 import { Icon } from '@iconify/react';
 import clsx, { ClassValue } from 'clsx';
 import React, { useLayoutEffect } from 'react';
+import { LoadingSpinner } from '../components/LoadingSpinner';
+import { useEnsureSocket } from '../hooks/useEnsureSocket';
 
 const NavbarNavItem: React.FC<{
   className?: ClassValue;
@@ -18,6 +20,16 @@ const NavbarNavItem: React.FC<{
 });
 
 export const MainRoute: React.FC = React.memo(() => {
+  const { loading } = useEnsureSocket();
+
+  if (loading) {
+    return (
+      <div className="w-screen h-screen flex items-center justify-center bg-gray-700 text-white text-xl">
+        <LoadingSpinner tip="正在连接到聊天服务器..." />
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full">
       <div className="w-16 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">