143 lines
3.1 KiB
JavaScript
143 lines
3.1 KiB
JavaScript
import { createContext, useEffect, useState } from "react";
|
|
|
|
/**
|
|
* constants
|
|
*/
|
|
export const Constants = {
|
|
API_ADDRESS: "http://localhost:8080/v1",
|
|
WS_ADDRESS: "ws://localhost:8080/ws",
|
|
};
|
|
|
|
/**
|
|
* client user data
|
|
*/
|
|
|
|
let l = "loading...";
|
|
|
|
// for the data preview when the request is not finished
|
|
export const ClientUserDataContextPreview = {
|
|
Username: l,
|
|
Email: l,
|
|
};
|
|
|
|
export let ClientUserDataContext = createContext(null);
|
|
|
|
/**
|
|
* user session
|
|
*/
|
|
export function UseUserSession() {
|
|
const getUserSession = () => {
|
|
return JSON.parse(localStorage.getItem("session"));
|
|
};
|
|
|
|
const [userSession, setUserSession] = useState(getUserSession());
|
|
|
|
const saveUserSession = (session) => {
|
|
setUserSession(session);
|
|
|
|
if (session === undefined) {
|
|
localStorage.removeItem("session");
|
|
} else {
|
|
localStorage.setItem("session", JSON.stringify(session));
|
|
}
|
|
};
|
|
|
|
return {
|
|
setUserSession: saveUserSession,
|
|
userSession,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* websocket
|
|
*/
|
|
let webSocketContextPreview = {
|
|
connectionBadgeStatus: "error",
|
|
connectedWebSocketUsersCount: 0,
|
|
};
|
|
|
|
export const WebSocketTestContext = createContext(webSocketContextPreview);
|
|
|
|
// commands received from the backend server
|
|
const ReceivedMessagesCommands = {
|
|
InitUserSocketConnection: 1,
|
|
UpdateConnectedUsers: 2,
|
|
};
|
|
|
|
export function WebSocketProvider({
|
|
children,
|
|
userSession,
|
|
setUserSession,
|
|
setUserData,
|
|
}) {
|
|
const [isReady, setIsReady] = useState(false);
|
|
const [connectionBadgeStatus, setConnectionBadgeStatus] = useState("error");
|
|
const [connectedWebSocketUsersCount, setConnectedWebSocketUsersCount] =
|
|
useState(0);
|
|
|
|
let socket = null;
|
|
|
|
const connect = () => {
|
|
socket = new WebSocket(Constants.WS_ADDRESS + "?auth=" + userSession);
|
|
|
|
socket.onopen = () => {
|
|
console.log("connected");
|
|
setConnectionBadgeStatus("success");
|
|
setIsReady(true);
|
|
};
|
|
|
|
socket.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
console.log("received message", data);
|
|
|
|
const cmd = data.Cmd;
|
|
const body = data.Body;
|
|
|
|
switch (cmd) {
|
|
case ReceivedMessagesCommands.InitUserSocketConnection:
|
|
setUserData(body);
|
|
break;
|
|
case ReceivedMessagesCommands.UpdateConnectedUsers:
|
|
setConnectedWebSocketUsersCount(body);
|
|
break;
|
|
}
|
|
};
|
|
|
|
socket.onclose = (event) => {
|
|
setIsReady(false);
|
|
setConnectionBadgeStatus("error");
|
|
console.log("closed", event);
|
|
|
|
// custom code defined by the backend server
|
|
if (event.code === 4001) {
|
|
setUserSession();
|
|
window.location.href = "/";
|
|
return;
|
|
}
|
|
|
|
if (event.reason.code === 1005) return;
|
|
|
|
console.log("reconnecting...");
|
|
|
|
setTimeout(() => connect(), 1000);
|
|
};
|
|
};
|
|
|
|
useEffect(() => {
|
|
connect();
|
|
|
|
return () => socket.close();
|
|
}, []);
|
|
|
|
return (
|
|
<WebSocketTestContext.Provider
|
|
value={{
|
|
connectionBadgeStatus: connectionBadgeStatus,
|
|
connectedWebSocketUsersCount: connectedWebSocketUsersCount,
|
|
}}
|
|
>
|
|
{children}
|
|
</WebSocketTestContext.Provider>
|
|
);
|
|
}
|