Remember multiple device sessions

This commit is contained in:
Nur Muhammad
2020-12-13 13:52:29 +08:00
parent f67f3b8d61
commit 55d469811b
4 changed files with 186 additions and 59 deletions

View File

@@ -18,13 +18,28 @@ app.use(express.urlencoded({
})); }));
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.sendFile('index.html', { res.sendFile('index-multiple-device.html', {
root: __dirname root: __dirname
}); });
}); });
const sessions = []; 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`; const SESSION_FILE_PATH = `./whatsapp-session-${id}.json`;
let sessionCfg; let sessionCfg;
if (fs.existsSync(SESSION_FILE_PATH)) { if (fs.existsSync(SESSION_FILE_PATH)) {
@@ -62,6 +77,11 @@ const createSession = function(id, description, io) {
client.on('ready', () => { client.on('ready', () => {
io.emit('ready', { id: id }); io.emit('ready', { id: id });
io.emit('message', { id: id, text: 'Whatsapp is ready!' }); 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) => { client.on('authenticated', (session) => {
@@ -87,6 +107,14 @@ const createSession = function(id, description, io) {
}); });
client.destroy(); client.destroy();
client.initialize(); 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 // Tambahkan client ke sessions
@@ -95,13 +123,44 @@ const createSession = function(id, description, io) {
description: description, description: description,
client: client 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 // Socket IO
io.on('connection', function(socket) { io.on('connection', function(socket) {
init(socket);
socket.on('create-session', function(data) { socket.on('create-session', function(data) {
console.log('Create session: ' + data.id); console.log('Create session: ' + data.id);
createSession(data.id, data.description, io); createSession(data.id, data.description);
}); });
}); });

113
index-multiple-device.html Normal file
View File

@@ -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>

View File

@@ -2,44 +2,16 @@
<html> <html>
<head> <head>
<title>Whatsapp API by Ngekoding</title> <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> </head>
<body> <body>
<div id="app"> <div id="app">
<h1>Whatsapp API</h1> <h1>Whatsapp API</h1>
<p>Powered by Ngekoding</p> <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"> <img src="" alt="QR Code" id="qrcode">
<h3>Logs:</h3> <h3>Logs:</h3>
<ul class="logs"></ul> <ul class="logs"></ul>
</div> </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/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 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() { $(document).ready(function() {
var socket = io(); var socket = io();
// Ketika button tambah diklik socket.on('message', function(msg) {
$('.add-client-btn').click(function() { $('.logs').append($('<li>').text(msg));
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(data) { socket.on('qr', function(src) {
$(`.client.${data.id} .logs`).append($('<li>').text(data.text)); $('#qrcode').attr('src', src);
}); $('#qrcode').show();
socket.on('qr', function(data) {
$(`.client.${data.id} #qrcode`).attr('src', data.src);
$(`.client.${data.id} #qrcode`).show();
}); });
socket.on('ready', function(data) { socket.on('ready', function(data) {
$(`.client.${data.id} #qrcode`).hide(); $('#qrcode').hide();
}); });
socket.on('authenticated', function(data) { socket.on('authenticated', function(data) {
$(`.client.${data.id} #qrcode`).hide(); $('#qrcode').hide();
}); });
}); });
</script> </script>

View File

@@ -1,3 +1,3 @@
{ {
"ignore": ["whatsapp-session-*.json"] "ignore": ["whatsapp-session-*.json", "whatsapp-sessions.json"]
} }