Remember multiple device sessions

2026-04-17 19:36:59 +00:00 · 2020-12-13 13:52:29 +08:00
parent f67f3b8d61
commit 55d469811b
4 changed files with 186 additions and 59 deletions
--- a/app-multiple-device.js
+++ b/app-multiple-device.js
@@ -18,13 +18,28 @@ app.use(express.urlencoded({
 }));

 app.get('/', (req, res) => {
-  res.sendFile('index.html', {
+  res.sendFile('index-multiple-device.html', {
    root: __dirname
  });
 });

 const sessions = [];
-const createSession = function(id, description, io) {
+const SESSIONS_FILE = './whatsapp-sessions.json';
+
+const setSessionsFile = function(sessions) {
+  fs.writeFile(SESSIONS_FILE, JSON.stringify(sessions), function(err) {
+    if (err) {
+      console.log(err);
+    }
+  });
+}
+
+const getSessionsFile = function() {
+  return JSON.parse(fs.readFileSync(SESSIONS_FILE));
+}
+
+const createSession = function(id, description) {
+  console.log('Creating session: ' + id);
  const SESSION_FILE_PATH = `./whatsapp-session-${id}.json`;
  let sessionCfg;
  if (fs.existsSync(SESSION_FILE_PATH)) {
@@ -62,6 +77,11 @@ const createSession = function(id, description, io) {
  client.on('ready', () => {
    io.emit('ready', { id: id });
    io.emit('message', { id: id, text: 'Whatsapp is ready!' });
+
+    const savedSessions = getSessionsFile();
+    const sessionIndex = savedSessions.findIndex(sess => sess.id == id);
+    savedSessions[sessionIndex].ready = true;
+    setSessionsFile(savedSessions);
  });

  client.on('authenticated', (session) => {
@@ -87,6 +107,14 @@ const createSession = function(id, description, io) {
    });
    client.destroy();
    client.initialize();
+
+    // Menghapus pada file sessions
+    const savedSessions = getSessionsFile();
+    const sessionIndex = savedSessions.findIndex(sess => sess.id == id);
+    savedSessions.splice(sessionIndex, 1);
+    setSessionsFile(savedSessions);
+
+    io.emit('remove-session', id);
  });

  // Tambahkan client ke sessions
@@ -95,13 +123,44 @@ const createSession = function(id, description, io) {
    description: description,
    client: client
  });
+
+  // Menambahkan session ke file
+  const savedSessions = getSessionsFile();
+  const sessionIndex = savedSessions.findIndex(sess => sess.id == id);
+
+  if (sessionIndex == -1) {
+    savedSessions.push({
+      id: id,
+      description: description,
+      ready: false,
+    });
+    setSessionsFile(savedSessions);
+  }
 }

+const init = function(socket) {
+  const savedSessions = getSessionsFile();
+
+  if (savedSessions.length > 0) {
+    if (socket) {
+      socket.emit('init', savedSessions);
+    } else {
+      savedSessions.forEach(sess => {
+        createSession(sess.id, sess.description);
+      });
+    }
+  }
+}
+
+init();
+
 // Socket IO
 io.on('connection', function(socket) {
+  init(socket);
+
  socket.on('create-session', function(data) {
    console.log('Create session: ' + data.id);
-    createSession(data.id, data.description, io);
+    createSession(data.id, data.description);
  });
 });

--- a/index-multiple-device.html
+++ b/index-multiple-device.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Whatsapp API by Ngekoding</title>
+	<style>
+	.client {
+		border: 1px solid #ccc;
+		padding: 20px;
+		box-sizing: border-box;
+		display: inline-block;
+		margin: 10px;
+	}
+	.hide {
+		display: none;
+	}
+	</style>
+</head>
+<body>
+
+	<div id="app">
+		<h1>Whatsapp API</h1>
+		<p>Powered by Ngekoding</p>
+		<div class="form-container">
+			<label for="client-id">ID</label><br>
+			<input type="text" id="client-id" placeholder="Masukkan ID">
+			<br><br>
+			<label for="client-description">Deskripsi</label><br>
+			<textarea rows="3" id="client-description" placeholder="Masukkan deskripsi"></textarea>
+			<br><br>
+			<button class="add-client-btn">Tambah Client</button>
+		</div>
+		<hr>
+		<div class="client-container">
+			<div class="client hide">
+				<h3 class="title"></h3>
+				<p class="description"></p>
+				<img src="" alt="QR Code" id="qrcode">
+				<h3>Logs:</h3>
+				<ul class="logs"></ul>
+			</div>
+		</div>
+	</div>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.min.js" integrity="sha512-/WwtKR6NnHomLo0O4w9QKc1INTPEJs7ko6u2aBTA1paPldhPl8LtXsi7a35iEZ69+9P5dcgVNESG8hrP4Y2t3w==" crossorigin="anonymous"></script>
+	<script>
+		$(document).ready(function() {
+			var socket = io();
+
+			// Ketika button tambah diklik
+			$('.add-client-btn').click(function() {
+				var clientId = $('#client-id').val();
+				var clientDescription = $('#client-description').val();
+				var template = $('.client').first().clone()
+										   .removeClass('hide')
+										   .addClass(clientId);
+				template.find('.title').html(clientId);
+				template.find('.description').html(clientDescription);
+				$('.client-container').append(template);
+
+				socket.emit('create-session', {
+					id: clientId,
+					description: clientDescription
+				});
+			});
+
+			socket.on('init', function(data) {
+				$('.client-container .client').not(':first').remove();
+				console.log(data);
+				for (var i = 0; i < data.length; i++) {
+					var session = data[i];
+
+					var clientId = session.id;
+					var clientDescription = session.description;
+					var template = $('.client').first().clone()
+											   .removeClass('hide')
+											   .addClass(clientId);
+					template.find('.title').html(clientId);
+					template.find('.description').html(clientDescription);
+					$('.client-container').append(template);
+
+					if (session.ready) {
+						$(`.client.${session.id} .logs`).append($('<li>').text('Whatsapp is ready!'));
+					} else {
+						$(`.client.${session.id} .logs`).append($('<li>').text('Connecting...'));
+					}
+				}
+			});
+
+			socket.on('remove-session', function(id) {
+				$(`.client.${id}`).remove();
+			});
+
+			socket.on('message', function(data) {
+				$(`.client.${data.id} .logs`).append($('<li>').text(data.text));
+			});
+
+			socket.on('qr', function(data) {
+				$(`.client.${data.id} #qrcode`).attr('src', data.src);
+				$(`.client.${data.id} #qrcode`).show();
+			});
+
+			socket.on('ready', function(data) {
+				$(`.client.${data.id} #qrcode`).hide();
+			});
+
+			socket.on('authenticated', function(data) {
+				$(`.client.${data.id} #qrcode`).hide();
+			});
+		});
+	</script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
@@ -2,44 +2,16 @@
 <html>
 <head>
 	<title>Whatsapp API by Ngekoding</title>
-	<style>
-	.client {
-		border: 1px solid #ccc;
-		padding: 20px;
-		box-sizing: border-box;
-		display: inline-block;
-		margin: 10px;
-	}
-	.hide {
-		display: none;
-	}
-	</style>
 </head>
 <body>

 	<div id="app">
 		<h1>Whatsapp API</h1>
 		<p>Powered by Ngekoding</p>
-		<div class="form-container">
-			<label for="client-id">ID</label><br>
-			<input type="text" id="client-id" placeholder="Masukkan ID">
-			<br><br>
-			<label for="client-description">Deskripsi</label><br>
-			<textarea rows="3" id="client-description" placeholder="Masukkan deskripsi"></textarea>
-			<br><br>
-			<button class="add-client-btn">Tambah Client</button>
-		</div>
-		<hr>
-		<div class="client-container">
-			<div class="client hide">
-				<h3 class="title"></h3>
-				<p class="description"></p>
 		<img src="" alt="QR Code" id="qrcode">
 		<h3>Logs:</h3>
 		<ul class="logs"></ul>
 	</div>
-		</div>
-	</div>

 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.min.js" integrity="sha512-/WwtKR6NnHomLo0O4w9QKc1INTPEJs7ko6u2aBTA1paPldhPl8LtXsi7a35iEZ69+9P5dcgVNESG8hrP4Y2t3w==" crossorigin="anonymous"></script>
@@ -47,38 +19,21 @@
 		$(document).ready(function() {
 			var socket = io();

-			// Ketika button tambah diklik
-			$('.add-client-btn').click(function() {
-				var clientId = $('#client-id').val();
-				var clientDescription = $('#client-description').val();
-				var template = $('.client').first().clone()
-										   .removeClass('hide')
-										   .addClass(clientId);
-				template.find('.title').html(clientId);
-				template.find('.description').html(clientDescription);
-				$('.client-container').append(template);
-
-				socket.emit('create-session', {
-					id: clientId,
-					description: clientDescription
-				});
+			socket.on('message', function(msg) {
+				$('.logs').append($('<li>').text(msg));
 			});

-			socket.on('message', function(data) {
-				$(`.client.${data.id} .logs`).append($('<li>').text(data.text));
-			});
-
-			socket.on('qr', function(data) {
-				$(`.client.${data.id} #qrcode`).attr('src', data.src);
-				$(`.client.${data.id} #qrcode`).show();
+			socket.on('qr', function(src) {
+				$('#qrcode').attr('src', src);
+				$('#qrcode').show();
 			});

 			socket.on('ready', function(data) {
-				$(`.client.${data.id} #qrcode`).hide();
+				$('#qrcode').hide();
 			});

 			socket.on('authenticated', function(data) {
-				$(`.client.${data.id} #qrcode`).hide();
+				$('#qrcode').hide();
 			});
 		});
 	</script>
--- a/nodemon.json
+++ b/nodemon.json
@@ -1,3 +1,3 @@
 {
-	"ignore": ["whatsapp-session-*.json"]
+	"ignore": ["whatsapp-session-*.json", "whatsapp-sessions.json"]
 }