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

pull/13/head
moonrailgun 4 years ago
parent 7d80563741
commit b3b88968a6

@ -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();
});
});
}

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

@ -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 };
}

@ -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,

@ -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">

Loading…
Cancel
Save