Last active
February 12, 2018 01:20
-
-
Save nhalstead/9a69e27a4c7e645c62e98025bf6802d1 to your computer and use it in GitHub Desktop.
Connecting to a Local Websocket with an Indicator on it.
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
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script> | |
| <meta charset="UTF-8"> | |
| <style> | |
| html { | |
| font: 12px/1.2em sans-serif; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| li { | |
| margin-left: 5px; | |
| } | |
| div.column { | |
| display: table-cell; | |
| } | |
| .ball { | |
| position: relative; | |
| height: 5px; | |
| width: 10px; | |
| margin-right: 3px; | |
| } | |
| .bachi { | |
| display:inline-block; | |
| height: 6px; | |
| width: 6px; | |
| margin-right: 3px; | |
| border-style: solid; | |
| border-radius: 50%; | |
| border-width: 2px; | |
| } | |
| .boch { | |
| display:inline-block; | |
| height: 10px; | |
| width: 10px; | |
| margin-right: 3px; | |
| border-radius: 50%; | |
| } | |
| .bloch { | |
| display:inline-block; | |
| height: 10px; | |
| width: 5px; | |
| } | |
| .topball { | |
| height: 5px; | |
| border-radius: 90px 90px 0 0; | |
| } | |
| .botball { | |
| height: 5px; | |
| border-radius: 0 0 90px 90px; | |
| } | |
| .rightball { | |
| width: 5px; | |
| border-radius: 0 90px 90px 0; | |
| } | |
| .leftball { | |
| margin-right: 0; | |
| width: 5px; | |
| border-radius: 90px 0 0 90px; | |
| } | |
| .good {background: green;} | |
| .problem {background: gold;} | |
| .bad {background: red;} | |
| .good-data {border-color: green;} | |
| .problem-data {border-color: gold;} | |
| .bad-data {border-color: red;} | |
| </style> | |
| </head> | |
| <body> | |
| <h3>Websocket Connection</h3> | |
| <ul> | |
| <li> | |
| <span id="con_status" class='bachi bad bad-data'></span> Connection Status to Server | |
| </li> | |
| <li> | |
| <span id="channel_status" class='bachi bad bad-data'></span> Channel Connect Status (Delayed for 1 sec. on connect) | |
| </li> | |
| <li> | |
| <span id="data_read" class='bachi bad-data'></span> Ping Back (Delayed by the Network's pingInterval on connect) | |
| </li> | |
| <li> | |
| <div id="error" style="font-size: 14px;padding-left: 20px;padding-top: 20px;"></div> | |
| </li> | |
| </ul> | |
| <script> | |
| var colors = { | |
| "gray": "font-weight: bold; color: #979797;", | |
| "red": "font-weight: bold; color: #DC2020;", | |
| "orange": "font-weight: bold; color: #FD9332;", | |
| "yellow": "font-weight: bold; color: #F09F0D;", | |
| "green": "font-weight: bold; color: #31DC20;", | |
| "blue": "font-weight: bold; color: #1184F1;", | |
| "purple": "font-weight: bold; color: #7B20DC;" | |
| }; | |
| var good = "bachi good good-data"; | |
| var bad = "bachi bad bad-data"; | |
| var problem = "bachi problem problem-data"; | |
| var connection = document.getElementById("con_status"); | |
| var channel = document.getElementById("channel_status"); | |
| var pingBack = document.getElementById("data_read"); | |
| var error = document.getElementById("error"); | |
| pingBack.className = bad; | |
| connection.className = bad; | |
| channel.className = bad; | |
| //Connect to SOCKET Network | |
| var SOCKET = io.connect('http://localhost:8080', { | |
| transports: ['websocket'], | |
| query: "key=123456789" | |
| }); | |
| var pTime = 30000; // The Default Ping Interval from the Websocket Server | |
| // On Connect | |
| SOCKET.on('connect', function(data){ | |
| console.log("%cSocket Connected to Server.", colors.green); | |
| pTime = SOCKET.io.engine.pingInterval; | |
| console.log("%c[SOCKET] %cPing Interval: "+pTime+"ms", colors.blue, colors.gray); | |
| console.log("%c[SOCKET] %cPing Timeout: "+SOCKET.io.engine.pingTimeout+"ms", colors.blue, colors.gray); | |
| connection.className = good; | |
| channel.className = problem; | |
| setTimeout(function(){ | |
| SOCKET.emit('join', { channel: 'SocketNetwork', presence: true, authorize: false}); | |
| }, 1000); | |
| }); | |
| // On Ping | |
| SOCKET.on('ping', function(data){ | |
| SOCKET.emit('watcher', { 'socketId': SOCKET.id, 'type': 'update' }); | |
| console.log("%c[SOCKET] %cPING! PONG!", colors.blue, colors.gray); | |
| pingBack.className = good; | |
| setTimeout(function(){ | |
| pingBack.className = problem; | |
| }, (pTime-2000) ); | |
| }); | |
| // Online Message | |
| SOCKET.on('watcher', function(data){ | |
| if(data.type == "join"){ | |
| console.log("%c[EXTRA] %cWelcome " + data.socketId + " to the network!", colors.yellow, colors.gray); | |
| } | |
| else if(data.type == "update"){ | |
| console.log("%c[EXTRA] %cI see" + data.socketId + " is still on!", colors.yellow, colors.gray); | |
| } | |
| }); | |
| // On Reconnect | |
| SOCKET.on('reconnect', function(data){ | |
| console.log("%cSocket Reconnected.", colors.green); | |
| connection.className = good; | |
| }); | |
| // On Disconnect | |
| SOCKET.on('disconnect', function(data){ | |
| console.log("%cSocket Disconnected from Server.", colors.red); | |
| connection.className = bad; | |
| }); | |
| // On Reconnecting | |
| SOCKET.on('reconnecting', function(data){ | |
| console.log("%cAttempting Socket Reconnection.", colors.yellow); | |
| connection.className = problem; | |
| }); | |
| // On Failed Reconnect | |
| SOCKET.on('reconnect_failed', function(data){ | |
| console.log("%cFailed Socket Reconnect.", colors.red); | |
| connection.className = bad; | |
| }); | |
| // On Demo | |
| // For the Demo Event | |
| SOCKET.on('demo', function(data){ | |
| console.log("%c[DEMO_EVENT] %c"+data.message, colors.orange, colors.blue); | |
| }); | |
| // On Info | |
| SOCKET.on('info', function(data){ | |
| if(data.status == "connected"){ | |
| setTimeout( function(){ SOCKET.emit('watcher', { 'socketId': SOCKET.id, 'type': 'join' }); }, 2000); // Wait to send the message! | |
| console.log("%c[NETWORK] %cConnected!", colors.purple, colors.gray); | |
| console.log("%c[EXTRA] %cConnected to \""+data.channel+"\"!", colors.yellow, colors.gray); | |
| channel.className = good; | |
| pingBack.className = problem; | |
| } | |
| else if(data.status == "failed"){ | |
| console.log("%c[NETWORK] %cNot Allowed to Connect!", colors.purple, colors.gray); | |
| error.innerText = data.message; | |
| channel.className = bad; | |
| pingBack.className = bad; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment