SHARE
TWEET

Untitled

a guest Sep 23rd, 2019 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>Chat Room</title>
  6. </head>
  7. <br>
  8. <textarea id="chat-log" cols="100" rows="2"></textarea><br/>
  9. <textarea id="chat-history" cols="100" rows="20"></textarea><br/>
  10. <input id="chat-message-input" disabled="true" type="text" size="100"/><br/>
  11. <input id="chat-message-submit" disabled="true" type="button" value="Send"/><br/>
  12. Enter token
  13. <input id="token-input" type="text" size="100"/><br/>
  14. <input id="token-submit" type="button" value="Log in"/>
  15. </body>
  16. <script>
  17.     var chatSocket = undefined;
  18.     var chatStateSocket = undefined;
  19.  
  20.     var roomName = {{ room_name_json }};
  21.  
  22.     document.querySelector('#chat-message-input').focus();
  23.     document.querySelector('#chat-message-input').onkeyup = function (e) {
  24.         if (e.keyCode === 13) {  // enter, return
  25.             document.querySelector('#chat-message-submit').click();
  26.         }
  27.     };
  28.  
  29.  
  30.     function clear_log() {
  31.         document.querySelector('#chat-log').value = ''
  32.     }
  33.  
  34.     document.querySelector('#token-submit').onclick = function (e) {
  35.         if (document.querySelector('#token-input').value !== '') {
  36.             let token = document.querySelector('#token-input').value;
  37.             if (token !== '') {
  38.                 chatSocket = new WebSocket(
  39.                     'ws://' + window.location.host +
  40.                     '/ws/chat/' + roomName + '/?user_token=' + token);
  41.  
  42.                 chatStateSocket = new WebSocket(
  43.                     'ws://' + window.location.host +
  44.                     '/ws/chat_state/' + roomName + '/?user_token=' + token);
  45.  
  46.                 document.querySelector('#chat-message-input').disabled = false;
  47.                 document.querySelector('#chat-message-submit').disabled = false;
  48.  
  49.  
  50.                 chatSocket.onmessage = function (e) {
  51.                     var data = JSON.parse(e.data);
  52.                     console.log(data);
  53.                     var action = data['action'];
  54.                     var msg_data = data['data'];
  55.                     var message = msg_data['text'];
  56.                     var user = msg_data['user'];
  57.                     if (action === 'chat_message') {
  58.                         document.querySelector('#chat-history').value += (` [${user}]: ` + message + '\n');
  59.                     }
  60.                 };
  61.  
  62.                 chatSocket.onclose = function (e) {
  63.                     console.error('Chat socket closed unexpectedly');
  64.                 };
  65.  
  66.                 chatStateSocket.onmessage = function (e) {
  67.                     var data = JSON.parse(e.data);
  68.                     var action = data['action'];
  69.                     var message = data['data'];
  70.                     if (action === 'typing') {
  71.                         document.querySelector('#chat-log').value = (`${message['user']} ` + message['state'] + ' \n');
  72.                         setTimeout(clear_log, 900);
  73.                     }
  74.                 };
  75.  
  76.  
  77.                 chatStateSocket.onclose = function (e) {
  78.                     console.error('Chat socket closed unexpectedly');
  79.                 };
  80.  
  81.  
  82.             }
  83.         }
  84.     };
  85.  
  86.  
  87.     document.querySelector('#chat-message-submit').onclick = function (e) {
  88.         var messageInputDom = document.querySelector('#chat-message-input');
  89.         var message = messageInputDom.value;
  90.         chatSocket.send(JSON.stringify({
  91.             'action': 'chat_message',
  92.             'data': {'message': {
  93.                 'type': 'text',
  94.                 'text': message,
  95.                 'status': 'sent',
  96.                 'reply': null,
  97.                 'sender_id': 1,
  98.                 'chat_id': 1,
  99.                 'chat_invite_id': null,
  100.                 'file_id': null,
  101.             }},
  102.  
  103.         }));
  104.  
  105.         messageInputDom.value = '';
  106.     };
  107.  
  108.     document.querySelector('#chat-message-input').oninput = function (e) {
  109.         var messageInputDom = document.querySelector('#chat-message-input');
  110.         chatStateSocket.send(JSON.stringify({
  111.             'action': 'typing',
  112.             'data': {'state': 'typing'}
  113.         }));
  114.     };
  115. </script>
  116. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top