Akkariin/gcgm-plugin
1
0
Fork 0
mirror of https://github.com/Grasscutters/gcgm-plugin.git synced 2024-05-14 09:01:14 +08:00
Code Issues Projects Releases Wiki Activity

RAM usage and player count graphs. Now uses serverHooks

Browse Source
This commit is contained in:
Benjamin Elsdon 2022-05-07 21:36:17 +08:00
parent e6a94436dc
commit 9ed0d17975
14 changed files with 284 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
gc-plugin/src/main/java/com/benj4/gcgm/GCGMPlugin.java
View File

@ -6,9 +6,12 @@ import com.benj4.gcgm.utils.*;
import com.benj4.gcgm.utils.web.WebUtils;
import emu.grasscutter.Grasscutter;
import emu.grasscutter.plugin.Plugin;
import emu.grasscutter.plugin.api.ServerHook;
import emu.grasscutter.server.dispatch.DispatchServer;
import emu.grasscutter.server.event.EventHandler;
import emu.grasscutter.server.event.HandlerPriority;
import emu.grasscutter.server.event.game.ServerTickEvent;
import emu.grasscutter.server.game.GameServer;
import emu.grasscutter.utils.Utils;
import express.Express;
@ -18,7 +21,7 @@ public class GCGMPlugin extends Plugin {
private static GCGMPlugin INSTANCE;
EventHandler<ServerTickEvent> serverTickEventHandler;
private static WebSocketServer webSocketServer;
private WebSocketServer webSocketServer;
private File webData;
@Override
@ -57,12 +60,11 @@ public class GCGMPlugin extends Plugin {
@Override
public void onEnable() {
if(webData.exists()) {
Express app = Grasscutter.getDispatchServer().getServer();
WebUtils.addStaticFiles(app, webData);
WebUtils.addStaticFiles(webData);
webSocketServer = new WebSocketServer();
webSocketServer.start(app);
webSocketServer.start();
Grasscutter.getPluginManager().registerListener(serverTickEventHandler);
serverTickEventHandler.register();
Grasscutter.getLogger().info("[GCGM] GCGM Enabled");
Grasscutter.getLogger().info("[GCGM] You can access your GM panel by navigating to " + GCGMUtils.GetDispatchAddress() + WebUtils.PAGE_ROOT);
@ -78,11 +80,19 @@ public class GCGMPlugin extends Plugin {
Grasscutter.getLogger().info("[GCGM] GCGM Disabled");
}
public static GCGMPlugin GetInstance() {
public static GCGMPlugin getInstance() {
return INSTANCE;
}
public static WebSocketServer getWebSocketServer() {
public WebSocketServer getWebSocketServer() {
return webSocketServer;
}
public static GameServer getGameServer() {
return GCGMPlugin.getInstance().getServer();
}
public static DispatchServer getDispatchServer() {
return ServerHook.getInstance().getDispatchServer();
}
}

15
gc-plugin/src/main/java/com/benj4/gcgm/handlers/ServerTickHandler.java
View File

@ -1,24 +1,35 @@
package com.benj4.gcgm.handlers;
import com.benj4.gcgm.GCGMPlugin;
import com.benj4.gcgm.server.websocket.json.TickData;
import com.benj4.gcgm.server.websocket.json.WSData;
import com.benj4.gcgm.utils.GCGMUtils;
import com.google.gson.JsonObject;
import emu.grasscutter.server.event.game.ServerTickEvent;
import emu.grasscutter.utils.EventConsumer;
import java.time.Instant;
public class ServerTickHandler implements EventConsumer<ServerTickEvent> {
private static Instant firstTick;
private static Instant lastTick;
@Override
public void consume(ServerTickEvent serverTickEvent) {
if(lastTick != null) {
Instant now = Instant.now();
long timeTaken = now.toEpochMilli() - lastTick.toEpochMilli();
GCGMPlugin.getWebSocketServer().broadcast(new WSData("tick", timeTaken));
TickData data = new TickData();
data.tickTimeElapsed = now.toEpochMilli() - lastTick.toEpochMilli();
data.serverUptime = lastTick.toEpochMilli() - firstTick.toEpochMilli();
data.getFreeMemory = GCGMUtils.GetFreeJVMMemory();
data.getAllocatedMemory = GCGMUtils.GetAllocatedJVMMemory();
data.playerCount = GCGMPlugin.getGameServer().getPlayers().size();
GCGMPlugin.getInstance().getWebSocketServer().broadcast(new WSData("tick", data));
lastTick = now;
} else {
lastTick = Instant.now();
firstTick = Instant.now();
}
}
}

5
gc-plugin/src/main/java/com/benj4/gcgm/server/websocket/WebSocketServer.java
View File

@ -1,5 +1,6 @@
package com.benj4.gcgm.server.websocket;
import com.benj4.gcgm.GCGMPlugin;
import com.benj4.gcgm.server.websocket.json.WSData;
import emu.grasscutter.Grasscutter;
import express.Express;
@ -16,7 +17,9 @@ public class WebSocketServer {
//SocketIOServer socketIOServer;
private static Map<WsContext, String> userUsernameMap = new ConcurrentHashMap<>();
public void start(Express app) {
public void start() {
Express app = GCGMPlugin.getDispatchServer().getServer();
app.ws("/gm", ws -> {
ws.onConnect(ctx -> {
String username = "Not logged in";

9
gc-plugin/src/main/java/com/benj4/gcgm/server/websocket/json/TickData.java Normal file
View File

@ -0,0 +1,9 @@
package com.benj4.gcgm.server.websocket.json;
public class TickData {
public long tickTimeElapsed;
public long serverUptime;
public long getFreeMemory;
public long getAllocatedMemory;
public int playerCount;
}

6
gc-plugin/src/main/java/com/benj4/gcgm/server/websocket/json/WSData.java
View File

@ -2,10 +2,10 @@ package com.benj4.gcgm.server.websocket.json;
public class WSData {
public String eventName;
public Object object;
public Object data;
public WSData(String eventName, Object object) {
public WSData(String eventName, Object data) {
this.eventName = eventName;
this.object = object;
this.data = data;
}
}

13
gc-plugin/src/main/java/com/benj4/gcgm/utils/GCGMUtils.java
View File

@ -2,6 +2,7 @@ package com.benj4.gcgm.utils;
import com.benj4.gcgm.GCGMPlugin;
import emu.grasscutter.Grasscutter;
import emu.grasscutter.server.game.GameServer;
import java.io.File;
import java.io.IOException;
@ -11,6 +12,8 @@ import java.nio.file.StandardCopyOption;
public class GCGMUtils {
private static Runtime RUNTIME = Runtime.getRuntime();
public static String GetDispatchAddress() {
return "http" + (Grasscutter.getConfig().getDispatchOptions().FrontHTTPS ? "s" : "") + "://" +
(Grasscutter.getConfig().getDispatchOptions().PublicIp.isEmpty() ? Grasscutter.getConfig().getDispatchOptions().Ip : Grasscutter.getConfig().getDispatchOptions().PublicIp) +
@ -20,7 +23,7 @@ public class GCGMUtils {
public static boolean CopyFile(String resourceName, String copyLocation) {
try {
Grasscutter.getLogger().info("[GCGM] Copying 'DefaultWebApp.zip' to './plugins/GCGM'");
Files.copy(GCGMPlugin.GetInstance().getResource(resourceName), Paths.get(new File(copyLocation).toURI()), StandardCopyOption.REPLACE_EXISTING);
Files.copy(GCGMPlugin.getInstance().getResource(resourceName), Paths.get(new File(copyLocation).toURI()), StandardCopyOption.REPLACE_EXISTING);
return true;
} catch (IOException e) {
Grasscutter.getLogger().error(String.format("[GCGM] An error occurred while trying to copy '%s' to '%s'", resourceName, copyLocation));
@ -28,4 +31,12 @@ public class GCGMUtils {
return false;
}
}
public static long GetFreeJVMMemory() {
return GCGMUtils.RUNTIME.freeMemory();
}
public static long GetAllocatedJVMMemory() {
return GCGMUtils.RUNTIME.totalMemory();
}
}

4
gc-plugin/src/main/java/com/benj4/gcgm/utils/web/WebUtils.java
View File

@ -1,5 +1,6 @@
package com.benj4.gcgm.utils.web;
import com.benj4.gcgm.GCGMPlugin;
import emu.grasscutter.Grasscutter;
import emu.grasscutter.utils.Utils;
import express.Express;
@ -12,7 +13,8 @@ public class WebUtils {
public static final String PAGE_ROOT = "/gm";
public static void addStaticFiles(Express app, File staticRoot) {
public static void addStaticFiles(File staticRoot) {
Express app = GCGMPlugin.getDispatchServer().getServer();
app.raw().config.precompressStaticFiles = false; // MUST BE SET TO FALSE OR FILES SUCH AS IMAGES WILL APPEAR CORRUPTED
app.raw().config.addStaticFiles(PAGE_ROOT, staticRoot.getAbsolutePath(), Location.EXTERNAL);
app.raw().config.addSinglePageRoot(PAGE_ROOT, Utils.toFilePath(staticRoot.getPath() + "/index.html"), Location.EXTERNAL);

5
web-interface/src/App.js
View File

@ -1,8 +1,11 @@
import { WebsocketProvider } from './Context/WebsocketProvider';
import Dashboard from './Dashboard';
function App() {
return (
<Dashboard />
<WebsocketProvider>
<Dashboard />
</WebsocketProvider>
);
}

7
web-interface/src/Components/Dashboard/StatsWidget.css
View File

@ -1,12 +1,11 @@
.graph {
position: absolute;
transform: translate(-50%, 0%);
top: 6%;
left: 50%;
float: left;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 8px;
width: 800px;
margin: 10px;
margin-left: 50px;
text-align: center;
}

150
web-interface/src/Components/Dashboard/StatsWidget.js
View File

@ -1,94 +1,114 @@
import React, { useState, useEffect } from "react";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { useWebSocket, ReadyState } from "react-use-websocket/dist/lib/use-websocket";
import React, { Component, useState, useEffect } from "react";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
import { Line } from "react-chartjs-2";
import "./StatsWidget.css";
import WebsocketContext, { useWebsocket } from "../../Context/WebsocketProvider";
import { toHaveStyle } from "@testing-library/jest-dom/dist/matchers";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
);
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement);
const CHART_COLORS = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
const CHART_COLORS = {
red: "rgb(255, 99, 132)",
orange: "rgb(255, 159, 64)",
yellow: "rgb(255, 205, 86)",
green: "rgb(75, 192, 192)",
blue: "rgb(54, 162, 235)",
purple: "rgb(153, 102, 255)",
grey: "rgb(201, 203, 207)",
};
const TICK_COUNT = 50;
const TICK_COUNT = 25;
const labels = [];
for (let i = 0; i <= TICK_COUNT; ++i) {
labels.push(i.toString());
labels.push(i.toString());
}
export default function StatsWidget() {
const protocol = window.location.protocol === "https:" ? "wss" : "wss"
const host = window.location.host;
const port = window.location.port;
export default class StatsWidget extends Component {
constructor(props) {
super(props);
const { sendMessage, lastMessage, readyState } = useWebSocket(protocol + "://"+ host +":" + port + "/gm");
this.state = {
graphHistory: [],
};
}
componentDidUpdate(lastProps) {
if (this.props.data !== this.props.ignoreData) {
if (this.props.serverUptime !== lastProps.serverUptime) {
var newGraph = this.state.graphHistory;
console.log(this.props);
newGraph.push({ tick: this.props.data });
if (newGraph.length > TICK_COUNT) {
newGraph.splice(0, 1);
}
this.setState({
graphHistory: newGraph,
});
}
}
}
render() {
return (
<div className="graph">
<p> { this.props.title } </p>
<p> {JSON.stringify(this.state.data)} </p>
<Line
datasetIdKey="1"
data={{
labels: this.state.graphHistory.map((gh, i) => this.state.graphHistory.length - i),
datasets: [
{
label: "",
data: this.state.graphHistory.map((gh) => gh.tick),
borderColor: CHART_COLORS.red,
fill: false,
cubicInterpolationMode: "monotone",
tension: 0.4,
},
],
}}
options={{
y: {
suggestedMin: this.props.suggestedYMin,
suggestedMax: this.props.suggestedYMax,
},
}}
/>
</div>
);
}
}
/*export default function StatsWidget() {
const [graphHistory, setGraphHistory] = useState([]);
const [lastMessage, connectionStatus, sendMessage] = useWebsocket();
useEffect(() => {
if (lastMessage !== null) {
const data = JSON.parse(lastMessage.data);
console.log(lastMessage())
if (lastMessage() !== null) {
const { data } = JSON.parse(lastMessage().data);
var newGraph = graphHistory;
newGraph.push({ time: new Date().getTime(), tick: data.object});
newGraph.push({ time: new Date().getTime(), tick: data.tickTimeElapsed });
if(newGraph.length > TICK_COUNT) {
newGraph.splice(0, 1);
}
setGraphHistory(newGraph);
}
}, [lastMessage, setGraphHistory]);
}, [graphHistory, lastMessage, setGraphHistory]);
/*const connectionStatus = {
const connectionStatus = {
[ReadyState.CONNECTING]: "Connecting",
[ReadyState.OPEN]: "Open",
[ReadyState.CLOSING]: "Closing",
[ReadyState.CLOSED]: "Closed",
[ReadyState.UNINSTANTIATED]: "Uninstantiated",
}[readyState];*/
}[readyState];
return (
<div className="graph">
<p> Server Performance (Ticks) </p>
<Line
datasetIdKey="1"
data={{
labels,
datasets: [
{
label: '',
data: graphHistory.map((l) => l.tick),
borderColor: CHART_COLORS.red,
fill: false,
cubicInterpolationMode: 'monotone',
tension: 0.4
}
]
}}
options={{
y: {
suggestedMin: 995,
suggestedMax: 1005
}
}}/>
</div>
);
}
}*/

61
web-interface/src/Context/WebsocketProvider.js Normal file
View File

@ -0,0 +1,61 @@
import React, { useContext, useCallback, useState } from 'react'
import { useWebSocket as Websocket, ReadyState } from "react-use-websocket/dist/lib/use-websocket";
import { ReactIsInDevelopmentMode } from '../util/util';
const WebsocketContext = React.createContext();
const protocol = window.location.protocol === "https:" ? "wss" : "wss"
const host = window.location.host;
const port = window.location.port;
function getWebsocketURL() {
if(ReactIsInDevelopmentMode) {
return "wss://localhost:443/gm";
} else {
return protocol + "://"+ host +":" + port + "/gm";
}
}
export function useWebsocket() {
return useContext(WebsocketContext);
}
export function WebsocketProvider({ children }) {
const { sendMessage, lastMessage, readyState } = Websocket(getWebsocketURL());
const connectionStatus = useCallback(() => {
if(readyState === ReadyState.CONNECTING) {
return "Connecting";
} else if(readyState === ReadyState.OPEN) {
return "Open";
} else if(readyState === ReadyState.CLOSING) {
return "Closing";
} else if(readyState === ReadyState.CLOSED) {
return "Closed";
} else if(readyState === ReadyState.UNINSTANTIATED) {
return "Uninstantiated";
}
}, [readyState]);
const getLastMessage = useCallback(() => {
if(lastMessage != null) {
if(lastMessage.data != null) {
return JSON.parse(lastMessage.data);
}
}
return {};
}, [lastMessage]);
const send = useCallback((data) => {
sendMessage(data, false);
}, [sendMessage]);
return (
<WebsocketContext.Provider value={{lastMessage: getLastMessage, connectionStatus, sendMessage: send}}>
{children}
</WebsocketContext.Provider>
)
}
export default WebsocketContext;

5
web-interface/src/Dashboard.css
View File

@ -3,4 +3,9 @@
background-color: #F8F9FB;
width: 100vw;
height: 100vh;
}
.content {
float: left;
width: calc(100vw - 350px);
}

52
web-interface/src/Dashboard.js
View File

@ -1,16 +1,46 @@
import React, { Component } from 'react'
import Sidepanel from './Components/Dashboard/Sidepanel/Sidepanel'
import StatsWidget from './Components/Dashboard/StatsWidget'
import React, { Component } from "react";
import Sidepanel from "./Components/Dashboard/Sidepanel/Sidepanel";
import StatsWidget from "./Components/Dashboard/StatsWidget";
import WebsocketContext, { useWebsocket } from "./Context/WebsocketProvider";
import './Dashboard.css'
import "./Dashboard.css";
import { bytesToMegabytes } from "./util/util";
export default class Dashboard extends Component {
render() {
return (
<div className='dashboard'>
<Sidepanel />
<StatsWidget />
static contextType = WebsocketContext;
constructor(props) {
super(props);
this.state = {
lastMessage: {
serverUptime: 0,
},
};
}
componentDidUpdate() {
if (typeof this.context.lastMessage().data !== "undefined") {
if (this.context.lastMessage().data.serverUptime !== this.state.lastMessage.serverUptime) {
//console.log(this.context.lastMessage().data);
this.setState({
lastMessage: this.context.lastMessage().data,
});
}
}
}
render() {
return (
<div className="dashboard">
<Sidepanel />
<div className="content">
<StatsWidget title="Server Performance (Ticks)" serverUptime={this.state.lastMessage.serverUptime} data={typeof this.state.lastMessage.tickTimeElapsed !== "undefined" ? this.state.lastMessage.tickTimeElapsed : -1} ignoreData={-1} suggestedYMin={995} suggestedYMax={1005} />
<StatsWidget title="Server Performance (RAM)" serverUptime={this.state.lastMessage.serverUptime} data={typeof this.state.lastMessage.getFreeMemory !== "undefined" ? bytesToMegabytes(this.state.lastMessage.getAllocatedMemory - this.state.lastMessage.getFreeMemory, 2) : -1} ignoreData={-1} suggestedYMin={0} suggestedYMax={bytesToMegabytes(this.state.lastMessage.getAllocatedMemory)} />
<StatsWidget title="Online Players" serverUptime={this.state.lastMessage.serverUptime} data={typeof this.state.lastMessage.playerCount !== "undefined" ? this.state.lastMessage.playerCount : -1} ignoreData={-1} suggestedYMin={0} suggestedYMax={10} />
</div>
)
}
</div>
);
}
}

24
web-interface/src/util/util.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
export function ReactIsInDevelopmentMode() {
return '_self' in React.createElement('div');
}
export function formatBytesToString(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
export function bytesToMegabytes(bytes, decimals = 2) {
const dm = decimals < 0 ? 0 : decimals;
const k = 1024;
return parseFloat((bytes / Math.pow(k, 2)).toFixed(dm));
}