From c3be1ae726c462bc8c5f2dc22de543b274ee39f7 Mon Sep 17 00:00:00 2001 From: Haris Razis Date: Thu, 19 Nov 2020 11:36:19 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20=20API=20routes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/class/ClientSocket.ts | 12 ++++- server/src/class/Socket.ts | 15 +++++-- server/src/routes/Routes.ts | 38 +++++++++++++++- web/.env.template | 1 + web/src/components/Hero.vue | 5 ++- web/src/components/Panel.vue | 75 ++++++++++++++++++++++++-------- 6 files changed, 120 insertions(+), 26 deletions(-) diff --git a/client/src/class/ClientSocket.ts b/client/src/class/ClientSocket.ts index 44d125b..b75c751 100644 --- a/client/src/class/ClientSocket.ts +++ b/client/src/class/ClientSocket.ts @@ -1,4 +1,5 @@ import chalk from 'chalk'; +import { exit } from 'process'; import io from 'socket.io-client'; export class ClientSocket { @@ -27,12 +28,19 @@ export class ClientSocket { this.socket.on('disconnect', (reason: string) => { console.log(chalk.red('Lost connection!')); - if (reason === 'io server disconnect') { - this.socket.connect(); + if (reason === 'io server disconnect') this.socket.connect(); + + if (reason === 'io client disconnect') { + console.log(chalk.red('Server kicked you out!')); + exit(1); } console.log(chalk.yellow('Reconecting...')); }); + + this.socket.on('closeConn', () => { + this.closeConn(); + }); } closeConn(): void { diff --git a/server/src/class/Socket.ts b/server/src/class/Socket.ts index 0d442fc..9929d71 100644 --- a/server/src/class/Socket.ts +++ b/server/src/class/Socket.ts @@ -15,6 +15,10 @@ interface packet { pointName: string; } +interface device { + device: string; +} + export class Socket { private io!: server; @@ -27,12 +31,12 @@ export class Socket { this.initConn(); } - private initSocket(): void { + initSocket(): void { this.io = require('socket.io')(this.server); console.log(chalk.yellow('Initialized Socket...')); } - private initConn(): void { + initConn(): void { this.io.on('connect', (socket: SocketIO.Socket) => { console.log(chalk.green('Client connected!')); @@ -57,7 +61,6 @@ export class Socket { get rooms(): Array { let roomsArray: Array = []; this.io.allSockets().then((msg: any) => { - console.log(msg); const iterator = msg.entries(); for (const entry of iterator) { roomsArray.push(entry[0]); @@ -66,9 +69,13 @@ export class Socket { return roomsArray; } + removeDevice(deviceToRemove: device): boolean { + this.io.to(deviceToRemove.device).emit('closeConn'); + return true; + } + closeSocket(): void { console.log(chalk.red('Closing socket...')); - this.database.closeWrite(); this.io.close(); } } diff --git a/server/src/routes/Routes.ts b/server/src/routes/Routes.ts index f724c5e..5c050e0 100644 --- a/server/src/routes/Routes.ts +++ b/server/src/routes/Routes.ts @@ -13,11 +13,47 @@ export class Routes { this.app.get('/devices', async (req, res) => { const data = await this.service.socket.rooms; res.header('Content-Type', 'application/json'); - res.send(JSON.stringify(data)); + if (data) { + res.send(JSON.stringify(data)); + } else { + res.send(JSON.stringify({})); + } + }); + + this.app.post('/devices', (req, res) => { + req.on('data', async (data) => { + const deviceToRemove = JSON.parse(data); + const status = await this.service.socket.removeDevice(deviceToRemove); + + res.header('Content-Type', 'application/json'); + if (status) { + res.send('done'); + } else { + res.send('error'); + } + }); + }); + } + + private socket(): void { + this.app.post('/socket', (req, res) => { + req.on('data', async (data) => { + const reset = JSON.parse(data).action; + await this.service.socket.closeSocket(); + + if (reset === 'reset') { + await this.service.socket.initSocket(); + await this.service.socket.initConn(); + } + + res.header('Content-Type', 'application/json'); + res.send('done'); + }); }); } public routes(): void { this.devices(); + this.socket(); } } diff --git a/web/.env.template b/web/.env.template index 4e83f76..7a7a628 100644 --- a/web/.env.template +++ b/web/.env.template @@ -1,3 +1,4 @@ +VUE_APP_SERVER_URL=XXXX VUE_APP_DB_URL=XXXX VUE_APP_DB_TOKEN=XXXX VUE_APP_DB_ORG=XXXX diff --git a/web/src/components/Hero.vue b/web/src/components/Hero.vue index 8270a9d..ca983a7 100644 --- a/web/src/components/Hero.vue +++ b/web/src/components/Hero.vue @@ -3,7 +3,10 @@

- Anchiale + + + + Anchiale

Scalable IoT solution for temperature sampling with raspberry-pi diff --git a/web/src/components/Panel.vue b/web/src/components/Panel.vue index df22d2e..019ba6f 100644 --- a/web/src/components/Panel.vue +++ b/web/src/components/Panel.vue @@ -7,34 +7,41 @@

- +

+

+

-
- No clients yet! +
+ +
-
+
{{ error }}
-
- +
+ No clients yet, try fetching!
@@ -50,7 +57,7 @@ export default class Panel extends Vue { getClient() { axios - .get('http://localhost:3000/devices') + .get(`${process.env.VUE_APP_SERVER_URL}/devices`) .then((response) => { this.hasClients = true; this.clients = response.data; @@ -59,5 +66,37 @@ export default class Panel extends Vue { this.error = error.message; }); } + + clearClient() { + this.hasClients = false; + } + + deleteClient(key: number) { + axios + .post(`${process.env.VUE_APP_SERVER_URL}/devices`, { + device: this.clients[key], + }) + .then((res) => { + if (res.data === 'done') { + this.getClient(); + } + }) + .catch((error) => { + console.log(error); + }); + } + + resetSocket() { + axios + .post(`${process.env.VUE_APP_SERVER_URL}/socket`, { + action: 'close', + }) + .then((res) => { + this.hasClients = false; + }) + .catch((error) => { + console.log(error); + }); + } }