@@ -253,6 +264,14 @@ export function InspectConnection({
}
+
+ {/* Schema */}
+ {(selectedTab === InspectTab.SCHEMA) && (
+
+ )}
{/* Events */}
{(selectedTab === InspectTab.RAW) &&
diff --git a/src/components/JoinRoomForm.tsx b/src/components/JoinRoomForm.tsx
index 187f959..9fc0e9e 100644
--- a/src/components/JoinRoomForm.tsx
+++ b/src/components/JoinRoomForm.tsx
@@ -1,6 +1,6 @@
import { Client, Room, RoomAvailable } from "colyseus.js";
import { useState } from "react";
-import { global, client, roomsBySessionId, messageTypesByRoom, Connection, matchmakeMethods, getRoomColorClass } from "../utils/Types";
+import { global, client, roomsBySessionId, messageTypesByRoom, Connection, matchmakeMethods, getRoomColorClass, messageSchemasByRoom } from "../utils/Types";
import { DEVMODE_RESTART, RAW_EVENTS_KEY, onRoomConnected } from "../utils/ColyseusSDKExt";
import { LimitedArray } from "../utils/LimitedArray";
import { JSONEditor } from "../elements/JSONEditor";
@@ -8,6 +8,7 @@ import * as JSONEditorModule from "jsoneditor";
import { RoomWithId } from "../elements/RoomWithId";
import { AuthOptions } from "./AuthOptions";
import type { AuthConfig } from "../../src-backend/index";
+import { MessageType } from "../enums/room/MessageType";
export function JoinRoomForm ({
roomNames,
@@ -145,6 +146,11 @@ export function JoinRoomForm ({
});
});
+ room.onMessage(MessageType.COLLECT_MESSAGE_SCHEMAS, (messageSchemas) => {
+ // Store the message schemas information
+ messageSchemasByRoom[room.name] = messageSchemas;
+ })
+
room.onLeave((code) =>
onDisconnection(room.sessionId));
diff --git a/src/components/MessageSchemasView.tsx b/src/components/MessageSchemasView.tsx
new file mode 100644
index 0000000..d1e7985
--- /dev/null
+++ b/src/components/MessageSchemasView.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { messageSchemasByRoom } from '../utils/Types';
+import JsonView from 'react18-json-view';
+import { MessageSchemas } from '../interfaces/SchemasByRoom';
+
+export function MessageSchemasView({
+ roomName,
+ messageSchemas
+}: {
+ roomName: string,
+ messageSchemas: MessageSchemas | undefined
+}) {
+ if (!messageSchemasByRoom[roomName]) {
+ return
No schema information available.
;
+ }
+
+ const renderSchema = (schema: object | undefined): JSX.Element => {
+ if (!schema) return
No schema available for this message type.
;
+
+ return (
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+ | Client's Message |
+ Server's Message |
+
+
+
+
+ |
+ {renderSchema(messageSchemas?.client)}
+ |
+
+ {renderSchema(messageSchemas?.server)}
+ |
+
+
+
+
+ );
+}
diff --git a/src/enums/room/MessageType.ts b/src/enums/room/MessageType.ts
new file mode 100644
index 0000000..2f10fb5
--- /dev/null
+++ b/src/enums/room/MessageType.ts
@@ -0,0 +1,3 @@
+export enum MessageType {
+ COLLECT_MESSAGE_SCHEMAS = 'collect_message_schemas'
+}
diff --git a/src/interfaces/SchemasByRoom.ts b/src/interfaces/SchemasByRoom.ts
new file mode 100644
index 0000000..da72729
--- /dev/null
+++ b/src/interfaces/SchemasByRoom.ts
@@ -0,0 +1,12 @@
+export interface MessageSchemas {
+ client?: object,
+ server?: object
+}
+
+export interface MessageSchemasByType {
+ [type: string]: MessageSchemas
+}
+
+export interface MessageSchemasByRoom {
+ [roomName: string]: MessageSchemasByType
+}
diff --git a/src/utils/Types.ts b/src/utils/Types.ts
index 0e9eab3..2807b12 100644
--- a/src/utils/Types.ts
+++ b/src/utils/Types.ts
@@ -1,4 +1,5 @@
import { Client, Room } from "colyseus.js";
+import { MessageSchemasByRoom } from "../interfaces/SchemasByRoom";
import { LimitedArray } from "./LimitedArray";
export type Connection = {
@@ -17,6 +18,7 @@ export const global = { connections: [] as Connection[], };
export const roomsBySessionId: { [sessionId: string]: Room } = {};
export const messageTypesByRoom: { [key: string]: string[] } = {};
+export const messageSchemasByRoom: MessageSchemasByRoom = {}
let currentColor = -1;
export const allRoomColors: string[] = [