Projek: Enkripsi Vernam Cipher Dan Distribusi Kunci Three-Pass Protocol

Ini adalah projek berupa dua buah sistem yang dapat digunakan untuk komunikasi chatting secara offline menggunakan jaringan radio. Dikarenakan sifatnya yang offline sehingga komunikasi chatting dapat dilakukan tanpa perlu menggunakan pulsa ataupun kuota internet (hanya bermodalkan listrik saja). Komponen utama dari alat tersebut yaitu Arduino Nano sebagai mikrokontroller utama, ESP-01E sebagai web server dan access point, dan NRF24L01+PA+LNA sebagai modul pengiriman data menggunakan jaringan radio.

Demo Alat

Penjelasan Video

Setiap pesan yang dikirim atau diterima akan diapit dengan tanda "[" dan "]" yang berfungsi untuk membedakan setiap pesan. Jadi jika dimisalkan pesan yang dikirim adalah 3 karakter yaitu ( h e i ) maka nanti akan diubah menjadi 5 karakter yaitu ( [ h e i ] ). Setiap karakter yang telah didekripsi Receiver akan diteruskan ke End Device (penerima) secara realtime melalui WebSocket. Setiap data karakter dikumpulkan atau digabungkan dan disimpan pada IndexedDB. Data baru akan dicetak ke browser setelah terdeteksi karakter ( ] ) yang merupakan tanda akhir pesan (pesan berhasil terkumpul).

End Device (pengirim) mengirim data ke ESP-01E pada sistem pengirim (Transmitter) menggunakan AJAX POST. Sebelum dikirim, data dikonversi menjadi angka biner menggunakan Javascript. Ketika ESP-01E telah menerima data, ESP-01E meneruskan data ke Arduino Nano melalui komunikasi serial (menggunakan kabel). Data berbentuk angka biner dienkripsi oleh Arduino Nano dengan algoritme Vernam Cipher. Proses pembuatan kunci dilakukan secara acak dengan memanfaatkan sinyal analog pada Arduino Nano menggunakan fungsi randomSeed().

Arduino Nano pada Transmitter melakukan pengecekan apakah sebelumnya sudah pernah berkomunikasi dengan sistem penerima (Receiver). Jika belum pernah maka dipastikan bahwa Receiver belum memiliki kunci acak untuk proses dekripsi pesan yang akan dikirim oleh Transmitter. Oleh karena itu, proses distribusi kunci acak perlu dilakukan. Proses distribusi kunci acak dilakukan dengan menggunakan algoritme Three-Pass Protocol. Tetapi jika Transmitter sudah pernah berkomunikasi dengan Receiver, maka proses distribusi kunci tidak perlu dilakukan karena Receiver masih menyimpan kunci acak yang didapatkan pada proses komunikasi sebelumnya.

Kunci enkripsi disimpan ke dalam dua variabel yaitu variabel untuk menyimpan kunci lama dan variabel untuk menyimpan kunci baru. Kunci yang digunakan untuk melakukan enkripsi dan dekripsi merupakan kunci lama. Sedangkan kunci yang digabungkan dengan plaintext (data asli yang belum dienkripsi) merupakan kunci baru. Kunci baru dibuat oleh sistem yang berperan sebagai pengirim (Transmitter). Jadi, ketika Receiver melakukan dekripsi maka akan didapatkan 2 jenis data berupa 8 angka biner yaitu pesan dan 8 angka biner yaitu kunci baru.

Komunikasi antara Transmitter dan Receiver dilakukan secara nirkabel dengan jaringan radio menggunakan modul NRF24. Data dienkripsi setiap 1 karakter. Satu karakter dikonversi menjadi 8 angka biner. Kunci acak yang dibuat juga terdiri dari 8 angka biner. Total karakter yang dikirim oleh Transmitter ke Receiver berjumlah 16 karakter yang merupakan 8 angka biner dari data pesan dan 8 angka biner dari kunci baru. Enam belas karakter tersebut dienkripsi menggunakan kunci lama oleh Transmitter sebelum dikirimkan.

Kunci Enkripsi dan Dekripsi

- Pada sisi Transmitter, kunci lama merupakan kunci untuk proses enkripsi sedangkan kunci baru merupakan kunci yang digabungkan dengan data yang akan dikirim. Setelah proses enkripsi, kunci lama dihapus dan diganti dengan kunci baru.

- Pada sisi Receiver, kunci lama merupakan kunci yang didapatkan saat proses dekripsi pesan yang diterima sebelumnya (jika sudah pernah berkomunikasi) sedangkan kunci baru merupakan kunci yang didapatkan saat proses dekripsi pesan saat itu. Setelah proses dekripsi, kunci lama dihapus dan diganti dengan kunci baru.

kunci lama pada sisi Receiver merupakan kunci yang didapatkan saat proses Three-Pass Protocol ketika Receiver belum pernah berkomunikasi sebelumnya.

Skema Rangkaian

Skematik rangkaian dapat dilihat menggunakan aplikasi Fritzing. Download file skema rangkaian Fritzing skematik.fzz

Berdasarkan skematik dapat dilihat bahwa terdapat pin header 2x2 yang berfungsi sebagai pengatur sumber daya pada Arduino. Terdapat opsi pada sumber daya Arduino yaitu menggunakan sumber daya dari USB atau menggunakan sumber daya melalui pin Vin. Lalu terdapat pin header 2x8 yang berfungsi sebagai pengatur mode pada Arduino dan ESP-01E.

Arduino dapat dijadikan sebagai perantara untuk proses upload kode program dari aplikasi Aduino IDE ke ESP-01E tanpa menggunakan modul lain seperti FTDI. Modul ESP-01E dapat diubah dari mode normal ke mode programming dan juga sebaliknya. Perubahan sumber daya Arduino dan mode kedua modul tersebut dapat dilakukan dengan mudah yaitu dengan menghubungkan jumper pada pin header yang dibutuhkan.

Source Code Arduino

