mml-io · MarcusLongmuir · Sep 4, 2023 · Sep 1, 2023 · Sep 1, 2023 · Sep 4, 2023
diff --git a/.eslintrc b/.eslintrc
@@ -12,7 +12,10 @@
     "plugin:import/errors",
     "plugin:import/warnings",
     "plugin:import/typescript",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended'
   ],
   "plugins": ["@typescript-eslint", "prettier"],
   "rules": {
@@ -42,5 +45,10 @@
         "@typescript-eslint/no-var-requires": "off"
       }
     }
-  ]
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }
diff --git a/example/server/package.json b/example/server/package.json
@@ -12,12 +12,13 @@
     "iterate": "concurrently \"tsx ./build.ts --watch\" \"nodemon\"",
     "start": "NODE_ENV=production node build/index.js",
     "type-check": "tsc --noEmit",
-    "lint": "eslint \"./src/**/*.{ts,}\" --max-warnings 0",
-    "lint:fix": "eslint \"./src/**/*.{ts,}\" --fix"
+    "lint": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --max-warnings 0",
+    "lint-fix": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --fix"
   },
   "dependencies": {
     "@example/web-client": "^0.6.1",
     "@mml-io/3d-web-user-networking": "^0.6.1",
+    "@mml-io/3d-web-text-chat": "^0.6.1",
     "chokidar": "^3.5.3",
     "cors": "^2.8.5",
     "express": "4.18.2",
@@ -27,11 +28,11 @@
     "ws": "8.13.0"
   },
   "devDependencies": {
-    "@types/cors": "2.8.13",
+    "@types/cors": "2.8.14",
     "@types/express": "^4.17.17",
     "@types/express-ws": "^3.0.1",
     "@types/http-proxy": "^1.17.11",
-    "@types/node": "^20.5.7",
+    "@types/node": "^20.5.9",
     "nodemon": "^3.0.1"
   }
 }
diff --git a/example/server/src/index.ts b/example/server/src/index.ts
@@ -1,6 +1,7 @@
 import path from "path";
 import url from "url";
 
+import { ChatNetworkingServer } from "@mml-io/3d-web-text-chat";
 import { UserNetworkingServer } from "@mml-io/3d-web-user-networking";
 import cors from "cors";
 import express from "express";
@@ -33,6 +34,11 @@ app.ws("/network", (ws) => {
   userNetworkingServer.connectClient(ws);
 });
 
+const chatNetworkingServer = new ChatNetworkingServer();
+app.ws("/chat-network", (ws, req) => {
+  chatNetworkingServer.connectClient(ws, parseInt(req.query.id as string, 10));
+});
+
 // Serve the app (including development mode)
 addWebAppRoutes(app);
 

diff --git a/example/server/tsconfig.json b/example/server/tsconfig.json
@@ -17,5 +17,6 @@
     "noEmit": true,
     "baseUrl": "."
   },
-  "include": ["./src/**/*.ts", "./test/**/*.ts"]
+  "include": ["src/**/*", "test/**/*", "./build.ts"],
+  "exclude": ["**/build/*", "types-src"]
 }
diff --git a/example/web-client/package.json b/example/web-client/package.json
@@ -10,11 +10,12 @@
     "build": "rimraf ./build && tsx ./build.ts --build",
     "iterate": "tsx ./build.ts --watch",
     "type-check": "tsc --noEmit",
