Skip to content

Instantly share code, notes, and snippets.

@jhowbhz

jhowbhz/webSocketMyZAP.html

Last active January 29, 2025 16:51
Show Gist options
  • Save jhowbhz/d9974e9aaf18c74129b73c964e22a645 to your computer and use it in GitHub Desktop.
Save jhowbhz/d9974e9aaf18c74129b73c964e22a645 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jhowbhz revised this gist Dec 22, 2021. 1 changed file with 1 addition and 4 deletions.
    5 changes: 1 addition & 4 deletions webSocketMyZAP.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,5 @@
    /****************************************************************************************************************/
    /* Antes de utilizar esses codigos, inicie a sessão em https://whatsapp-v2.apibrasil.com.br/start */
    /****************************************************************************************************************/

    <!DOCTYPE html>
    <!-- Antes de utilizar esses codigos, verifique as informações em https://apibrasil.com.br -->
    <html lang="pt_BR">

    <head>
  2. jhowbhz revised this gist Dec 22, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion webSocketMyZAP.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /****************************************************************************************************************/
    /* Antes de utilizar esses codigos, inicie a sessão em https://whatsapp-v2.apibrasil.com.br/start */
    /* Antes de utilizar esses codigos, inicie a sessão em https://whatsapp-v2.apibrasil.com.br/start */
    /****************************************************************************************************************/

    <!DOCTYPE html>
  3. jhowbhz revised this gist Dec 22, 2021. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions webSocketMyZAP.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    /****************************************************************************************************************/
    /* Antes de utilizar esses codigos, inicie a sessão em https://whatsapp-v2.apibrasil.com.br/start */
    /****************************************************************************************************************/

    <!DOCTYPE html>
    <html lang="pt_BR">

  4. jhowbhz renamed this gist Dec 22, 2021. 1 changed file with 0 additions and 0 deletions.
    0 webSocketMyZAP.php → webSocketMyZAP.html
    View file
    File renamed without changes.
  5. jhowbhz revised this gist Dec 22, 2021. 1 changed file with 80 additions and 82 deletions.
    162 changes: 80 additions & 82 deletions webSocketMyZAP.php
    View file
    Original file line number Diff line number Diff line change
    @@ -7,71 +7,73 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Demo MyZAP / apigratis.com.br</title>
    </head>
    <style>
    body {
    background: #E5DDD5;
    }
    <style>
    body {
    background: #E5DDD5;
    }
    .page-header {
    background: #006A4E;
    margin: 0;
    padding: 20px 0 10px;
    color: #FFFFFF;
    position: fixed;
    width: 100%;
    z-index: 1
    }
    .page-header {
    background: #006A4E;
    margin: 0;
    padding: 20px 0 10px;
    color: #FFFFFF;
    position: fixed;
    width: 100%;
    z-index: 1
    }
    .main {
    height: 100vh;
    padding-top: 70px;
    }
    .main {
    height: 100vh;
    padding-top: 70px;
    }
    .chat-log {
    padding: 40px 0 114px;
    height: auto;
    overflow: auto;
    }
    .chat-log {
    padding: 40px 0 114px;
    height: auto;
    overflow: auto;
    }
    .chat-log__item {
    background: #fafafa;
    padding: 10px;
    margin: 0 auto 20px;
    max-width: 80%;
    float: left;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    clear: both;
    }
    .chat-log__item {
    background: #fafafa;
    padding: 10px;
    margin: 0 auto 20px;
    max-width: 80%;
    float: left;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    clear: both;
    }
    .chat-log__item.chat-log__item--own {
    float: right;
    background: #DCF8C6;
    text-align: right;
    }
    .chat-log__item.chat-log__item--own {
    float: right;
    background: #DCF8C6;
    text-align: right;
    }
    .chat-form {
    background: #DDDDDD;
    padding: 40px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    }
    .chat-form {
    background: #DDDDDD;
    padding: 40px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    }
    .chat-log__author {
    margin: 0 auto .5em;
    font-size: 14px;
    font-weight: bold;
    }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    .chat-log__author {
    margin: 0 auto .5em;
    font-size: 14px;
    font-weight: bold;
    }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <body>
    <header class="page-header">
    <div class="container ">
    <h2>Chat Demo MyZAP / apigratis.com.br</h2>
    </div>
    </header>
    <div class="main">
    <div class="container ">
    <div class="chat-log"></div>
    @@ -102,89 +104,85 @@
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
    $(document).ready(() => {
    //servidor MYZAP
    HOST_MYZAP = `http://jarvis-srv.duckdns.org:3334`;
    SESSION = 'nome_da_sessao';
    url_string = window.location.href
    //pega o numero por GET no parametro
    url_string = window.location.href;
    url = new URL(url_string);
    //numero destino
    number = `+${url.searchParams.get("number")}`;
    //inicia o socket
    const socket = io(HOST_MYZAP);
    //receivedMessage
    socket.on('received-message', (receivedMessage) => {
    if(!receivedMessage?.isGroupMsg)
    if (!receivedMessage?.isGroupMsg) {
    $(".chat-log").append(`<div class="chat-log__item">
    <h3 class="chat-log__author">${ receivedMessage?.name } <small>${receivedMessage?.datetime}</small></h3>
    <div class="chat-log__message">${receivedMessage?.content}</div>
    </div>`);
    <h3 class="chat-log__author">${ receivedMessage?.name } <small>${receivedMessage?.datetime}</small></h3>
    <div class="chat-log__message">${receivedMessage?.content}</div>
    </div>`);
    }
    })
    //send-message
    //sendMessage
    socket.on('send-message', (sendMessage) => {
    $(".chat-log").append(`<div class="chat-log__item chat-log__item--own">
    <h3 class="chat-log__author">${sendMessage?.name} <small>${sendMessage?.datetime}</small></h3>
    <div class="chat-log__message">${sendMessage?.content}</div>
    </div>`);
    })
    //ack
    socket.on('ack', (ack) => {
    console.log('ack', ack);
    })
    $(`.btn-send`).on('click', async (e) => {
    action = `/sendText`
    //dados da sessao
    sessionkey = `teste2`
    session = `teste2`
    text = $(`.message`).val();
    //ações para o request dinamico
    action = `/sendText`
    text = $(`.message`).val() ?? 'Sem texto';
    data = {
    'session': `${session}`,
    'number': `${number}`,
    'text': `${text}`
    }
    //faz request
    await requestMyZap(action, sessionkey, data);
    //mata o botao
    e.event.preventDefault();
    })
    })
    //request dinamica, você nao precisa reescrever isso novamente.
    async function requestMyZap(action, sessionkey, data) {
    $(`.message`).val('');
    try {
    let response = await fetch(`${HOST_MYZAP}${action}`, {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    'sessionkey' : sessionkey
    'sessionkey': sessionkey
    },
    body: JSON.stringify(data)
    });
    if(response.status === 200){
    $(`.message`).val('');
    }
    //let json = await response.json();
    } catch (error) {
    console.log('error', error);
    alert(`Erro ao enviar mensagem, verifique a conexão com a API.`);
    return false
    }
    }
    </script>
  6. jhowbhz revised this gist Dec 22, 2021. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions webSocketMyZAP.php
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,6 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Demo MyZAP / apigratis.com.br</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <style>
    body {
    @@ -65,7 +64,7 @@
    font-weight: bold;
    }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <body>
    <header class="page-header">
  7. jhowbhz revised this gist Dec 22, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion webSocketMyZAP.php
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Demo MyZAP / apigratis.com.br</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <style>
    body {
    background: #E5DDD5;
    @@ -64,7 +65,6 @@
    font-weight: bold;
    }
    </style>
    </head>
    <body>
  8. jhowbhz created this gist Dec 22, 2021.
    192 changes: 192 additions & 0 deletions webSocketMyZAP.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,192 @@
    <!DOCTYPE html>
    <html lang="pt_BR">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Demo MyZAP / apigratis.com.br</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
    body {
    background: #E5DDD5;
    }
    .page-header {
    background: #006A4E;
    margin: 0;
    padding: 20px 0 10px;
    color: #FFFFFF;
    position: fixed;
    width: 100%;
    z-index: 1
    }
    .main {
    height: 100vh;
    padding-top: 70px;
    }
    .chat-log {
    padding: 40px 0 114px;
    height: auto;
    overflow: auto;
    }
    .chat-log__item {
    background: #fafafa;
    padding: 10px;
    margin: 0 auto 20px;
    max-width: 80%;
    float: left;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    clear: both;
    }
    .chat-log__item.chat-log__item--own {
    float: right;
    background: #DCF8C6;
    text-align: right;
    }
    .chat-form {
    background: #DDDDDD;
    padding: 40px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    }
    .chat-log__author {
    margin: 0 auto .5em;
    font-size: 14px;
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <header class="page-header">
    <div class="container ">
    <h2>Chat Demo MyZAP / apigratis.com.br</h2>
    </div>
    </header>
    <div class="main">
    <div class="container ">
    <div class="chat-log"></div>
    </div>
    <div class="chat-form">
    <div class="container ">
    <form class="form-horizontal">
    <div class="row">
    <div class="col-sm-10 col-xs-8">
    <input type="text" class="form-control message" id="message" placeholder="Message" />
    </div>
    <div class="col-sm-2 col-xs-4">
    <button type="button" class="btn btn-success btn-block btn-send">Enviar</button>
    </div>
    </div>
    </form>
    </div>
    </div>
    </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
    $(document).ready(() => {
    HOST_MYZAP = `http://jarvis-srv.duckdns.org:3334`;
    SESSION = 'nome_da_sessao';
    url_string = window.location.href
    url = new URL(url_string);
    number = `+${url.searchParams.get("number")}`;
    const socket = io(HOST_MYZAP);
    socket.on('received-message', (receivedMessage) => {
    if(!receivedMessage?.isGroupMsg)
    $(".chat-log").append(`<div class="chat-log__item">
    <h3 class="chat-log__author">${ receivedMessage?.name } <small>${receivedMessage?.datetime}</small></h3>
    <div class="chat-log__message">${receivedMessage?.content}</div>
    </div>`);
    })
    //send-message
    socket.on('send-message', (sendMessage) => {
    $(".chat-log").append(`<div class="chat-log__item chat-log__item--own">
    <h3 class="chat-log__author">${sendMessage?.name} <small>${sendMessage?.datetime}</small></h3>
    <div class="chat-log__message">${sendMessage?.content}</div>
    </div>`);
    })
    //ack
    socket.on('ack', (ack) => {
    console.log('ack', ack);
    })
    $(`.btn-send`).on('click', async (e) => {
    action = `/sendText`
    sessionkey = `teste2`
    session = `teste2`
    text = $(`.message`).val();
    data = {
    'session': `${session}`,
    'number': `${number}`,
    'text': `${text}`
    }
    await requestMyZap(action, sessionkey, data);
    e.event.preventDefault();
    })
    })
    async function requestMyZap(action, sessionkey, data) {
    try {
    let response = await fetch(`${HOST_MYZAP}${action}`, {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    'sessionkey' : sessionkey
    },
    body: JSON.stringify(data)
    });
    if(response.status === 200){
    $(`.message`).val('');
    }
    //let json = await response.json();
    } catch (error) {
    console.log('error', error);
    return false
    }
    }
    </script>
    </html>