cheveguerra/whatsapp-api-tutorial
1
0
Fork 0
mirror of https://github.com/cheveguerra/whatsapp-api-tutorial.git synced 2026-04-17 19:36:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remember multiple device sessions

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

65
index.html
View File

@@ -2,43 +2,15 @@
<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>
<img src="" alt="QR Code" id="qrcode">
<h3>Logs:</h3>
<ul class="logs"></ul>
</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>
@@ -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>