Work on websocket connection

browser/index.ts

@@ -40,6 +40,11 @@ class Client {
     this.progress.value = percent;
     this.progress.innerText = `${Math.floor(percent)}%`;
   }
+
+  public cameraOpen () {
+    console.log('camera open');
+    this.client.send(JSON.stringify({ cmd : 'open' }));
+  }
 }
 
-new Client();
+const client : Client = new Client();

dist/index.js

@@ -162,6 +162,33 @@ function onWssConnection(ws, req) {
     log.info(`Client ${ip} connected to WebSocket server`);
     ws.ip = ip;
     ws.session = (0, uuid_1.v4)();
+    ws.on('message', function (data) { onClientMessage(data, ws); });
+}
+async function onClientMessage(data, ws) {
+    let msg = null;
+    let res = {};
+    try {
+        msg = JSON.parse(data);
+    }
+    catch (err) {
+        log.error('Error parsing message', err);
+    }
+    if (msg !== null && typeof msg.cmd !== 'undefined') {
+        res = await cmd(msg.cmd);
+    }
+    ws.send(JSON.stringify(res));
+}
+async function cmd(id) {
+    switch (id) {
+        case 'open':
+            await cameraOpen();
+            return { cmd: 'open' };
+        default:
+            log.warn(`No matching command: ${id}`);
+    }
+}
+async function cameraOpen() {
+    await camera.open();
 }
 app.get('/', async (req, res, next) => {
     const sequencesArr = await files_1.Files.enumerateSequences(sequences);

src/index.ts

@@ -51,6 +51,10 @@ interface WebSocketExtended extends WebSocket {
 	session? : string
 }
 
+interface Message {
+	cmd? : string;
+}
+
 async function createTemplate (filePath : string) : Promise<HandlebarsTemplateDelegate<any>> {
 	let tmpl : string;
 	try {
@@ -149,6 +153,36 @@ function onWssConnection (ws : WebSocketExtended, req : Request) {
 	log.info(`Client ${ip} connected to WebSocket server`);
 	ws.ip = ip;
 	ws.session = uuid();
+	ws.on('message', function (data) { onClientMessage(data, ws) });
+
+}
+
+async function onClientMessage (data : any, ws : WebSocket) {
+	let msg : Message = null;
+	let res : Message = {};
+	try {
+		msg = JSON.parse(data);
+	} catch (err) {
+		log.error('Error parsing message', err);
+	}
+	if (msg !== null && typeof msg.cmd !== 'undefined') {
+		res = await cmd(msg.cmd);
+	}
+	ws.send(JSON.stringify(res));
+}
+
+async function cmd (id : string) : Promise<Message> {
+	switch(id) {
+		case 'open' :
+			await cameraOpen();
+			return { cmd : 'open' }
+		default :
+			log.warn(`No matching command: ${id}`);
+	}
+}
+
+async function cameraOpen () {
+	await camera.open();
 }
 
 app.get('/', async (req : Request, res : Response, next : NextFunction) => {

static/js/index.d.ts

@@ -16,4 +16,6 @@ declare class Client {
     private onMessage;
     private onOpen;
     private setSequence;
+    cameraOpen(): void;
 }
+declare const client: Client;

static/js/index.js

@@ -22,6 +22,10 @@ class Client {
         this.progress.value = percent;
         this.progress.innerText = `${Math.floor(percent)}%`;
     }
+    cameraOpen() {
+        console.log('camera open');
+        this.client.send(JSON.stringify({ cmd: 'open' }));
     }
-new Client();
+}
+const client = new Client();
 //# sourceMappingURL=index.js.map

static/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../browser/index.ts"],"names":[],"mappings":"AAYA,MAAM,MAAM;IAKV;QAHQ,cAAS,GAAa,KAAK,CAAC;QAIlC,IAAI,GAAG,GAAY,qBAAqB,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAwB,CAAC;QAC3E,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IAEO,SAAS,CAAE,KAAW;QAC5B,MAAM,KAAK,GAAW,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAU,CAAC;QACtD,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,WAAW,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YACrE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,MAAM,CAAE,KAAW;QACzB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEO,WAAW,CAAC,QAAwB;QAC1C,MAAM,OAAO,GAAY,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;QACnD,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACtD,CAAC;CACF;AAED,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../browser/index.ts"],"names":[],"mappings":"AAYA,MAAM,MAAM;IAKV;QAHQ,cAAS,GAAa,KAAK,CAAC;QAIlC,IAAI,GAAG,GAAY,qBAAqB,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAwB,CAAC;QAC3E,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IAEO,SAAS,CAAE,KAAW;QAC5B,MAAM,KAAK,GAAW,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAU,CAAC;QACtD,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,WAAW,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YACrE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,MAAM,CAAE,KAAW;QACzB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEO,WAAW,CAAC,QAAwB;QAC1C,MAAM,OAAO,GAAY,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;QACnD,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACtD,CAAC;IAEM,UAAU;QACf,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,EAAG,MAAM,EAAE,CAAC,CAAC,CAAC;IACrD,CAAC;CACF;AAED,MAAM,MAAM,GAAY,IAAI,MAAM,EAAE,CAAC"}

views/index.hbs

@@ -17,6 +17,7 @@
 		<option value="{{this.hash}}">{{this.name}}</option>
 		{{/each}}
 	</select>
+	<button id="open" onclick="client.cameraOpen()">Open Gate</button>
 	<script src="/static/js/index.js"></script>
 </body>
 </html>