Add "PING" button to HTML demo

tests/websocket.html

@@ -55,6 +55,14 @@
 						</div>
 					</fieldset>
 				</form>
+				<form class="pure-form">
+					<fieldset>
+						<div class="pure-g">
+							<div class="pure-u-2-3">&nbsp;</div>
+							<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="json-btn-ping">Ping</button></div>
+						</div>
+					</fieldset>
+				</form>
 				<form class="pure-form">
 					<fieldset>
 						<div class="pure-g">
@@ -95,6 +103,14 @@
 						</div>
 					</fieldset>
 				</form>
+				<form class="pure-form">
+					<fieldset>
+						<div class="pure-g">
+							<div class="pure-u-2-3">&nbsp;</div>
+							<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="raw-btn-ping">Ping</button></div>
+						</div>
+					</fieldset>
+				</form>
 				<form class="pure-form">
 					<fieldset>
 						<div class="pure-g">
@@ -132,8 +148,9 @@ const host = "127.0.0.1";
 const port = 7379;
 
 class Client {
-	constructor(type, getSerializer, setSerializer) {
+	constructor(type, pingSerializer, getSerializer, setSerializer) {
 		this.type = type;
+		this.pingSerializer = pingSerializer;
 		this.getSerializer = getSerializer;
 		this.setSerializer = setSerializer;
 		this.ws = null;
@@ -158,6 +175,13 @@ class Client {
 			};
 		});
 
+		$(`${this.type}-btn-ping`).addEventListener('click', event => {
+			event.preventDefault();
+			const serialized = this.pingSerializer();
+			this.log("sent", serialized);
+			this.ws.send(serialized);
+		});
+
 		$(`${this.type}-btn-set`).addEventListener('click', event => {
 			event.preventDefault();
 			const serialized = this.setSerializer($(`${this.type}-set-key`).value, $(`${this.type}-set-value`).value);
@@ -180,6 +204,7 @@ class Client {
 
 	setConnectedState(connected) {
 		$(`${this.type}-btn-connect`).disabled = connected;
+		$(`${this.type}-btn-ping`).disabled = !connected;
 		$(`${this.type}-set-key`).disabled = !connected;
 		$(`${this.type}-set-value`).disabled = !connected;
 		$(`${this.type}-btn-set`).disabled = !connected;
@@ -205,10 +230,12 @@ class Client {
 
 addEventListener("DOMContentLoaded", () => {
 	const jsonClient = new Client('json',
+		() => JSON.stringify(['PING']),
 		(key) => JSON.stringify(['GET', key]),
 		(key, value) => JSON.stringify(['SET', key, value]));
 
 	const rawClient = new Client('raw',
+		() => '*1\r\n$4\r\nPING\r\n',
 		(key) => `*2\r\n$3\r\nGET\r\n$${key.length}\r\n${key}\r\n`,
 		(key, value) =>  `*3\r\n$3\r\nSET\r\n$${key.length}\r\n${key}\r\n$${value.length}\r\n${value}\r\n`);
 });