Created
May 17, 2019 12:44
-
-
Save mucahitnezir/6297ab3e4f9238dbe33a17cb04d1ad8d to your computer and use it in GitHub Desktop.
Api Gateway WebSocket Demo on Frontend
This file contains hidden or 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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>WebSocket Demo</title> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <input type="text" id="txtMessage"> | |
| <button id="btnSend">Send Message</button> | |
| <button id="btnClose">Close</button> | |
| <ul id="messages"> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| var txtMessage = document.getElementById('txtMessage'); | |
| var btnSend = document.getElementById('btnSend'); | |
| var btnClose = document.getElementById('btnClose'); | |
| var messageList = document.getElementById('messages'); | |
| var ws = new WebSocket('wss://88chjhio7k.execute-api.us-east-1.amazonaws.com/dev'); | |
| ws.onopen = function (event) { | |
| console.log('opened'); | |
| console.log(event); | |
| } | |
| ws.onclose = function () { | |
| console.log('closed'); | |
| btnSend.setAttribute('disabled', 'disabled'); | |
| } | |
| ws.onmessage = function (message) { | |
| var data = message.data; | |
| messageList.innerHTML += '<li>' + data + '</li>'; | |
| }; | |
| btnClose.addEventListener('click', function () { | |
| ws.close(); | |
| }); | |
| btnSend.addEventListener('click', function () { | |
| var message = txtMessage.value; | |
| if (message) { | |
| var data = { | |
| action: 'sendMessage', | |
| data: message | |
| }; | |
| ws.send(JSON.stringify(data)); | |
| txtMessage.value = ''; | |
| } | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment