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 06:48:55 -05:00
parent 6ae9cfe12a
commit dd82962260
9 changed files with 70058 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@ -4,12 +4,17 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Deep Diagram</title> <title>Deep Diagram</title>
<style> <style>
body {
margin: 0;
overflow: clip;
}
.loader { .loader {
position: fixed; position: fixed;
left: 0px; left: 0px;
top: 0px; top: 0px;
width: 100%; width: 200px;
height: 100%; height: 200px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
@ -24,8 +29,8 @@
#questLaunch { #questLaunch {
position: fixed; position: fixed;
top: 0px; top: 30px;
right: 0px; right: 30px;
padding: 10px; padding: 10px;
background: #000; background: #000;
color: #fff; color: #fff;
@ -33,22 +38,35 @@
z-index: 100; z-index: 100;
} }
#hostKey {
position: fixed;
z-index: 11;
width: 200px;
height: 20px;
position: absolute;
bottom: 50px;
left: 16px;
padding: 10px;
background: #000;
color: #fff;
}
</style> </style>
<link as="script" href="/newRelic.js" rel="preload"> <link as="script" href="/newRelic.js" rel="preload">
<script src="/newRelic.js"></script> <script src="/newRelic.js"></script>
<meta content="width=device-width, initial-scale=1" name="viewport"> <meta content="width=device-width, initial-scale=1, height=device-height" name="viewport">
<meta content="An immersive vr diagramming experience based on a-frame and webxr" name="description"> <meta content="An immersive vr diagramming experience based on a-frame and webxr" name="description">
<link href="/assets/favicon-16x16.png" rel=icon sizes="16x16" type="image/png"> <link href="/assets/favicon-16x16.png" rel=icon sizes="16x16" type="image/png">
<link href="/assets/favicon-32x32.png" rel=icon sizes="32x32" type="image/png"> <link href="/assets/favicon-32x32.png" rel=icon sizes="32x32" type="image/png">
<link href="/assets/favicon-96x96.png" rel=icon sizes="96x96" type="image/png"> <link href="/assets/favicon-96x96.png" rel=icon sizes="96x96" type="image/png">
<link href="/manifest.webmanifest" rel="manifest"/> <link href="/manifest.webmanifest" rel="manifest"/>
<script src='/niceware.js'></script>
</head> </head>
<body> <body>
<div class="loader" id="loader">Loading...</div> <!--<div class="loader" id="loader">Loading...</div> -->
<div id="graphContainer"></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/">Launch On Quest</a>
</div> </div>
<div id="hostKey">keyLaunch On Quest</div>
<script type="module" src="./src/app.ts"></script> <script type="module" src="./src/app.ts"></script>
</body> </body>
</html> </html>

1889
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

68085
public/niceware.js Normal file
View File

File diff suppressed because it is too large Load Diff

7
src/app.ts
View File

