Guest User

client.js

a guest
Jan 11th, 2020
6
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. "use strict";
  2. let tm;
  3.  
  4. let sock;
  5.  
  6. let ping = function() {
  7.     if(sock.readyState != WebSocket.OPEN) return;
  8.     sock.send('__ping__');
  9.     tm = setTimeout(function () {
  10.         // close connection and reattempt
  11.         sock.close();
  12.         sock = newsocket();
  13.     }, 1000);
  14. };
  15.  
  16. let pong = function() {
  17.     clearTimeout(tm);
  18. };
  19.  
  20.  
  21. let newsocket = function() {
  22.  
  23.     let socket = new WebSocket("ws://localhost:8280");
  24.  
  25.     socket.onopen = function(e) {
  26.         let msg1 = document.createElement('div');
  27.         let msg2 = document.createElement('div');
  28.         msg1.textContent = "[open] Connection established";
  29.         msg2.textContent = "Sending to server";
  30.         let messages = document.getElementById('messages');
  31.         messages.append(msg1);
  32.         messages.append(msg2);
  33.         socket.send("My name is Bob.\n");
  34.     };
  35.    
  36.     socket.onclose = function(event) {
  37.         let messages = document.getElementById('messages');
  38.         let msg = document.createElement('div');
  39.         if (event.wasClean) {
  40.             msg.textContent =`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`;
  41.         } else {
  42.             // e.g. server process killed or network down
  43.             // event.code is usually 1006 in this case
  44.             msg.textContent = '[close] Connection died';
  45.         }
  46.         messages.append(msg);
  47.  
  48.         msg = document.createElement('div');
  49.         msg.textContent = `[close] attempting reconnection...`;
  50.         messages.append(msg);
  51.  
  52.         setTimeout(function() {
  53.             sock = newsocket(); // auto reconnect
  54.         }, 1000);
  55.     };
  56.    
  57.     socket.onerror = function(error) {
  58.         let msg = document.createElement('div');
  59.         msg.textContent = `[error] ${error.message}`;
  60.         document.getElementById('messages').append(msg);
  61.     };
  62.  
  63.     // message received - show the message in div#messages
  64.     socket.onmessage = function(event) {
  65.         let message = event.data;
  66.         if(message == '__pong__') {
  67.             pong();
  68.             return;
  69.         }
  70.  
  71.         let messageElem = document.createElement('div');
  72.         messageElem.textContent = message;
  73.         document.getElementById('messages').append(messageElem);
  74.     };
  75.    
  76.     return socket;
  77. };
  78.  
  79.  
  80.  
  81. sock = newsocket();
  82. setInterval(ping, 1100);
  83.  
  84. // send message from the form
  85. document.forms.publish.onsubmit = function() {
  86.     if(sock.readyState != WebSocket.OPEN) return false;
  87.     let outgoingMessage = this.message.value;
  88.  
  89.     sock.send(outgoingMessage);
  90.     return false; // this prevents standard HTML submission
  91. };
  92.  
  93. // https://stackoverflow.com/questions/3780511/reconnection-of-client-when-server-reboots-in-websocket?noredirect=1&lq=1
  94. // https://stackoverflow.com/questions/22431751/websocket-how-to-automatically-reconnect-after-it-dies
RAW Paste Data