SHARE
TWEET

client.js

a guest Jan 11th, 2020 5 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
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