#include <SPI.h>
#include <RF24.h>
#include <SoftwareSerial.h>
RF24 radio(9,10);
const uint64_t pipe=0xE8E8F0F0E1LL;
SoftwareSerial mySerial(2,3);
String kunciTPP="";
String input="";
void setup(){
  Serial.begin(57600);
  mySerial.begin(57600);
  radio.begin();
  delay(100);
  radio.setDataRate(RF24_250KBPS);
  radio.setRetries(15,15);
  radio.setPALevel(RF24_PA_MIN);
  radio.openWritingPipe(pipe);
  radio.openReadingPipe(1,pipe);
  radio.startListening();
  randomSeed(analogRead(0));
}
void loop(){ 
  if(mySerial.available()){
    char inputSerial=(char)mySerial.read();
    input=input+inputSerial;
  }
  if(input.length()==8){
    if(kunciTPP==""){
      pengirimTPP();
    }
    KirimData(input);
    input="";
  }
  if(radio.available()){
    if(kunciTPP==""){
      penerimaTPP();
    }
    TerimaData();
  }
}
String vernamCipher(String biner1,String biner2){
  String tampungXor="";
  for(int i=0;i<8;i++){
    int hasil=((int)biner1.charAt(i)^(int)biner2.charAt(i));
    tampungXor.concat(hasil);
  }
  return tampungXor;
}
void KirimKunci(String inputKunci){
  bool rslt;
  radio.stopListening();
  char tampungKirim[8];
  for(int i=0;i<8;i++){
    int hasil=inputKunci.charAt(i);
    tampungKirim[i]=hasil;
  }
  rslt=radio.write(&tampungKirim, sizeof(tampungKirim));
  radio.startListening();
  delay(500);
  if(!rslt){
    KirimKunci(inputKunci);
  }
}
String TerimaKunci(){
  char terimaKunci[8];
  if(radio.available()){
    radio.read(&terimaKunci, sizeof(terimaKunci) );
  }
  String tampungTerimaKunci="";
  for(int i=0;i<8;i++){
    tampungTerimaKunci.concat(terimaKunci[i]);
  }
  if(tampungTerimaKunci.length()==8){
    return tampungTerimaKunci;
  }else{
    TerimaKunci();
  }
}
void pengirimTPP(){
  for(int i=0;i<8;i++){
    long randNumber=random(2);
    kunciTPP.concat(randNumber);
  }
  String kunciRandom="";
  for(int i=0;i<8;i++){
    long randNumber=random(2);
    kunciRandom.concat(randNumber);
  }
  String tampungStep1=vernamCipher(kunciTPP,kunciRandom);
  KirimKunci(tampungStep1);
  String tampungStep2=TerimaKunci();
  String tampungStep3=vernamCipher(tampungStep2,kunciRandom);
  KirimKunci(tampungStep3);
  return;
}
void KirimData(String inputEsp01){
  String ciphertext=vernamCipher(inputEsp01,kunciTPP);
  String tampungKunciBaru="";
  for(int i=0;i<8;i++){
    long randNumber=random(2);
    tampungKunciBaru.concat(randNumber);
  }
  String ciphertext_kunci=vernamCipher(tampungKunciBaru,kunciTPP);
  char tampungCiphertext[16];
  for(int i=0;i<16;i++){
    if(i<8){
      tampungCiphertext[i]=ciphertext.charAt(i);
    }else{
      tampungCiphertext[i]=ciphertext_kunci.charAt(i-8);
    }
  }
  bool rslt;
  radio.stopListening();
  rslt=radio.write(&tampungCiphertext, sizeof(tampungCiphertext));
  if(rslt){
    mySerial.print("O");
    kunciTPP=tampungKunciBaru;
  }else{
    mySerial.print("E");
  }
  radio.startListening();
}
void penerimaTPP(){
  if(radio.available()){
    String kunciRandom="";
    for(int i=0;i<8;i++){
      long randNumber=random(2);
      kunciRandom.concat(randNumber);
    }
    String tampungStep1=TerimaKunci();
    String tampungStep2=vernamCipher(tampungStep1,kunciRandom);
    KirimKunci(tampungStep2);
    String tampungStep3=TerimaKunci();
    kunciTPP=vernamCipher(tampungStep3,kunciRandom);
  }
  return;
}
void TerimaData(){
  if(radio.available()){
    char dataReceived[16];
    radio.read(&dataReceived, sizeof(dataReceived) );
    String ciphertext="";
    String kunciBaru="";
    for(int i=0;i<16;i++){
      if(i<8){
        ciphertext.concat(dataReceived[i]);
      }else{
        kunciBaru.concat(dataReceived[i]);
      }
    }
    if(ciphertext.length()==8 && kunciBaru.length()==8){
      String binerPlaintext=vernamCipher(ciphertext,kunciTPP);
      String tampungKunciBaru=vernamCipher(kunciBaru,kunciTPP);
      kunciTPP=tampungKunciBaru;
      tampungKunciBaru="";
      mySerial.print(binerPlaintext);
    }
  }
}

Seluruh Source Code yang digunakan pada Arduino di kedua sistem sama persis. Sedangkan seluruh Source Code yang digunakan pada ESP-01 terdapat sedikit perbedaan yaitu pada konfigurasi nama SSID dan password Wi-Fi.

