Initial network P2P share code.

package-lock.json

@@ -7,7 +7,6 @@
     "": {
       "name": "immersive",
       "version": "0.0.1",
-      "hasInstallScript": true,
       "dependencies": {
         "@babylonjs/core": "^6.14.0",
         "@babylonjs/gui": "^6.14.0",

src/app.ts

@@ -23,6 +23,7 @@ import {DualshockEventMapper} from "./util/dualshockEventMapper";
 import log from "loglevel";
 import {AppConfig} from "./util/appConfig";
 import {DiaSounds} from "./util/diaSounds";
+import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection";
 
 export class App {
     //preTasks = [havokModule];
@@ -37,6 +38,7 @@ export class App {
         const config = AppConfig.config;
         log.setLevel('info');
         log.getLogger('App').setLevel('debug');
+        log.getLogger('PeerjsNetworkConnection').setLevel('debug');
         const canvas = document.createElement("canvas");
         canvas.style.width = "100%";
         canvas.style.height = "100%";
@@ -112,6 +114,7 @@ export class App {
         const diagramManager = new DiagramManager(this.scene, xr.baseExperience);
         this.rig = new Rigplatform(this.scene, xr, diagramManager);
         const toolbox = new Toolbox(scene, xr.baseExperience, diagramManager);
+        //const network = new PeerjsNetworkConnection();
 
         import ('./diagram/indexdbPersistenceManager').then((module) => {
             const persistenceManager = new module.IndexdbPersistenceManager("diagram");

src/integration/peerjsNetworkConnection.ts

@@ -1,3 +1,46 @@
-export class PeerjsNetworkConnection {
+import P2PDataChannel from 'p2p-data-channel';
+import log from "loglevel";
 
+export class PeerjsNetworkConnection {
+    private logger: log.Logger = log.getLogger('PeerjsNetworkConnection');
+    private dataChannel: P2PDataChannel<any>;
+
+    constructor() {
+        const config = {
+            debug: false,
+            dataChannel: 'default',
+            connectionTimeout: 5000,
+            pingInterval: 4000,
+            pingTimeout: 8000
+        }
+
+
+        const data = window.location.search.replace('?', '')
+            .split('&')
+            .map((x) => x.split('='));
+        this.dataChannel = new P2PDataChannel(data[0][1], config);
+
+        this.dataChannel.onConnected((peerId) => {
+            this.logger.debug(peerId, ' connected');
+        });
+        this.dataChannel.onMessage((message) => {
+            this.logger.debug(message.payload, ' received from ', message.sender);
+        });
+        this.connect();
+
+    }
+
+    private async connect() {
+        try {
+            const data = window.location.search.replace('?', '')
+                .split('&')
+                .map((x) => x.split('='));
+            const connection = await this.dataChannel.connect(data[1][1]).then(() => {
+                console.log('Connected');
+            });
+            this.dataChannel.broadcast({payload: 'Hello World'});
+        } catch (err) {
+            this.logger.error(err);
+        }
+    }
 }

vite.config.ts

@@ -9,7 +9,6 @@ export default defineConfig({
             '/callback': 'https://local.immersiveidea.com'
         }
     },
-
     base: "/"
 
 })