misc_pterodactyl-panel/resources/scripts/components/server/WebsocketHandler.tsx

126 lines
4.7 KiB
TypeScript
Raw Normal View History

import React, { useEffect, useState } from 'react';
import { Websocket } from '@/plugins/Websocket';
import { ServerContext } from '@/state/server';
import getWebsocketToken from '@/api/server/getWebsocketToken';
import ContentContainer from '@/components/elements/ContentContainer';
import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner';
2020-07-04 22:58:14 +00:00
import tw from 'twin.macro';
const reconnectErrors = ['jwt: exp claim is invalid', 'jwt: created too far in past (denylist)'];
export default () => {
2020-09-27 16:22:09 +00:00
let updatingToken = false;
const [error, setError] = useState<'connecting' | string>('');
const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
const uuid = ServerContext.useStoreState((state) => state.server.data?.uuid);
const setServerStatus = ServerContext.useStoreActions((actions) => actions.status.setServerStatus);
const { setInstance, setConnectionState } = ServerContext.useStoreActions((actions) => actions.socket);
2021-05-08 17:37:18 +00:00
const updateToken = (uuid: string, socket: Websocket) => {
if (updatingToken) return;
updatingToken = true;
getWebsocketToken(uuid)
.then((data) => socket.setToken(data.token, true))
.catch((error) => console.error(error))
2021-05-08 17:37:18 +00:00
.then(() => {
updatingToken = false;
});
};
const connect = (uuid: string) => {
const socket = new Websocket();
socket.on('auth success', () => setConnectionState(true));
socket.on('SOCKET_CLOSE', () => setConnectionState(false));
socket.on('SOCKET_ERROR', () => {
2020-09-27 16:22:09 +00:00
setError('connecting');
setConnectionState(false);
});
socket.on('status', (status) => setServerStatus(status));
socket.on('daemon error', (message) => {
2019-09-28 20:09:47 +00:00
console.warn('Got error message from daemon socket:', message);
});
2020-09-27 16:22:09 +00:00
socket.on('token expiring', () => updateToken(uuid, socket));
socket.on('token expired', () => updateToken(uuid, socket));
socket.on('jwt error', (error: string) => {
setConnectionState(false);
console.warn('JWT validation error from wings:', error);
if (reconnectErrors.find((v) => error.toLowerCase().indexOf(v) >= 0)) {
2020-09-27 16:22:09 +00:00
updateToken(uuid, socket);
} else {
setError(
'There was an error validating the credentials provided for the websocket. Please refresh the page.'
);
2020-09-27 16:22:09 +00:00
}
});
2019-09-28 20:09:47 +00:00
2020-12-16 23:55:44 +00:00
socket.on('transfer status', (status: string) => {
if (status === 'starting' || status === 'success') {
2020-12-16 23:55:44 +00:00
return;
}
// This code forces a reconnection to the websocket which will connect us to the target node instead of the source node
// in order to be able to receive transfer logs from the target node.
2020-12-16 23:55:44 +00:00
socket.close();
setError('connecting');
setConnectionState(false);
setInstance(null);
connect(uuid);
2020-12-16 23:55:44 +00:00
});
getWebsocketToken(uuid)
.then((data) => {
// Connect and then set the authentication token.
socket.setToken(data.token).connect(data.socket);
// Once that is done, set the instance.
setInstance(socket);
})
.catch((error) => console.error(error));
2020-12-16 23:55:44 +00:00
};
useEffect(() => {
connected && setError('');
}, [connected]);
2020-12-16 23:55:44 +00:00
useEffect(() => {
return () => {
instance && instance.close();
};
}, [instance]);
2020-12-16 23:55:44 +00:00
useEffect(() => {
// If there is already an instance or there is no server, just exit out of this process
// since we don't need to make a new connection.
if (instance || !uuid) {
return;
}
connect(uuid);
}, [uuid]);
return error ? (
<CSSTransition timeout={150} in appear classNames={'fade'}>
<div css={tw`bg-red-500 py-2`}>
<ContentContainer css={tw`flex items-center justify-center`}>
{error === 'connecting' ? (
<>
<Spinner size={'small'} />
<p css={tw`ml-2 text-sm text-red-100`}>
We&apos;re having some trouble connecting to your server, please wait...
2020-09-27 16:22:09 +00:00
</p>
</>
) : (
<p css={tw`ml-2 text-sm text-white`}>{error}</p>
)}
</ContentContainer>
</div>
</CSSTransition>
) : null;
};