Source Code ESP-01E

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#ifndef APSSID
#define APSSID "nama_WiFi"
#define APPSK  "password_WiFi"
#endif
String ip_default="192.168.4.1";
String protokol="http://";
const char *ssid=APSSID;
const char *password=APPSK;
ESP8266WebServer server(80);
WebSocketsServer webSocket=WebSocketsServer(81);
String input="";
void handleRoot(){
  String temp="<!DOCTYPE html>";
  temp+="<html>";
  temp+="<head>";
  temp+="<meta charset='utf-8'/>";
  temp+="<meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1'/>";
  temp+="<meta name='viewport' content='width=device-width,initial-scale=1.0'/>";
  temp+="<title>Web Chatting</title>";
  temp+="<link rel='icon' href='data:;base64,iVBORw0KGgo='/>";
  temp+="<link rel='stylesheet' href='"+protokol+ip_default+"/style.css' type='text/css'/>";
  temp+="</head>";
  temp+="<body>";
  temp+="<div id='bodi'>";
  temp+="<div id='messenger'>";
  temp+="</div>";
  temp+="<div class='clear'></div>";
  temp+="<div id='paginasi'>";
  temp+="</div>";
  temp+="<div class='clear'></div>";
  temp+="<div id='form_pesan'>";
  temp+="<select id='useragen' class='addtag' title='Desktop (tanpa tambahan delay) atau Mobile (ada tambahan delay)'>";
  temp+="<option value='0'>Desktop</option>";
  temp+="<option value='1'>Mobile</option>";
  temp+="</select>";
  temp+="<span class='addtag' onclick='tampilBox(\"e\")' title='Emoticons'>Emoticons</span>";
  temp+="<span id='imageupload' class='addtag' onclick='tampilBox(\"u\")' title='Upload File'>File</span>";
  temp+="<div id='modal' class='modal hidden-tab'>";
  temp+="<div id='modal_content' class='modal_content'>";
  temp+="<div class='tab'>";
  temp+="<span id='close_modal' class='modal_close'></span>";
  temp+="<div class='clear'></div>";
  temp+="</div>";
  temp+="<br/><br/>";
  temp+="<div id='emoticon'></div>";
  temp+="<div id='upload' class='center'>";
  temp+="<div id='previewing'></div>";
  temp+="<div id='selectImage'>";
  temp+="<input type='text' id='uploadFile' placeholder='Buka File...'/>";
  temp+="<span class='fileUpload'>";
  temp+="<input type='file' accept='.gif,.jpg,.jpeg,.png,.mp4,.webm,.mp3,.ogg,.txt' class='upload' name='file' id='file'/>";
  temp+="</span>";
  temp+="<input type='button' value='Kirim' id='uploadSubmit' class='submit' disabled/>";
  temp+="</div>";
  temp+="<div id='message_upload' class='message'></div>";
  temp+="</div>";
  temp+="</div>";
  temp+="</div>";
  temp+="<form name='kirim_pesan'>";
  temp+="<textarea name='isi_pesan' id='isi_pesan' class='form-kontak' placeholder='Ketik pesan...' cols='31' rows='4' required></textarea><br/>";
  temp+="<input type='button' onclick='kirimChat(null)' name='submit' value='Kirim'/>";
  temp+="</form>";
  temp+="</div>";
  temp+="<div id='fak_proses' class='center'>";
  temp+="<progress id='proses' value='0' max='100' class='hidden-tab'></progress>";
  temp+="<div id='message' class='message'></div>";
  temp+="</div>";
  temp+="</div>";
  temp+="<script src='"+protokol+ip_default+"/ux.js'></script>";
  temp+="</body>";
  temp+="</html>";
  server.sendHeader("Cache-Control", "no-cache");
  server.send(200, "text/html", temp);
  return;
}
void handleCss(){
  String temp="body{background-color:#f5f5f5;font-family:arial,sans-serif;word-wrap:break-word;font-size:13px;width:100%;min-height:100%;overflow:auto;}";
  temp+="#messenger{min-height:100px;background-color:#f9f9f9;padding:10px;}";
  temp+=".hidden-tab{display:none;width:0;height:0;overflow:hidden;}";
  temp+=".text_right{text-align:right;margin-top:10px;}";
  temp+=".clear{clear:both;}";
  temp+=".center{text-align:center;}";
  temp+="*{margin:0;padding:0;}";
  temp+=".isi_chat{margin-bottom:10px;color:#333;padding:10px;border-radius:6px;}";
  temp+="@media only screen and (min-width:1000px){";
  temp+=".isi_chat{width:45%;}";
  temp+="}";
  temp+="@media only screen and (max-width:1000px){";
  temp+=".isi_chat{width:75%;}";
  temp+="}";
  temp+=".sender{background-color:lightblue;float:right;}";
  temp+=".sender_gagal{background-color:lightgrey;float:right;}";
  temp+=".receiver{background-color:linen;float:left;}";
  temp+=".kirimulang{color:#444;}";
  temp+=".readmore{color:cornflowerblue;cursor:pointer;}";
  temp+=".readmore:hover{color:chocolate;}";
  temp+=".delete{color:tomato;}";
  temp+=".delete,.kirimulang{background-color:cornsilk;padding:3px 5px;margin-right:5px;font-size:12px;border-radius:2px;border:1px solid #eee;cursor:pointer;}";
  temp+=".delete:hover,.kirimulang:hover{background-color:#fefefe;color:#555;}";
  temp+="time{font-size:10px;color:#999;}";
  temp+=".form-kontak{width:100%;padding:5px 10px;}";
  temp+="textarea{resize:vertical;font-family:arial,sans-serif;box-sizing:border-box;border:1px solid #f1f1f1;font-size:13px;}";
  temp+="textarea:focus,input:focus{box-shadow:0 0 20px #eee;}";
  temp+="textarea:focus{border:1px solid #f1f1f1;}";
  temp+="#bodi{margin:0 auto;padding:10px;}";
  temp+="input[type='button']{background-color:#f9f9f9;width:100%;border:1px solid #eee;vertical-align:middle;box-sizing:border-box;padding:8px;cursor:pointer;}";
  temp+="input[type='button']#uploadSubmit{width:unset;}";
  temp+="input[type='button']:hover{background-color:#fff;border:1px solid #ddd;}";
  temp+="#kosong{text-align:center;padding:32px 0;font-size:15px;color:slategrey;}";
  temp+="a{text-decoration:none;}";
  temp+="#paginasi{background-color:#F9F9F9;color:#7A889D;font-size:0.85em;margin:10px 0;}";
  temp+="#paginasi a:link,#paginasi a:visited{background-color:lavender;color:lightslategrey;}";
  temp+=".aktif{background-color:lightblue;color:ghostwhite;}";
  temp+="#paginasi span,#paginasi a:link,#paginasi a:visited{margin:7px 0;padding:5px 10px;display:inline-block;border-radius:2px;}";
  temp+="#paginasi a:hover{color:white;background-color:lightsteelblue;cursor:pointer;}";
  temp+="#fak_proses{max-width:80%;margin:0 auto;padding:10px;}";
  temp+="#proses,.message{margin:0 auto;padding:5px;}";
  temp+="#batal{max-width:100px;}";
  temp+="#uploadFile{background-color:#eee;border:1px solid #eee;padding:8px;vertical-align:middle;}";
  temp+=".fileUpload{position:relative;overflow:hidden;}";
  temp+=".fileUpload>input.upload{position:absolute;top:0;right:0;padding:8px;opacity:0;width:280px;margin:0;}";
  temp+=".modal{position:fixed;z-index:99;background-color:rgba(0,0,0,0.75);width:100%;height:100%;top:0;left:0;outline:none;}";
  temp+=".modal_content{background-color:#fefefe;overflow:auto;margin:5% auto 10%;width:80%;max-width:600px;height:80%;max-height:400px;padding:10px 20px;}";
  temp+=".modal_close{float:right;color:#aaa;font-size:38px;font-weight:bold;}";
  temp+=".modal_close:hover{color:#000;cursor:pointer;}";
  temp+="#selectImage{margin:5px 0 3px;}";
  temp+="#previewing{max-width:300px;margin:0 auto;}";
  temp+=".addtag{background-color:#f9f9f9;cursor:pointer;display:inline-block;margin:2px 2px 2px 1px;padding:10px 15px;}";
  temp+=".addtag:hover{background-color:#e1e1e1;}";
  temp+="img,video,audio{display:block;margin:0 auto;max-width:300px;object-fit:contain;}";
  temp+=".addsmile{display:inline-block;background-color:#f9f9f9;border:1px solid #eee;padding:5px;margin:5px;font-size:20px;cursor:pointer;line-height:20px;}";
  temp+=".addsmile:hover{background-color:#eee;}";
  temp+="select{border:none;-moz-appearance:none;-webkit-appearance:none;}";
  temp+="select:focus{outline:0;}";
  temp+="select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000;}";
  server.sendHeader("cache-control", "max-age=31536000, must-revalidate, public");
  server.send(200, "text/css", temp);
  return;
}
void handleJavaScript(){
  String temp="window.indexedDB=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB;";
  temp+="window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransaction||window.msIDBTransaction;";
  temp+="window.IDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyRange;";
  temp+="if(window.indexedDB){";
  temp+="var db;";
  temp+="var request=window.indexedDB.open('database',1);";
  temp+="request.onerror=function(event){";
  temp+="console.log('database error');";
  temp+="};";
  temp+="request.onupgradeneeded=function(event){";
  temp+="db=event.target.result;";
  temp+="db.createObjectStore('tabel', {keyPath: 'id'});";
  temp+="};";
  temp+="var array_chat;";
  temp+="request.onsuccess=function(event){";
  temp+="db=request.result;";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('array_chat');";
  temp+="tabel.onerror=function(event){";
  temp+="console.log('tabel error');";
  temp+="};";
  temp+="tabel.onsuccess=function(event){";
  temp+="if(event.target.result==undefined){";
  temp+="array_chat=new Array();";
  temp+="}else{";
  temp+="array_chat=JSON.parse(event.target.result.value);";
  temp+="}";
  temp+="};";
  temp+="setJumlahChat();";
  temp+="};";
  temp+="var connection=new WebSocket('ws://'+window.location.hostname+':81/');";
  temp+="connection.onopen=function(){";
  temp+="console.log('WebSocket connect');";
  temp+="};";
  temp+="connection.onerror=function(error){";
  temp+="console.log('WebSocket Error ',error);";
  temp+="};";
  temp+="connection.onmessage=function(event){";
  temp+="formKirim.classList.add('hidden-tab');";
  temp+="pesannya.innerHTML='Sedang menerima pesan... silahkan tunggu';";
  temp+="terimaChat(event);";
  temp+="clearTimeout(timerChat);";
  temp+="timerChat=setTimeout(function(){";
  temp+="formKirim.classList.remove('hidden-tab');";
  temp+="pesannya.innerHTML='';";
  temp+="},300);";
  temp+="};";
  temp+="connection.onclose=function(){";
  temp+="console.log('WebSocket connection closed');";
  temp+="};";
  temp+="var formKirim=document.getElementById('form_pesan');";
  temp+="var elemPaginasi=document.getElementById('paginasi');";
  temp+="var formMessenger=document.getElementById('messenger');";
  temp+="var progress=document.getElementById('proses');";
  temp+="var pesannya=document.getElementById('message');";
  temp+="var isi;";
  temp+="var chat_baru=new Array();";
  temp+="var max_percobaan=3;";
  temp+="var percobaan=1;";
  temp+="var posisi_percobaan;";
  temp+="var timerChat;";
  temp+="var stack=new Array;";
  temp+="var jumlah_stack;";
  temp+="var jumlah_setiap_stack=1000;";
  temp+="var biner;";
  temp+="var huruf;";
  temp+="var total_semua_karakter;";
  temp+="if(window.XMLHttpRequest){";
  temp+="xmlhttp=new XMLHttpRequest();";
  temp+="}else{";
  temp+="xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');";
  temp+="}";
  temp+="function set_stack(){";
  temp+="total_semua_karakter=isi.length;";
  temp+="if(total_semua_karakter>jumlah_setiap_stack){";
  temp+="jumlah_stack=Math.ceil(total_semua_karakter/jumlah_setiap_stack);";
  temp+="for(var i=0;i<jumlah_stack;i++){";
  temp+="var start=i*jumlah_setiap_stack;";
  temp+="if(i==jumlah_stack-1){";
  temp+="var tempstack=isi.substring(start);";
  temp+="}else{";
  temp+="var end=(start+jumlah_setiap_stack);";
  temp+="var tempstack=isi.substring(start,end);";
  temp+="}";
  temp+="stack[i]=new Array(...tempstack);";
  temp+="}";
  temp+="}else{";
  temp+="jumlah_stack=0;";
  temp+="stack[0]=new Array(...isi);";
  temp+="}";
  temp+="percobaan=1;";
  temp+="posisi_percobaan=0;";
  temp+="}";
  temp+="var pesanupload=document.getElementById('message_upload');";
  temp+="var modal=document.getElementById('modal');";
  temp+="var tutup_modal=document.getElementById('close_modal');";
  temp+="function emptyLoaded(){";
  temp+="emptyProgres();";
  temp+="document.getElementById('uploadFile').setAttribute('placeholder','Buka File...');";
  temp+="document.getElementById('uploadSubmit').disabled=true;";
  temp+="document.getElementById('previewing').innerHTML='';";
  temp+="}";
  temp+="function showMessageError(error){";
  temp+="pesanupload.innerHTML='<span class=\"error\">'+error+'</span>';";
  temp+="}";
  temp+="tutup_modal.onclick=function(){";
  temp+="modal.classList.add('hidden-tab');";
  temp+="};";
  temp+="var emotfolder=document.getElementById('emoticon');";
  temp+="var filefolder=document.getElementById('upload');";
  temp+="function tampilBox(j){";
  temp+="if(j=='e'){";
  temp+="emotfolder.classList.remove('hidden-tab');";
  temp+="filefolder.classList.add('hidden-tab');";
  temp+="}else{";
  temp+="emotfolder.classList.add('hidden-tab');";
  temp+="filefolder.classList.remove('hidden-tab');";
  temp+="}";
  temp+="modal.classList.remove('hidden-tab');";
  temp+="}";
  temp+="var data_alt;";
  temp+="function render_emot(){";
  temp+="data_alt=new Array('128512','128513','128514','128515','128516','128517','128518','128519','128520','128521','128522','128523','128524','128525',";
  temp+="'128526','128527','128528','128529','128530','128531','128532','128533','128534','128535','128536','128537','128538','128539','128540','128541',";
  temp+="'128542','128543','128544','128545','128546','128547','128549','128550','128551','128552','128553','128554','128555','128557','128558','128559',";
  temp+="'128560','128561','128562','128563','128564','128565','128566','128567','128568','128569','128570','128571','128572','128573','128574','128575','128576','128579');";
  temp+="for(var i=0;i<data_alt.length;i++){";
  temp+="var a=document.createElement('span');";
  temp+="a.setAttribute('onclick','addEmot(\"'+data_alt[i]+'\")');";
  temp+="a.classList.add('addsmile');";
  temp+="a.innerHTML='&#'+data_alt[i]+';';";
  temp+="emotfolder.appendChild(a);";
  temp+="}";
  temp+="}";
  temp+="render_emot();";
  temp+="function addEmot(smile){";
  temp+="var emot=' {e}'+smile+'{/e}';";
  temp+="var txtarea=document.getElementById('isi_pesan');";
  temp+="txtarea.value=txtarea.value+emot;";
  temp+="modal.classList.add('hidden-tab');";
  temp+="}";
  temp+="document.getElementById('file').onchange=function(){";
  temp+="var tamperData=this.files[0];";
  temp+="if(tamperData==undefined){";
  temp+="return false;";
  temp+="}";
  temp+="var imagefile=tamperData.type;";
  temp+="console.log(imagefile);";
  temp+="if(this.files.length>0){";
  temp+="if(this.files.length>1){";
  temp+="emptyLoaded();";
  temp+="showMessageError('Max upload 1 file');";
  temp+="return false;";
  temp+="}";
  temp+="if(tamperData.size>0 && tamperData.size<=10999999){";
  temp+="var match=['image/jpeg','image/png','image/gif','video/mp4','video/webm','video/ogg','audio/mp3','audio/ogg','text/plain'];";
  temp+="var cek_index=match.indexOf(imagefile);";
  temp+="if(cek_index==-1){";
  temp+="emptyLoaded();";
  temp+="showMessageError('Hanya file dengan ekstensi .jpeg .jpg .png .gif .mp4 .webm .mp3 .ogg .txt yang diperbolehkan');";
  temp+="return false;";
  temp+="}else{";
  temp+="pesanupload.innerHTML='';";
  temp+="var reader=new FileReader();";
  temp+="reader.onload=load_image;";
  temp+="reader.onerror=imageIsError;";
  temp+="if(imagefile==match[0]||imagefile==match[1]||imagefile==match[2]){";
  temp+="tipeData='img';";
  temp+="}else if(imagefile==match[3]||imagefile==match[4]||imagefile==match[5]){";
  temp+="tipeData='video';";
  temp+="}else if(imagefile==match[6]||imagefile==match[7]){";
  temp+="tipeData='audio';";
  temp+="}else if(imagefile==match[8]){";
  temp+="tipeData='text';";
  temp+="}";
  temp+="if(tipeData=='text'){";
  temp+="reader.readAsText(tamperData);";
  temp+="}else{";
  temp+="reader.readAsDataURL(tamperData);";
  temp+="}";
  temp+="}";
  temp+="}else{";
  temp+="emptyLoaded();";
  temp+="showMessageError('File harus kurang dari 10 MB');";
  temp+="return false;";
  temp+="}";
  temp+="}";
  temp+="};";
  temp+="function load_image(eve){";
  temp+="document.getElementById('uploadSubmit').disabled=false;";
  temp+="var div_upload=document.getElementById('file');";
  temp+="isi=eve.target.result;";
  temp+="document.getElementById('uploadFile').setAttribute('placeholder',div_upload.value);";
  temp+="if(tipeData=='img'){";
  temp+="document.getElementById('previewing').innerHTML='<img id=\"previewing_file\" onerror=\"imageIsError()\" src=\"'+isi+'\" width=\"80%\" height=\"80%\"/>';";
  temp+="}else if(tipeData=='video'){";
  temp+="document.getElementById('previewing').innerHTML='No Preview';";
  temp+="}else if(tipeData=='audio'){";
  temp+="document.getElementById('previewing').innerHTML='<audio id=\"previewing_file\" onerror=\"imageIsError()\" src=\"'+isi+'\" controls/>';";
  temp+="}else if(tipeData=='text'){";
  temp+="document.getElementById('previewing').innerHTML='<pre id=\"previewing_file\">'+isi+'</pre>';";
  temp+="}";
  temp+="}";
  temp+="function imageIsError(){";
  temp+="emptyLoaded();";
  temp+="showMessageError('File error');";
  temp+="return false;";
  temp+="}";
  temp+="var mobile=0;";
  temp+="document.getElementById('useragen').onchange=function(){";
  temp+="mobile=document.getElementById('useragen').value;";
  temp+="};";
  temp+="var batal=0;";
  temp+="function kirimFile(id,tipe,jum,i,a){";
  temp+="if(batal==0){";
  temp+="huruf=stack[i][a];";
  temp+="biner=string_ke_biner(huruf);";
  temp+="var posisi_k=(i*jumlah_setiap_stack)+a;";
  temp+="localStorage.setItem('gagal'+id,posisi_k);";
  temp+="xmlhttp.onreadystatechange=function(){";
  temp+="if(xmlhttp.readyState==4 && xmlhttp.status==200){";
  temp+="if(xmlhttp.responseText=='E'){";
  temp+="console.log('Gagal mengirim '+biner+' posisi ('+posisi_k+'/'+(total_semua_karakter-1)+')');";
  temp+="if(percobaan<max_percobaan){";
  temp+="clearTimeout(timerChat);";
  temp+="timerChat=setTimeout(function(){";
  temp+="if(posisi_percobaan==posisi_k){";
  temp+="percobaan++;";
  temp+="}else{";
  temp+="if(percobaan==1){";
  temp+="percobaan=2;";
  temp+="}else{";
  temp+="percobaan=1;";
  temp+="}";
  temp+="posisi_percobaan=posisi_k;";
  temp+="}";
  temp+="kirimFile(id,tipe,jum,i,a);";
  temp+="},500);";
  temp+="}else{";
  temp+="if(tipe==1){";
  temp+="ubah_tampilan_pesan('g');";
  temp+="}else{";
  temp+="formKirim.classList.toggle('hidden-tab');";
  temp+="}";
  temp+="}";
  temp+="}else{";
  temp+="if(posisi_k==total_semua_karakter-1){";
  temp+="var posisigagal=localStorage.getItem('gagal'+id);";
  temp+="if(posisigagal!=null){";
  temp+="localStorage.removeItem('gagal'+id);";
  temp+="}";
  temp+="if(tipe==2){";
  temp+="gagal_ke_sukses(id);";
  temp+="}else{";
  temp+="ubah_tampilan_pesan('o');";
  temp+="}";
  temp+="}else{";
  temp+="a++;";
  temp+="if(a==jumlah_setiap_stack){";
  temp+="i++;";
  temp+="a=0;";
  temp+="}";
  temp+="if(i<=jum){";
  temp+="kirimFile(id,tipe,jum,i,a);";
  temp+="}";
  temp+="}";
  temp+="}";
  temp+="}";
  temp+="};";
  temp+="xmlhttp.ontimeout=function(e){";
  temp+="if(tipe==1){";
  temp+="ubah_tampilan_pesan('g');";
  temp+="}else{";
  temp+="formKirim.classList.toggle('hidden-tab');";
  temp+="}emptyLoaded();";
  temp+="};";
  temp+="if(posisi_k>0){";
  temp+="xmlhttp.upload.addEventListener('progress',proses_berjalan(posisi_k,total_semua_karakter-1,tipe),false);";
  temp+="xmlhttp.addEventListener('abort',proses_batal,false);";
  temp+="xmlhttp.addEventListener('load',proses_selesai,false);";
  temp+="}";
  temp+="xmlhttp.open('GET','/post?string_chat='+biner+'&posisi='+posisi_k+'&mobile='+mobile,true);";
  temp+="xmlhttp.timeout=5000;";
  temp+="xmlhttp.send();";
  temp+="}";
  temp+="}";
  temp+="document.getElementById('uploadSubmit').onclick=function(){";
  temp+="kirimChat(isi);";
  temp+="};";
  temp+="function emptyProgres(){";
  temp+="progress.value=0;";
  temp+="progress.classList.add('hidden-tab');";
  temp+="pesannya.innerHTML='';";
  temp+="pesanupload.innerHTML='';";
  temp+="document.getElementById('previewing').innerHTML='';";
  temp+="}";
  temp+="function Batal(tipe){";
  temp+="batal=1;";
  temp+="if(tipe==1){";
  temp+="ubah_tampilan_pesan('g');";
  temp+="}else{";
  temp+="formKirim.classList.toggle('hidden-tab');";
  temp+="}";
  temp+="}";
  temp+="function proses_batal(event){";
  temp+="emptyLoaded();";
  temp+="}";
  temp+="function proses_berjalan(value,total,tipe){";
  temp+="var percent=(value/total)*100;";
  temp+="progress.classList.remove('hidden-tab');";
  temp+="progress.value=Math.round(percent);";
  temp+="if(tipe==1){";
  temp+="pesannya.innerHTML='Mengirim pesan... silahkan tunggu<br/>'+Math.round(percent)+'% ('+value+'/'+total+' karakter)<br/><br/><input id=\"batal\" type=\"button\" value=\"Batal\" onclick=\"Batal('+tipe+')\"/>';";
  temp+="}else{";
  temp+="pesannya.innerHTML='Mengirim ulang... silahkan tunggu<br/>'+Math.round(percent)+'% ('+value+'/'+total+' karakter)<br/><br/><input id=\"batal\" type=\"button\" value=\"Batal\" onclick=\"Batal('+tipe+')\"/>';";
  temp+="}";
  temp+="}";
  temp+="function proses_selesai(event){";
  temp+="emptyLoaded();";
  temp+="}";
  temp+="function htmlentiti(str){";
  temp+="return String(str).replace(/&/g, '&').replace(/</g,'<').replace(/>/g, '>').replace(/\"/g, '"').replace(/\\r/g,'').replace(/\\n/g,'<br/>').replace(/{e}([0-9]{6}){\\/e}/g,'&#$1;');";
  temp+="}";
  temp+="function readmore(id){";
  temp+="document.getElementById('dot'+id).remove();";
  temp+="document.getElementById('more'+id).classList.toggle('hidden-tab');";
  temp+="document.getElementById('readmore'+id).remove();";
  temp+="}";
  temp+="function cek_base64(str){";
  temp+="var gambar=/^data:image\\/(jpeg|png|gif);base64[A-Za-z0-9\\+\\=\\/\\,]+$/;";
  temp+="var video=/^data:video\\/(mp4|webm|ogg);base64[A-Za-z0-9\\+\\=\\/\\,]+$/;";
  temp+="var audio=/^data:audio\\/(mp3|ogg);base64[A-Za-z0-9\\+\\=\\/\\,]+$/;";
  temp+="if(gambar.test(str)){";
  temp+="return 1;";
  temp+="}else if(video.test(str)){";
  temp+="return 2;";
  temp+="}else if(audio.test(str)){";
  temp+="return 3;";
  temp+="}else{";
  temp+="return 0;";
  temp+="}";
  temp+="}";
  temp+="function tampilChat(id,isi,time,tipe){";
  temp+="var a=document.createElement('DIV');";
  temp+="a.setAttribute('id','chat'+id);";
  temp+="var b=document.createElement('SPAN');";
  temp+="isi=htmlentiti(isi);";
  temp+="var cekbase64=cek_base64(isi);";
  temp+="if(cekbase64==1){";
  temp+="isi='<img src=\"'+isi+'\"></img>';";
  temp+="}else if(cekbase64==2){";
  temp+="isi='<video src=\"'+isi+'\" controls></video>';";
  temp+="}else if(cekbase64==3){";
  temp+="isi='<audio src=\"'+isi+'\" controls></audio>';";
  temp+="}else{";
  temp+="if(isi.length>300){";
  temp+="var isi_less=isi.substring(0,300)+'<span id=\"dot'+id+'\">... </span>';";
  temp+="var isi_more='<span id=\"more'+id+'\" class=\"hidden-tab\">'+isi.substring(300)+'</span><span id=\"readmore'+id+'\" class=\"readmore\" onclick=\"readmore('+id+')\">Baca lebih lengkap</span>';";
  temp+="isi=isi_less+isi_more;";
  temp+="}";
  temp+="}";
  temp+="b.innerHTML=isi;";
  temp+="var c=document.createElement('DIV');";
  temp+="c.classList.add('text_right');";
  temp+="var d=document.createElement('SPAN');";
  temp+="d.classList.add('delete');";
  temp+="d.innerHTML='Hapus';";
  temp+="d.setAttribute('onclick','hapus('+id+')');";
  temp+="var e=document.createElement('TIME');";
  temp+="var waktu=new Date(time);";
  temp+="var waktu_t=waktu.getTime();";
  temp+="e.setAttribute('datetime',waktu_t);";
  temp+="e.innerHTML=waktu;";
  temp+="formMessenger.appendChild(a);";
  temp+="var f=document.createElement('DIV');";
  temp+="if(tipe=='r'){";
  temp+="f.classList.add('receiver');";
  temp+="}else if(tipe=='o'){";
  temp+="f.classList.add('sender');";
  temp+="f.setAttribute('id','sender'+id);";
  temp+="}else{";
  temp+="f.classList.add('sender_gagal');";
  temp+="f.setAttribute('id','sender'+id);";
  temp+="var h=document.createElement('SPAN');";
  temp+="h.classList.add('kirimulang');";
  temp+="h.innerHTML='Kirim Ulang';";
  temp+="h.setAttribute('id','gagal'+id);";
  temp+="h.setAttribute('onclick','kirimulang('+id+')');";
  temp+="c.appendChild(h);";
  temp+="}";
  temp+="c.appendChild(d);";
  temp+="c.appendChild(e);";
  temp+="a.appendChild(f);";
  temp+="f.appendChild(b);";
  temp+="f.appendChild(c);";
  temp+="f.classList.add('isi_chat');";
  temp+="var g=document.createElement('DIV');";
  temp+="g.classList.add('clear');";
  temp+="a.appendChild(g);";
  temp+="}";
  temp+="let url=new URL(document.URL);";
  temp+="let searchParams=new URLSearchParams(url.search);";
  temp+="var current_page=(searchParams.get('page')>0) ? parseInt(searchParams.get('page')) : 1;";
  temp+="var total_halaman;";
  temp+="var jumlah_chat;";
  temp+="var jumlah_chat_perhalaman;";
  temp+="function setJumlahChat(){";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('array_chat');";
  temp+="tabel.onerror=function(event){";
  temp+="console.log('tabel error');";
  temp+="};";
  temp+="tabel.onsuccess=function(event){";
  temp+="if(event.target.result==undefined){";
  temp+="array_chat=new Array();";
  temp+="}else{";
  temp+="array_chat=JSON.parse(event.target.result.value);";
  temp+="}";
  temp+="jumlah_chat=array_chat.length;";
  temp+="if(jumlah_chat==0){";
  temp+="var kosong=document.createElement('DIV');";
  temp+="kosong.setAttribute('id','kosong');";
  temp+="kosong.innerHTML='Histori chat masih kosong';";
  temp+="formMessenger.appendChild(kosong);";
  temp+="}";
  temp+="jumlah_chat_perhalaman=10;";
  temp+="total_halaman=Math.ceil(jumlah_chat/jumlah_chat_perhalaman);";
  temp+="total_halaman==(total_halaman>0) ? total_halaman : 1;";
  temp+="tampil_paginasi(current_page);";
  temp+="};";
  temp+="}";
  temp+="function tampil_paginasi(page){";
  temp+="if(total_halaman>1){";
  temp+="var pagi=document.createElement('DIV');";
  temp+="pagi.classList.add('center');";
  temp+="for(var i=1;i<=total_halaman;i++){";
  temp+="if((i==1 || i>(page-3)) && (i<(page+3) || i==total_halaman)){";
  temp+="if(i > (page+3)){";
  temp+="var subpagi=document.createElement('SPAN');";
  temp+="subpagi.innerHTML='...';";
  temp+="pagi.appendChild(subpagi);";
  temp+="}";
  temp+="if(i==page){";
  temp+="if(i==1){";
  temp+="var subpagi=document.createElement('SPAN');";
  temp+="subpagi.classList.add('aktif');";
  temp+="subpagi.innerHTML=i;";
  temp+="pagi.appendChild(subpagi);";
  temp+="}else{";
  temp+="var subpagi=document.createElement('SPAN');";
  temp+="subpagi.innerHTML='<';";
  temp+="pagi.appendChild(subpagi);";
  temp+="var subpagi=document.createElement('SPAN');";
  temp+="subpagi.classList.add('aktif');";
  temp+="subpagi.innerHTML=i;";
  temp+="pagi.appendChild(subpagi);";
  temp+="}";
  temp+="}else{";
  temp+="if(i==1){";
  temp+="var subpagi=document.createElement('A');";
  temp+="subpagi.setAttribute('href','/');";
  temp+="subpagi.innerHTML=i;";
  temp+="pagi.appendChild(subpagi);";
  temp+="}else{";
  temp+="if((i==(page-2) && (page-3)!=1) || (i==total_halaman && (total_halaman-3)>page)){";
  temp+="var subpagi=document.createElement('A');";
  temp+="subpagi.setAttribute('href','?page='+i);";
  temp+="subpagi.innerHTML=i;";
  temp+="pagi.appendChild(subpagi);";
  temp+="}else{";
  temp+="var subpagi=document.createElement('SPAN');";
  temp+="subpagi.innerHTML='<';";
  temp+="pagi.appendChild(subpagi);";
  temp+="var subpagi=document.createElement('A');";
  temp+="subpagi.setAttribute('href','?page='+i);";
  temp+="subpagi.innerHTML=i;";
  temp+="pagi.appendChild(subpagi);";
  temp+="}";
  temp+="}";
  temp+="}";
  temp+="if(i < (page-3)){";
  temp+="var subpagi=document.createElement('SPAN');";
  temp+="subpagi.innerHTML='...';";
  temp+="pagi.appendChild(subpagi);";
  temp+="}";
  temp+="subpagi.setAttribute('id',i);";
  temp+="}";
  temp+="}";
  temp+="elemPaginasi.appendChild(pagi);";
  temp+="}";
  temp+="var mulai=(page>1) ? (page*jumlah_chat_perhalaman)-jumlah_chat_perhalaman : 0;";
  temp+="var akhir=((jumlah_chat-mulai)>jumlah_chat_perhalaman) ? (page*jumlah_chat_perhalaman) : jumlah_chat;";
  temp+="for(var i=akhir-1;i>=mulai;i--){";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('c'+array_chat[i]);";
  temp+="tabel.onsuccess=function(event){";
  temp+="if(event.target.result!=undefined){";
  temp+="var chat_new=JSON.parse(event.target.result.value);";
  temp+="var id_unfinished=localStorage.getItem('unfinished');";
  temp+="if(chat_new[0]!=id_unfinished){";
  temp+="tampilChat(chat_new[0],chat_new[1],chat_new[2],chat_new[3]);";
  temp+="}";
  temp+="}";
  temp+="};";
  temp+="}";
  temp+="}";
  temp+="function biner_ke_string(str){";
  temp+="var text='';";
  temp+="str.split(' ').map(function(bin){";
  temp+="text+=String.fromCharCode(parseInt(bin,2));";
  temp+="});";
  temp+="return text;";
  temp+="}";
  temp+="function string_ke_biner(str){";
  temp+="var length=str.length,output=[];";
  temp+="for(var i=0;i<length;i++){";
  temp+="var bin=str[i].charCodeAt().toString(2);";
  temp+="output.push(Array(8-bin.length+1).join('0')+bin);";
  temp+="}";
  temp+="return output.join(' ');";
  temp+="}";
  temp+="function ubah_tampilan_pesan(statuse){";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('array_chat');";
  temp+="tabel.onsuccess=function(event){";
  temp+="if(event.target.result==undefined){";
  temp+="array_chat=new Array();";
  temp+="}else{";
  temp+="array_chat=JSON.parse(event.target.result.value);";
  temp+="}";
  temp+="var id_terbaru=parseInt(array_chat[0]);";
  temp+="jumlah_chat=(id_terbaru>0) ? id_terbaru+1 : 1;";
  temp+="var waktu=new Date();";
  temp+="var waktu_t=waktu.getTime();";
  temp+="chat_baru[0]=jumlah_chat;";
  temp+="isi=isi.replace('[','');";
  temp+="isi=isi.replace(']','');";
  temp+="chat_baru[1]=isi;";
  temp+="chat_baru[2]=waktu_t;";
  temp+="if(statuse=='o'){";
  temp+="chat_baru[3]='o';";
  temp+="}else{";
  temp+="chat_baru[3]='g';";
  temp+="}";
  temp+="tampilChat(jumlah_chat,isi,waktu,chat_baru[3]);";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').add({ id: 'c'+jumlah_chat, value: JSON.stringify(chat_baru) });";
  temp+="array_chat.unshift(jumlah_chat);";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').delete('array_chat');";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').add({ id: 'array_chat', value: JSON.stringify(array_chat) });";
  temp+="var hapus_elemen=document.getElementById('kosong');";
  temp+="if(hapus_elemen){";
  temp+="hapus_elemen.remove();";
  temp+="}";
  temp+="};";
  temp+="formKirim.classList.toggle('hidden-tab');";
  temp+="kirim_pesan.isi_pesan.value='';";
  temp+="}";
  temp+="function kirimChat(str){";
  temp+="batal=0;";
  temp+="if(str==null){";
  temp+="isi=document.getElementById('isi_pesan').value;";
  temp+="if(isi==''){";
  temp+="return false;";
  temp+="}";
  temp+="}else{";
  temp+="isi=str;";
  temp+="}";
  temp+="isi=isi.replace(/[^\\x20-\\x7E]/g,'');";
  temp+="var prefix='[';";
  temp+="var postfix=']';";
  temp+="isi=prefix+isi+postfix;";
  temp+="set_stack();";
  temp+="modal.classList.add('hidden-tab');";
  temp+="formKirim.classList.toggle('hidden-tab');";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('array_chat');";
  temp+="tabel.onsuccess=function(event){";
  temp+="if(event.target.result==undefined){";
  temp+="array_chat=new Array();";
  temp+="}else{";
  temp+="array_chat=JSON.parse(event.target.result.value);";
  temp+="}";
  temp+="var id_terbaru=parseInt(array_chat[0]);";
  temp+="jumlah_chat=(id_terbaru>0) ? id_terbaru+1 : 1;";
  temp+="kirimFile(jumlah_chat,1,jumlah_stack,0,0);";
  temp+="};";
  temp+="}";
  temp+="function gagal_ke_sukses(id){";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('c'+id);";
  temp+="tabel.onsuccess=function(event){";
  temp+="array_chat=JSON.parse(event.target.result.value);";
  temp+="chat_baru[0]=id;";
  temp+="chat_baru[1]=array_chat[1];";
  temp+="chat_baru[2]=array_chat[2];";
  temp+="chat_baru[3]='o';";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').delete('c'+id);";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').add({ id: 'c'+id, value: JSON.stringify(chat_baru) });";
  temp+="var hapus_elemen=document.getElementById('gagal'+id);";
  temp+="hapus_elemen.remove();";
  temp+="var ganti_background=document.getElementById('sender'+id);";
  temp+="ganti_background.setAttribute('class','sender isi_chat');";
  temp+="};";
  temp+="formKirim.classList.toggle('hidden-tab');";
  temp+="}";
  temp+="function kirimulang(id){";
  temp+="batal=0;";
  temp+="formKirim.classList.toggle('hidden-tab');";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('c'+id);";
  temp+="tabel.onsuccess=function(event){";
  temp+="array_chat=JSON.parse(event.target.result.value);";
  temp+="var prefix='[';";
  temp+="var postfix=']';";
  temp+="isi=prefix+array_chat[1]+postfix;";
  temp+="set_stack();";
  temp+="var posisigagal=parseInt(localStorage.getItem('gagal'+id));";
  temp+="var posisi_stack_kirim_ulang=0;";
  temp+="if(posisigagal>jumlah_setiap_stack){";
  temp+="posisi_stack_kirim_ulang=Math.floor(posisigagal/jumlah_setiap_stack);";
  temp+="}else{";
  temp+="posisi_stack_kirim_ulang=0;";
  temp+="}";
  temp+="if(posisigagal!=null){";
  temp+="var posisinew=posisigagal-(posisi_stack_kirim_ulang*jumlah_setiap_stack);";
  temp+="kirimFile(id,2,jumlah_stack,posisi_stack_kirim_ulang,posisinew);";
  temp+="}else{";
  temp+="kirimFile(id,2,jumlah_stack,0,0);";
  temp+="}";
  temp+="};";
  temp+="}";
  temp+="function hapus(id){";
  temp+="if(confirm('Anda yakin ingin menghapus pesan ini?\\nPesan yang telah dihapus tidak dapat dikembalikan')){";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').delete('c'+id);";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('array_chat');";
  temp+="tabel.onsuccess=function(event){";
  temp+="array_chat=JSON.parse(event.target.result.value);";
  temp+="var a=array_chat.indexOf(id);";
  temp+="array_chat.splice(a,1);";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').delete('array_chat');";
  temp+="if(array_chat.length>0){";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').add({ id: 'array_chat', value: JSON.stringify(array_chat) });";
  temp+="}";
  temp+="var posisigagal=localStorage.getItem('gagal'+id);";
  temp+="if(posisigagal!=null){";
  temp+="localStorage.removeItem('gagal'+id);";
  temp+="}";
  temp+="};";
  temp+="var hapus_elemen=document.getElementById('chat'+id);";
  temp+="hapus_elemen.remove();";
  temp+="}";
  temp+="}";
  temp+="var i_pesan=0;";
  temp+="function terimaChat(e){";
  temp+="var data_masuk=biner_ke_string(e.data);";
  temp+="console.log('menerima data '+i_pesan+' '+e.data+' = '+data_masuk);";
  temp+="var id_unfinished=localStorage.getItem('unfinished');";
  temp+="if(data_masuk=='['){";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('array_chat');";
  temp+="tabel.onsuccess=function(event){";
  temp+="i_pesan=(i_pesan==0) ? i_pesan+1 : 0;";
  temp+="if(event.target.result==undefined){";
  temp+="array_chat=new Array();";
  temp+="}else{";
  temp+="array_chat=JSON.parse(event.target.result.value);";
  temp+="}";
  temp+="if(id_unfinished!=null){";
  temp+="localStorage.removeItem('unfinished');";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').delete('c'+id_unfinished);";
  temp+="var a=array_chat.indexOf(id_unfinished);";
  temp+="array_chat.splice(a,1);";
  temp+="}";
  temp+="var id_terbaru=parseInt(array_chat[0]);";
  temp+="jumlah_chat=(id_terbaru>0) ? id_terbaru+1 : 1;";
  temp+="var waktu=new Date();";
  temp+="var waktu_t=waktu.getTime();";
  temp+="chat_baru[0]=jumlah_chat;";
  temp+="chat_baru[1]=data_masuk;";
  temp+="chat_baru[2]=waktu_t;";
  temp+="chat_baru[3]='r';";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').add({ id: 'c'+jumlah_chat, value: JSON.stringify(chat_baru) });";
  temp+="localStorage.setItem('unfinished',jumlah_chat);";
  temp+="array_chat.unshift(jumlah_chat);";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').delete('array_chat');";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').add({ id: 'array_chat', value: JSON.stringify(array_chat) });";
  temp+="};";
  temp+="}else{";
  temp+="var tabel=db.transaction(['tabel']).objectStore('tabel').get('c'+id_unfinished);";
  temp+="tabel.onsuccess=function(event){";
  temp+="i_pesan++;";
  temp+="if(event.target.result!=undefined){";
  temp+="var chat_new=JSON.parse(event.target.result.value);";
  temp+="chat_baru[0]=id_unfinished;";
  temp+="var isi_new=chat_new[1]+data_masuk;";
  temp+="if(data_masuk==']'){";
  temp+="isi_new=isi_new.replace('[','');";
  temp+="isi_new=isi_new.replace(']','');";
  temp+="}";
  temp+="chat_baru[1]=isi_new;";
  temp+="chat_baru[2]=chat_new[2];";
  temp+="chat_baru[3]=chat_new[3];";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').delete('c'+id_unfinished);";
  temp+="db.transaction(['tabel'], 'readwrite').objectStore('tabel').add({ id: 'c'+id_unfinished, value: JSON.stringify(chat_baru) });";
  temp+="if(data_masuk==']'){";
  temp+="localStorage.removeItem('unfinished');";
  temp+="i_pesan=0;";
  temp+="tampilChat(chat_baru[0],chat_baru[1],chat_baru[2],chat_baru[3]);";
  temp+="}";
  temp+="}";
  temp+="};";
  temp+="}";
  temp+="}";
  temp+="}else{";
  temp+="alert('Maaf, browser Anda tidak mendukung penyimpanan IndexedDB');";
  temp+="}";
  server.sendHeader("cache-control", "max-age=31536000, must-revalidate, public");
  server.send(200, "application/javascript", temp);
  return;
}
void handleTx(){
  if(server.hasArg("string_chat")){
    server.sendHeader("Cache-Control", "no-cache");
    if(server.arg("string_chat") != ""){
      Serial.print(server.arg("string_chat"));
      String respon="";
      int i=0;
      do{
        if(i==5000){
          i=0;
          respon="E";
          break;
        }
        if(Serial.available()){
          char inputSerial=(char)Serial.read();
          respon=respon+inputSerial;
        }
        delay(1);
        i+=1;
      }while(respon=="");
      if(server.arg("mobile")=="1"){
        delay(100);
      }
      if(respon=="O"){
        server.send(200, "text/html", "O");
      }else if(respon=="E"){
        server.send(200, "text/html", "E");
      }
      return;
    }else{
      server.send(200, "text/html", "E");
      return;
    }
  }else{
    server.send(200, "text/html", "E");
    return;
  }
}
void handleNotFound(){
  server.send(404, "text/html", "Not Found");
  return;
}
void setup(){
  delay(1000);
  Serial.begin(57600);
  WiFi.softAP(ssid, password);
  IPAddress myIP=WiFi.softAPIP();
  server.on("/", handleRoot);
  server.on("/style.css", handleCss);
  server.on("/ux.js", handleJavaScript);
  server.on("/post", handleTx);
  server.onNotFound(handleNotFound);
  server.begin();
  webSocket.begin();
}
void loop(){ 
  if(Serial.available()){
    char inputKeyboard=(char)Serial.read();
    input=input+inputKeyboard;
  }
  webSocket.loop();
  if(input.length()==8){
    webSocket.broadcastTXT(input);
    input="";
  }
  server.handleClient();
}