From 2cb04a35dc3956041f8aa4d71b1aa82ab3dc82af Mon Sep 17 00:00:00 2001 From: Michael Mainguy Date: Tue, 5 Sep 2023 09:10:37 -0500 Subject: [PATCH] Network handler code. --- index.html | 3 +- src/app.ts | 27 +++++++++++---- src/integration/peerjsNetworkConnection.ts | 38 ++++++++++++---------- src/worker.ts | 6 +++- 4 files changed, 48 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index a14b5f1..04561b4 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,8 @@ -
Launch On Quest +
keyLaunch On Quest
diff --git a/src/app.ts b/src/app.ts index 1b1b69f..e36c2fd 100644 --- a/src/app.ts +++ b/src/app.ts @@ -10,20 +10,25 @@ import { import '@babylonjs/loaders'; import {DiagramManager} from "./diagram/diagramManager"; import {Toolbox} from "./toolbox/toolbox"; -import log from "loglevel"; +import log, {Logger} from "loglevel"; import {AppConfig} from "./util/appConfig"; import {GamepadManager} from "./controllers/gamepadManager"; import {CustomEnvironment} from "./util/customEnvironment"; import {Controllers} from "./controllers/controllers"; import workerUrl from "./worker?worker&url"; import {DiagramEventType} from "./diagram/diagramEntity"; +import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection"; + export class App { //preTasks = [havokModule]; + private logger: Logger = log.getLogger('App'); + constructor() { - const logger = log.getLogger('App'); + log.setDefaultLevel('warn'); //log.getLogger('PeerjsNetworkConnection').setLevel('debug'); + log.getLogger('App').setLevel('debug'); log.getLogger('DiagramManager').setLevel('debug'); log.getLogger('PeerjsNetworkConnection').setLevel('debug'); const canvas = document.createElement("canvas"); @@ -31,9 +36,9 @@ export class App { canvas.style.height = "100vh"; canvas.id = "gameCanvas"; document.body.appendChild(canvas); - log.debug('App', 'gameCanvas created'); + this.logger.debug('App', 'gameCanvas created'); this.initialize(canvas).then(() => { - logger.debug('App', 'Scene Initialized'); + this.logger.debug('App', 'Scene Initialized'); const loader = document.querySelector('#loader'); if (loader) { loader.remove(); @@ -42,7 +47,7 @@ export class App { } async initialize(canvas) { - const logger = log.getLogger('App'); + const engine = new Engine(canvas, true); const scene = new Scene(engine); const config = new AppConfig(); @@ -54,20 +59,28 @@ export class App { const diagramManager = new DiagramManager(scene, controllers, toolbox, config); + diagramManager.onDiagramEventObservable.add((evt) => { + this.logger.debug('App', 'diagram event', evt); worker.postMessage({entity: evt}); }, 2); config.onConfigChangedObservable.add((config) => { + this.logger.debug('App', 'config changed', config); worker.postMessage({config: config}); }, 2); worker.onmessage = (evt) => { + this.logger.debug(evt); + if (evt.data.entity) { + this.logger.debug('App', 'worker message', evt.data.entity); diagramManager.onDiagramEventObservable.notifyObservers({ type: DiagramEventType.ADD, entity: evt.data.entity }, 1); } + if (evt.data.config) { + config.onConfigChangedObservable.notifyObservers(evt.data.config, 1); } } @@ -180,13 +193,13 @@ export class App { }); - logger.info('keydown event listener added, use Ctrl+Shift+Alt+I to toggle debug layer'); + this.logger.info('keydown event listener added, use Ctrl+Shift+Alt+I to toggle debug layer'); engine.runRenderLoop(() => { scene.render(); }); - logger.info('Render loop started'); + this.logger.info('Render loop started'); } } diff --git a/src/integration/peerjsNetworkConnection.ts b/src/integration/peerjsNetworkConnection.ts index 93a42ea..26a0623 100644 --- a/src/integration/peerjsNetworkConnection.ts +++ b/src/integration/peerjsNetworkConnection.ts @@ -1,7 +1,7 @@ import P2PDataChannel from 'p2p-data-channel'; import log from "loglevel"; import {Observable} from "@babylonjs/core"; -import {DiagramEvent, DiagramEventMask, DiagramEventType} from "../diagram/diagramEntity"; +import {DiagramEvent, DiagramEventMask} from "../diagram/diagramEntity"; export class PeerjsNetworkConnection { private logger: log.Logger = log.getLogger('PeerjsNetworkConnection'); @@ -9,21 +9,24 @@ export class PeerjsNetworkConnection { private readonly onDiagramEventObservable: Observable; - constructor(dataChannel: string, identity: string, onDiagramEventObservable: Observable) { + constructor(onDiagramEventObservable: Observable) { const config = { debug: false, - dataChannel: dataChannel, + dataChannel: 'deepSharedDiagram', connectionTimeout: 5000, pingInterval: 4000, pingTimeout: 8000, logLevel: 'debug', } + + // @ts-ignore + const passphrase = window.niceware.generatePassphrase(6).join('-'); + this.logger.debug('Local Passphrase: ', passphrase); this.onDiagramEventObservable = onDiagramEventObservable; - this.dataChannel = new P2PDataChannel(identity, config); - this.dataChannel.broadcast({'connect': identity}); + this.dataChannel = new P2PDataChannel(passphrase, config); + this.dataChannel.onConnected((peerId) => { - this.logger.debug(peerId, ' connected'); - this.onDiagramEventObservable.notifyObservers({type: DiagramEventType.SYNC}, DiagramEventMask.REMOTE); + this.logger.debug('Connected to ', peerId); }); this.dataChannel.onMessage((message) => { this.logger.debug(message); @@ -32,31 +35,32 @@ export class PeerjsNetworkConnection { if (message.payload.request == 'join') { this.dataChannel.send(message.sender, {type: 'join-ack'}); this.logger.debug('Join ack sent to ', message.sender); - this.onDiagramEventObservable.add((evt) => { - this.dataChannel.broadcast({diagramEvent: evt}); - }); - } if (message.payload.diagramEvent) { this.logger.debug('Received diagram event from ', message.sender, message.payload.diagramEvent); const event = message.payload.diagramEvent; - if (event.type == DiagramEventType.DROP) { - event.type = DiagramEventType.MODIFY; - } this.onDiagramEventObservable.notifyObservers(event, DiagramEventMask.REMOTE); } - } }); + const remote = window.location.pathname.replace('/', ''); + if (remote && remote.length > 0) { + this.connectToRemote(remote); + + } else { + const link = 'https://www.oculus.com/open_url/?url=https://cameras.immersiveidea.com/'; + const linkEl = document.querySelector('#questLaunch a'); + linkEl.setAttribute('href', link + passphrase); + } } - public connect(host: string) { + public connectToRemote(host: string) { this.dataChannel.connect(host).then((peerId) => { this.logger.debug('Broadcasting Join', peerId); this.dataChannel.broadcast({request: 'join'}); + }).catch((err) => { this.logger.error(err); }); - } } \ No newline at end of file diff --git a/src/worker.ts b/src/worker.ts index d39c0ab..aff17fd 100644 --- a/src/worker.ts +++ b/src/worker.ts @@ -7,11 +7,15 @@ const ctx: Worker = self as any; ctx.onmessage = (event) => { + console.log(event); + if (event.data.type == 'init') { persistenceManager.updateObserver.add((event) => { + console.log(event); ctx.postMessage({entity: event}); }); persistenceManager.configObserver.add((event) => { + console.log(event); ctx.postMessage({config: event}); }); persistenceManager.initialize().then(() => { @@ -19,8 +23,8 @@ ctx.onmessage = (event) => { }); } else { if (event.data.entity) { + console.log(event.data); const data = (event.data.entity as DiagramEvent); - switch (data.type) { case DiagramEventType.ADD: persistenceManager.add(data.entity);