-    "lint": "eslint \"./src/**/*.{ts,tsx}\" --max-warnings 0",
-    "lint:fix": "eslint \"./src/**/*.{ts,tsx}\" --fix"
+    "lint": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --max-warnings 0",
+    "lint-fix": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --fix"
   },
   "dependencies": {
     "@mml-io/3d-web-client-core": "^0.6.1",
+    "@mml-io/3d-web-text-chat": "^0.6.1",
     "three": "0.153.0"
   },
   "devDependencies": {

diff --git a/example/web-client/public/index.html b/example/web-client/public/index.html
@@ -9,6 +9,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <div id="text-chat-ui"></div>
     <script type="application/javascript" src="/web-client/index.js"></script>
   </body>
 </html>
diff --git a/example/web-client/src/index.ts b/example/web-client/src/index.ts
@@ -10,6 +10,7 @@ import {
   TimeManager,
   Sun as ComposerSun,
 } from "@mml-io/3d-web-client-core";
+import { ChatNetworkingClient, FromClientChatMessage, TextChatUI } from "@mml-io/3d-web-text-chat";
 import {
   UserNetworkingClient,
   UserNetworkingClientUpdate,
@@ -41,6 +42,14 @@ export class App {
 
   private readonly sun: Sun | ComposerSun | null;
 
+  private networkChat: ChatNetworkingClient | null = null;
+
+  private clientId: number | null = null;
+  private textChatUI: TextChatUI | null = null;
+
+  private readonly protocol: string = window.location.protocol === "https:" ? "wss:" : "ws:";
+  private readonly host: string = window.location.host;
+
   constructor() {
     this.scene = new Scene();
     this.collisionsManager = new CollisionsManager(this.scene);
@@ -73,10 +82,8 @@ export class App {
       modelScale: 1,
     };
 
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const host = window.location.host;
     this.networkClient = new UserNetworkingClient(
-      `${protocol}//${host}/network`,
+      `${this.protocol}//${this.host}/network`,
       (url: string) => new WebSocket(url),
       (status: WebsocketStatus) => {
         if (status === WebsocketStatus.Disconnected || status === WebsocketStatus.Reconnecting) {
@@ -86,6 +93,8 @@ export class App {
         }
       },
       (clientId: number) => {
+        this.clientId = clientId;
+        this.connectToTextChat();
         this.characterManager.spawnCharacter(this.characterDescription!, clientId, true);
       },
       (clientId: number, userNetworkingClientUpdate: null | UserNetworkingClientUpdate) => {
@@ -118,7 +127,7 @@ export class App {
       () => {
         return this.characterManager.getLocalCharacterPositionAndRotation();
       },
-      [`${protocol}//${host}/mml-documents/example-mml.html`],
+      [`${this.protocol}//${this.host}/mml-documents/example-mml.html`],
     );
 
     this.group.add(mmlComposition.group);
@@ -135,6 +144,50 @@ export class App {
     this.group.add(room);
   }
 
+  private sendMessageToServer(message: string): void {
+    if (this.clientId === null || this.networkChat === null) return;
+    const chatMessage: FromClientChatMessage = {
+      type: "chat",
+      id: this.clientId,
+      text: message,
+    };
+    this.networkChat.sendUpdate(chatMessage);
+  }
+
+  private connectToTextChat() {
+    if (this.clientId === null) return;
+
+    if (this.textChatUI === null) {
+      this.textChatUI = new TextChatUI(
+        this.clientId.toString(),
+        this.sendMessageToServer.bind(this),
+      );
+      this.textChatUI.init();
+    }
+
+    if (this.networkChat === null) {
+      this.networkChat = new ChatNetworkingClient(
+        `${this.protocol}//${this.host}/chat-network?id=${this.clientId}`,
+        (url: string) => new WebSocket(`${url}?id=${this.clientId}`),
+        (status: WebsocketStatus) => {
+          if (status === WebsocketStatus.Disconnected || status === WebsocketStatus.Reconnecting) {
+            // The connection was lost after being established - the connection may be re-established with a different client ID
+            this.characterManager.clear();
+            this.remoteUserStates.clear();
+          }
+        },
+        (clientId: number) => {
+          console.log(`Assigned Chat ID: ${clientId}`);
+        },
+        (clientId: number, chatNetworkingUpdate: null | FromClientChatMessage) => {
+          if (chatNetworkingUpdate !== null && this.textChatUI !== null) {
+            this.textChatUI.addTextMessage(clientId.toString(), chatNetworkingUpdate.text);
+          }
+        },
+      );
+    }
+  }
+
   public update(): void {
     this.timeManager.update();
     this.characterManager.update();

diff --git a/example/web-client/tsconfig.json b/example/web-client/tsconfig.json
@@ -19,5 +19,6 @@
     "noEmit": true,
     "baseUrl": "."
   },
-  "include": ["./src/**/*.ts", "./test/**/*.ts"]
+  "include": ["src/**/*", "test/**/*", "./build.ts"],
+  "exclude": ["**/build/*", "types-src"]
 }