Last active
January 26, 2022 19:30
-
-
Save jhowbhz/d9974e9aaf18c74129b73c964e22a645 to your computer and use it in GitHub Desktop.
Como utilizar MyZAP com Web Sockets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- Antes de utilizar esses codigos, verifique as informações em https://apibrasil.com.br --> | |
| <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> | |
| </head> | |
| <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> | |
| <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> | |
| </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(() => { | |
| //servidor MYZAP | |
| HOST_MYZAP = `http://jarvis-srv.duckdns.org:3334`; | |
| //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) { | |
| $(".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>`); | |
| } | |
| }) | |
| //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) => { | |
| //dados da sessao | |
| sessionkey = `teste2` | |
| session = `teste2` | |
| //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 | |
| }, | |
| body: JSON.stringify(data) | |
| }); | |
| } catch (error) { | |
| alert(`Erro ao enviar mensagem, verifique a conexão com a API.`); | |
| return false | |
| } | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment