mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Network handler code.

Browse Source
This commit is contained in:
Michael Mainguy 2023-09-05 09:10:37 -05:00
parent dd82962260
commit 2cb04a35dc
4 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -64,7 +64,8 @@
</head> </head>
<body> <body>
<!--<div class="loader" id="loader">Loading...</div> --> <!--<div class="loader" id="loader">Loading...</div> -->
<div id="questLaunch"><a href="https://www.oculus.com/open_url/?url=https://www.deepdiagram.com/">Launch On Quest</a> <div id="questLaunch"><a href="https://www.oculus.com/open_url/?url=https://www.deepdiagram.com/" target="_blank">Launch
On Quest</a>
</div> </div>
<div id="hostKey">keyLaunch On Quest</div> <div id="hostKey">keyLaunch On Quest</div>
<script type="module" src="./src/app.ts"></script> <script type="module" src="./src/app.ts"></script>

27
src/app.ts
View File

@ -10,20 +10,25 @@ import {
import '@babylonjs/loaders'; import '@babylonjs/loaders';
import {DiagramManager} from "./diagram/diagramManager"; import {DiagramManager} from "./diagram/diagramManager";
import {Toolbox} from "./toolbox/toolbox"; import {Toolbox} from "./toolbox/toolbox";
import log from "loglevel"; import log, {Logger} from "loglevel";
import {AppConfig} from "./util/appConfig"; import {AppConfig} from "./util/appConfig";
import {GamepadManager} from "./controllers/gamepadManager"; import {GamepadManager} from "./controllers/gamepadManager";
import {CustomEnvironment} from "./util/customEnvironment"; import {CustomEnvironment} from "./util/customEnvironment";
import {Controllers} from "./controllers/controllers"; import {Controllers} from "./controllers/controllers";
import workerUrl from "./worker?worker&url"; import workerUrl from "./worker?worker&url";
import {DiagramEventType} from "./diagram/diagramEntity"; import {DiagramEventType} from "./diagram/diagramEntity";
import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection";
export class App { export class App {
//preTasks = [havokModule]; //preTasks = [havokModule];
private logger: Logger = log.getLogger('App');
constructor() { constructor() {
const logger = log.getLogger('App');
log.setDefaultLevel('warn'); log.setDefaultLevel('warn');
//log.getLogger('PeerjsNetworkConnection').setLevel('debug'); //log.getLogger('PeerjsNetworkConnection').setLevel('debug');
log.getLogger('App').setLevel('debug');
log.getLogger('DiagramManager').setLevel('debug'); log.getLogger('DiagramManager').setLevel('debug');
log.getLogger('PeerjsNetworkConnection').setLevel('debug'); log.getLogger('PeerjsNetworkConnection').setLevel('debug');
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
@ -31,9 +36,9 @@ export class App {
canvas.style.height = "100vh"; canvas.style.height = "100vh";
canvas.id = "gameCanvas"; canvas.id = "gameCanvas";
document.body.appendChild(canvas); document.body.appendChild(canvas);
log.debug('App', 'gameCanvas created'); this.logger.debug('App', 'gameCanvas created');
this.initialize(canvas).then(() => { this.initialize(canvas).then(() => {
logger.debug('App', 'Scene Initialized'); this.logger.debug('App', 'Scene Initialized');
const loader = document.querySelector('#loader'); const loader = document.querySelector('#loader');
if (loader) { if (loader) {
loader.remove(); loader.remove();
@ -42,7 +47,7 @@ export class App {
} }
async initialize(canvas) { async initialize(canvas) {
const logger = log.getLogger('App');
const engine = new Engine(canvas, true); const engine = new Engine(canvas, true);
const scene = new Scene(engine); const scene = new Scene(engine);
const config = new AppConfig(); const config = new AppConfig();
@ -54,20 +59,28 @@ export class App {
const diagramManager = new DiagramManager(scene, controllers, toolbox, config); const diagramManager = new DiagramManager(scene, controllers, toolbox, config);
diagramManager.onDiagramEventObservable.add((evt) => { diagramManager.onDiagramEventObservable.add((evt) => {
this.logger.debug('App', 'diagram event', evt);
worker.postMessage({entity: evt}); worker.postMessage({entity: evt});
}, 2); }, 2);
config.onConfigChangedObservable.add((config) => { config.onConfigChangedObservable.add((config) => {
this.logger.debug('App', 'config changed', config);
worker.postMessage({config: config}); worker.postMessage({config: config});
}, 2); }, 2);
worker.onmessage = (evt) => { worker.onmessage = (evt) => {
this.logger.debug(evt);
if (evt.data.entity) { if (evt.data.entity) {
this.logger.debug('App', 'worker message', evt.data.entity);
diagramManager.onDiagramEventObservable.notifyObservers({ diagramManager.onDiagramEventObservable.notifyObservers({
type: DiagramEventType.ADD, type: DiagramEventType.ADD,
entity: evt.data.entity entity: evt.data.entity
}, 1); }, 1);
} }
if (evt.data.config) { if (evt.data.config) {
config.onConfigChangedObservable.notifyObservers(evt.data.config, 1); 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(() => { engine.runRenderLoop(() => {
scene.render(); scene.render();
}); });
logger.info('Render loop started'); this.logger.info('Render loop started');
} }
} }

38
src/integration/peerjsNetworkConnection.ts
View File

@ -1,7 +1,7 @@
import P2PDataChannel from 'p2p-data-channel'; import P2PDataChannel from 'p2p-data-channel';
import log from "loglevel"; import log from "loglevel";
import {Observable} from "@babylonjs/core"; import {Observable} from "@babylonjs/core";
import {DiagramEvent, DiagramEventMask, DiagramEventType} from "../diagram/diagramEntity"; import {DiagramEvent, DiagramEventMask} from "../diagram/diagramEntity";
export class PeerjsNetworkConnection { export class PeerjsNetworkConnection {
private logger: log.Logger = log.getLogger('PeerjsNetworkConnection'); private logger: log.Logger = log.getLogger('PeerjsNetworkConnection');
@ -9,21 +9,24 @@ export class PeerjsNetworkConnection {
private readonly onDiagramEventObservable: Observable<DiagramEvent>; private readonly onDiagramEventObservable: Observable<DiagramEvent>;
constructor(dataChannel: string, identity: string, onDiagramEventObservable: Observable<DiagramEvent>) { constructor(onDiagramEventObservable: Observable<DiagramEvent>) {
const config = { const config = {
debug: false, debug: false,
dataChannel: dataChannel, dataChannel: 'deepSharedDiagram',
connectionTimeout: 5000, connectionTimeout: 5000,
pingInterval: 4000, pingInterval: 4000,
pingTimeout: 8000, pingTimeout: 8000,
logLevel: 'debug', logLevel: 'debug',
} }
// @ts-ignore
const passphrase = window.niceware.generatePassphrase(6).join('-');
this.logger.debug('Local Passphrase: ', passphrase);
this.onDiagramEventObservable = onDiagramEventObservable; this.onDiagramEventObservable = onDiagramEventObservable;
this.dataChannel = new P2PDataChannel(identity, config); this.dataChannel = new P2PDataChannel(passphrase, config);
this.dataChannel.broadcast({'connect': identity});
this.dataChannel.onConnected((peerId) => { this.dataChannel.onConnected((peerId) => {
this.logger.debug(peerId, ' connected'); this.logger.debug('Connected to ', peerId);
this.onDiagramEventObservable.notifyObservers({type: DiagramEventType.SYNC}, DiagramEventMask.REMOTE);
}); });
this.dataChannel.onMessage((message) => { this.dataChannel.onMessage((message) => {
this.logger.debug(message); this.logger.debug(message);
@ -32,31 +35,32 @@ export class PeerjsNetworkConnection {
if (message.payload.request == 'join') { if (message.payload.request == 'join') {
this.dataChannel.send(message.sender, {type: 'join-ack'}); this.dataChannel.send(message.sender, {type: 'join-ack'});
this.logger.debug('Join ack sent to ', message.sender); this.logger.debug('Join ack sent to ', message.sender);
this.onDiagramEventObservable.add((evt) => {
this.dataChannel.broadcast({diagramEvent: evt});
});
} }
if (message.payload.diagramEvent) { if (message.payload.diagramEvent) {
this.logger.debug('Received diagram event from ', message.sender, message.payload.diagramEvent); this.logger.debug('Received diagram event from ', message.sender, message.payload.diagramEvent);
const event = message.payload.diagramEvent; const event = message.payload.diagramEvent;
if (event.type == DiagramEventType.DROP) {
event.type = DiagramEventType.MODIFY;
}
this.onDiagramEventObservable.notifyObservers(event, DiagramEventMask.REMOTE); 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.dataChannel.connect(host).then((peerId) => {
this.logger.debug('Broadcasting Join', peerId); this.logger.debug('Broadcasting Join', peerId);
this.dataChannel.broadcast({request: 'join'}); this.dataChannel.broadcast({request: 'join'});
}).catch((err) => { }).catch((err) => {
this.logger.error(err); this.logger.error(err);
}); });
} }
} }

6
src/worker.ts
View File

@ -7,11 +7,15 @@ const ctx: Worker = self as any;
ctx.onmessage = (event) => { ctx.onmessage = (event) => {
console.log(event);
if (event.data.type == 'init') { if (event.data.type == 'init') {
persistenceManager.updateObserver.add((event) => { persistenceManager.updateObserver.add((event) => {
console.log(event);
ctx.postMessage({entity: event}); ctx.postMessage({entity: event});
}); });
persistenceManager.configObserver.add((event) => { persistenceManager.configObserver.add((event) => {
console.log(event);
ctx.postMessage({config: event}); ctx.postMessage({config: event});
}); });
persistenceManager.initialize().then(() => { persistenceManager.initialize().then(() => {
@ -19,8 +23,8 @@ ctx.onmessage = (event) => {
}); });
} else { } else {
if (event.data.entity) { if (event.data.entity) {
console.log(event.data);
const data = (event.data.entity as DiagramEvent); const data = (event.data.entity as DiagramEvent);
switch (data.type) { switch (data.type) {
case DiagramEventType.ADD: case DiagramEventType.ADD:
persistenceManager.add(data.entity); persistenceManager.add(data.entity);