dhayab · March 26, 2024 13:21
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>WebSocket Logger</title>
    <link rel="stylesheet" href="https://dhayab.github.io/luxafor-webusb/demo.css">
    <style>
        .console .log a {
            color: white;
            text-decoration: underline;
            cursor: pointer;
        }

        .console .log a:hover {
            color: lightgray;
        }

        .console .log em {
            font-style: normal;
            color: pink;
        }
    </style>
 </head>

 <body>
    <header>
        <h1>WebSocket Logger</h1>
        <input type="url" name="server">
        <button>Connect</button>
    </header>
    <section class="console">
        <h2>Output</h2>
        <div class="log">Connect to a server or choose from one of the following:
 <a>ws://127.0.0.1:19488</a>
 <a>wss://local.easytransfer.cloud:19487</a>
 <a>wss://demos.kaazing.com/echo</a>
 <a>wss://echo.websocket.org</a>
        </div>
    </section>
    <section class="operations operations--inactive">
        <h2>Operations</h2>
        <div class="operation operation--message">
            <label>
                <h3>Send message</h3>
                <input type="text" name="message">
                <small>Press Enter to submit</small>
            </label>
        </div>
    </section>
    <script>
        var log = function() {
            var args = Array.prototype.slice.call(arguments);
            var type = args.shift();
            const container = document.querySelector('.log');
            container.innerHTML += '<em>' + type + '</em> ' + args.join(' ') + '\n';
            container.scrollTop = container.scrollHeight;
            console.log(type, args);
        };

        var socket;
        var connect = function(server) {
            try {
                log('\n—————\n');
                log('STATUS', 'Connecting to <em>' + server + '</em>...');
                document.querySelector('.operations').classList.add('operations--inactive');
                socket = new WebSocket(server);
                socket.onerror = function(event) { log('ERROR', event, '(Open developer tools for more details)'); };
                socket.onopen = function(event) {
                    log('OPEN', event, '(Open developer tools for more details)');
                    document.querySelector('.operations').classList.remove('operations--inactive');
                };
                socket.onmessage = function(event) { log('MESSAGE <-', event.data); };
            } catch (e) {
                log('EXCEPTION', e);
            }
        };

        document.querySelector('button').addEventListener('click', function(event) {
            event.preventDefault();
            connect(document.querySelector('input[name=server]').value);
        });

        document.querySelector('.console .log').addEventListener('click', function(event) {
            event.preventDefault();
            if (event.target.nodeName === 'A') {
                connect(event.target.innerText);
            }
        });

        document.querySelector('input[name=message]').addEventListener('keyup', function(event) {
            if (event.key !== 'Enter') {
                return;
            }

            var message = event.target.value;
            event.target.value = '';
            log('MESSAGE ->', message);
            socket.send(message);
        });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>WebSocket Logger</title>
	<link rel="stylesheet" href="https://dhayab.github.io/luxafor-webusb/demo.css">
	<style>
	.console .log a {
	color: white;
	text-decoration: underline;
	cursor: pointer;
	}

	.console .log a:hover {
	color: lightgray;
	}

	.console .log em {
	font-style: normal;
	color: pink;
	}
	</style>
	</head>

	<body>
	<header>
	<h1>WebSocket Logger</h1>
	<input type="url" name="server">
	<button>Connect</button>
	</header>
	<section class="console">
	<h2>Output</h2>
	<div class="log">Connect to a server or choose from one of the following:
	<a>ws://127.0.0.1:19488</a>
	<a>wss://local.easytransfer.cloud:19487</a>
	<a>wss://demos.kaazing.com/echo</a>
	<a>wss://echo.websocket.org</a>
	</div>
	</section>
	<section class="operations operations--inactive">
	<h2>Operations</h2>
	<div class="operation operation--message">
	<label>
	<h3>Send message</h3>
	<input type="text" name="message">
	<small>Press Enter to submit</small>
	</label>
	</div>
	</section>
	<script>
	var log = function() {
	var args = Array.prototype.slice.call(arguments);
	var type = args.shift();
	const container = document.querySelector('.log');
	container.innerHTML += '<em>' + type + '</em> ' + args.join(' ') + '\n';
	container.scrollTop = container.scrollHeight;
	console.log(type, args);
	};

	var socket;
	var connect = function(server) {
	try {
	log('\n—————\n');
	log('STATUS', 'Connecting to <em>' + server + '</em>...');
	document.querySelector('.operations').classList.add('operations--inactive');
	socket = new WebSocket(server);
	socket.onerror = function(event) { log('ERROR', event, '(Open developer tools for more details)'); };
	socket.onopen = function(event) {
	log('OPEN', event, '(Open developer tools for more details)');
	document.querySelector('.operations').classList.remove('operations--inactive');
	};
	socket.onmessage = function(event) { log('MESSAGE <-', event.data); };
	} catch (e) {
	log('EXCEPTION', e);
	}
	};

	document.querySelector('button').addEventListener('click', function(event) {
	event.preventDefault();
	connect(document.querySelector('input[name=server]').value);
	});

	document.querySelector('.console .log').addEventListener('click', function(event) {
	event.preventDefault();
	if (event.target.nodeName === 'A') {
	connect(event.target.innerText);
	}
	});

	document.querySelector('input[name=message]').addEventListener('keyup', function(event) {
	if (event.key !== 'Enter') {
	return;
	}

	var message = event.target.value;
	event.target.value = '';
	log('MESSAGE ->', message);
	socket.send(message);
	});
	</script>
	</body>

	</html>