@ -23,9 +23,12 @@ export class App {
constructor() { constructor() {
const logger = log.getLogger('App'); const logger = log.getLogger('App');
log.setDefaultLevel('warn'); log.setDefaultLevel('warn');
//log.getLogger('PeerjsNetworkConnection').setLevel('debug');
log.getLogger('DiagramManager').setLevel('debug');
log.getLogger('PeerjsNetworkConnection').setLevel('debug');
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.style.width = "100%"; canvas.style.width = "100vw";
canvas.style.height = "100%"; canvas.style.height = "100vh";
canvas.id = "gameCanvas"; canvas.id = "gameCanvas";
document.body.appendChild(canvas); document.body.appendChild(canvas);
log.debug('App', 'gameCanvas created'); log.debug('App', 'gameCanvas created');

2
src/integration/iPersistenceManager.ts
View File

@ -25,6 +25,8 @@ export type DiagramListing = {
export interface IPersistenceManager { export interface IPersistenceManager {
diagramListingObserver: Observable<DiagramListingEvent>; diagramListingObserver: Observable<DiagramListingEvent>;
sync();
addDiagram(diagram: DiagramListing); addDiagram(diagram: DiagramListing);
getNewRelicData(): Promise<any[]>; getNewRelicData(): Promise<any[]>;

13
src/integration/indexdbPersistenceManager.ts
View File

@ -5,17 +5,21 @@ import Dexie from "dexie";
import log from "loglevel"; import log from "loglevel";
import {AppConfigType} from "../util/appConfigType"; import {AppConfigType} from "../util/appConfigType";
export class IndexdbPersistenceManager implements IPersistenceManager { export class IndexdbPersistenceManager implements IPersistenceManager {
private readonly logger = log.getLogger('IndexdbPersistenceManager'); private readonly logger = log.getLogger('IndexdbPersistenceManager');
public readonly diagramListingObserver: Observable<DiagramListingEvent> = new Observable<DiagramListingEvent>(); public readonly diagramListingObserver: Observable<DiagramListingEvent> = new Observable<DiagramListingEvent>();
public readonly updateObserver: Observable<DiagramEntity> = new Observable<DiagramEntity>(); public readonly updateObserver: Observable<DiagramEntity> = new Observable<DiagramEntity>();
public readonly configObserver: Observable<AppConfigType> = new Observable<AppConfigType>(); public readonly configObserver: Observable<AppConfigType> = new Observable<AppConfigType>();
private db: Dexie; private db: Dexie;
private currentDiagramId: string; private currentDiagramId: string;
constructor(name: string) { constructor(name: string) {
this.db = new Dexie(name); this.db = new Dexie(name);
const version = 6; const version = 7;
this.db.version(version).stores({config: "id,gridSnap,rotateSnap,createSnap"}); this.db.version(version).stores({config: "id,gridSnap,rotateSnap,createSnap"});
this.db.version(version).stores({entities: "id,diagramlistingid,position,rotation,last_seen,template,text,scale,color"}); this.db.version(version).stores({entities: "id,diagramlistingid,position,rotation,last_seen,template,text,scale,color"});
this.db.version(version).stores({diagramlisting: "id,name,description,sharekey"}); this.db.version(version).stores({diagramlisting: "id,name,description,sharekey"});
@ -137,6 +141,13 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
this.logger.info("initialize finished"); this.logger.info("initialize finished");
} }
public sync() {
this.getFilteredEntities().each((e) => {
this.logger.debug('adding', e);
this.updateObserver.notifyObservers(e);
});
}
public modify(entity: DiagramEntity) { public modify(entity: DiagramEntity) {
if (!entity) { if (!entity) {
this.logger.error("Modifying null mesh, early return"); this.logger.error("Modifying null mesh, early return");

39
src/integration/peerjsNetworkConnection.ts
View File

@ -1,37 +1,62 @@
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 {DiagramEvent, DiagramEventMask, DiagramEventType} from "../diagram/diagramEntity";
export class PeerjsNetworkConnection { export class PeerjsNetworkConnection {
private logger: log.Logger = log.getLogger('PeerjsNetworkConnection'); private logger: log.Logger = log.getLogger('PeerjsNetworkConnection');
private dataChannel: P2PDataChannel<any>; private dataChannel: P2PDataChannel<any>;
constructor(dataChannel: string, identity: string) { private readonly onDiagramEventObservable: Observable<DiagramEvent>;
constructor(dataChannel: string, identity: string, onDiagramEventObservable: Observable<DiagramEvent>) {
const config = { const config = {
debug: false, debug: false,
dataChannel: dataChannel, dataChannel: dataChannel,
connectionTimeout: 5000, connectionTimeout: 5000,
pingInterval: 4000, pingInterval: 4000,
pingTimeout: 8000 pingTimeout: 8000,
logLevel: 'debug',
} }
this.onDiagramEventObservable = onDiagramEventObservable;
this.dataChannel = new P2PDataChannel(identity, config); this.dataChannel = new P2PDataChannel(identity, config);
this.dataChannel.broadcast({'connect': identity});
this.dataChannel.onConnected((peerId) => { this.dataChannel.onConnected((peerId) => {
this.logger.debug(peerId, ' connected'); this.logger.debug(peerId, ' connected');
this.onDiagramEventObservable.notifyObservers({type: DiagramEventType.SYNC}, DiagramEventMask.REMOTE);
}); });
this.dataChannel.onMessage((message) => { this.dataChannel.onMessage((message) => {
this.logger.debug(message);
if (message.sender !== this.dataChannel.localPeerId) { if (message.sender !== this.dataChannel.localPeerId) {
this.logger.debug(message.payload, ' received from ', message.sender); this.logger.debug(message.payload, ' received from ', message.sender);
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);
}
} }
}); });
} }
public connect(host: string) { public connect(host: string) {
try {
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({payload: 'Joined'}); this.dataChannel.broadcast({request: 'join'});
}); }).catch((err) => {
} catch (err) {
this.logger.error(err); this.logger.error(err);
} });
} }
} }

6
src/util/appConfig.ts
View File

@ -55,4 +55,10 @@ export class AppConfig {
this._currentConfig = config; this._currentConfig = config;
this.onConfigChangedObservable.notifyObservers(this._currentConfig, 1); this.onConfigChangedObservable.notifyObservers(this._currentConfig, 1);
} }
public setPassphrase(passphrase: string) {
this._currentConfig.passphrase = passphrase;
this.onConfigChangedObservable.notifyObservers(this._currentConfig, 2);
}
} }

1
src/util/appConfigType.ts
View File

@ -9,5 +9,6 @@ export type AppConfigType = {
newRelicKey?: string, newRelicKey?: string,
newRelicAccount?: string, newRelicAccount?: string,
demoCompleted?: boolean, demoCompleted?: boolean,
passphrase?: string,
} }