Network handler code.
This commit is contained in:
parent
dd82962260
commit
2cb04a35dc
@ -64,7 +64,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<!--<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 id="hostKey">keyLaunch On Quest</div>
|
||||
<script type="module" src="./src/app.ts"></script>
|
||||
|
||||
27
src/app.ts
27
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');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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<DiagramEvent>;
|
||||
|
||||
constructor(dataChannel: string, identity: string, onDiagramEventObservable: Observable<DiagramEvent>) {
|
||||
constructor(onDiagramEventObservable: Observable<DiagramEvent>) {
|
||||
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);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user