Add pub/sub test in HTML demo

1. Add publish button with channel and message
2. Add subscribe button with channel
3. Change "Clear logs" button to appear when logs are visible

tests/websocket.html

@@ -101,6 +101,26 @@ function installBlock(title, type) {
 		</fieldset>
 	</form>
 
+	<form class="pure-form">
+		<fieldset>
+			<div class="pure-g">
+				<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="channel name" id="$type-pub-channel" value="channel-0" /></div>
+				<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="message value" id="$type-pub-message" value="message-0" /></div>
+				<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="$type-btn-pub">PUBLISH</button></div>
+			</div>
+		</fieldset>
+	</form>
+
+	<form class="pure-form">
+		<fieldset>
+			<div class="pure-g">
+				<div class="pure-u-1-3">&nbsp;</div>
+				<div class="pure-u-1-3"><input disabled class="pure-u-23-24" type="text" placeholder="channel" id="$type-sub-channel" value="channel-0" /></div>
+				<div class="pure-u-1-3"><button disabled type="submit" class="pure-u-23-24 pure-button pure-button-primary" id="$type-btn-sub">SUBSCRIBE</button></div>
+			</div>
+		</fieldset>
+	</form>
+
 	<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="$type-btn-clear">Clear logs</button></div>
@@ -113,17 +133,23 @@ function installBlock(title, type) {
 
 
 class Client {
-	constructor(type, pingSerializer, getSerializer, setSerializer) {
+	constructor(type, pingSerializer, getSerializer, setSerializer, pubSerializer, subSerializer) {
 		this.type = type;
 		this.pingSerializer = pingSerializer;
 		this.getSerializer = getSerializer;
 		this.setSerializer = setSerializer;
+		this.pubSerializer = pubSerializer;
+		this.subSerializer = subSerializer;
 		this.ws = null;
+		this.connected = false;
+		this.subscribed = false;
+		this.logCount = 0;
 
 		$(`${this.type}-btn-connect`).addEventListener('click', event => {
 			event.preventDefault();
 			console.log('Connecting...');
-			this.ws = new WebSocket(`ws://${ host }:${ port }/.${ this.type }`);
+			this.ws = new WebSocket(`ws://${host}:${port}/.${this.type}`);
+			window.ws = this.ws;
 			this.ws.onopen = event => {
 				console.log('Connected');
 				this.setConnectedState(true);
@@ -135,50 +161,83 @@ class Client {
 			};
 
 			this.ws.onclose = event => {
-				$(`${this.type}-btn-connect`).disabled = false;
+				console.log('ON CLOSE')
+				$(`${this.type}-btn-connect`).innerText = 'Connect';
 				this.setConnectedState(false);
+				this.subscribed = false;
 			};
 		});
 
 		$(`${this.type}-btn-ping`).addEventListener('click', event => {
 			event.preventDefault();
 			const serialized = this.pingSerializer();
-			this.log("sent", serialized);
+			this.send(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);
-			this.log("sent", serialized);
+			this.send(serialized);
-			this.ws.send(serialized);
 		});
 
 		$(`${this.type}-btn-get`).addEventListener('click', event => {
 			event.preventDefault();
-			const serialized = this.getSerializer($(`${this.type}-set-key`).value);
+			const serialized = this.getSerializer($(`${this.type}-get-key`).value);
-			this.log("sent", serialized);
+			this.send(serialized);
-			this.ws.send(serialized);
+		});
+
+		$(`${this.type}-btn-pub`).addEventListener('click', event => {
+			event.preventDefault();
+			const serialized = this.pubSerializer($(`${this.type}-pub-channel`).value, $(`${this.type}-pub-message`).value);
+			this.send(serialized);
+		});
+
+		$(`${this.type}-btn-sub`).addEventListener('click', event => {
+			event.preventDefault();
+			const serialized = this.subSerializer($(`${this.type}-sub-channel`).value);
+			try {
+				this.send(serialized);
+				this.subscribed = true;
+				this.setConnectedState(true);
+			} catch (e) {
+			}
 		});
 
 		$(`${this.type}-btn-clear`).addEventListener('click', event => {
 			event.preventDefault();
 			$(`${this.type}-log`).innerText = "";
+			this.logCount = 0;
+			this.updateLogButton();
 		});
 	}
 
+	send(serialized) {
+		this.log("sent", serialized);
+		this.ws.send(serialized);
+	}
+
 	setConnectedState(connected) {
+		this.connected = connected;
 		$(`${this.type}-btn-connect`).disabled = connected;
-		$(`${this.type}-btn-ping`).disabled = !connected;
+		$(`${this.type}-btn-ping`).disabled = !connected || this.subscribed;
-		$(`${this.type}-set-key`).disabled = !connected;
+		$(`${this.type}-set-key`).disabled = !connected || this.subscribed;
-		$(`${this.type}-set-value`).disabled = !connected;
+		$(`${this.type}-set-value`).disabled = !connected || this.subscribed;
-		$(`${this.type}-btn-set`).disabled = !connected;
+		$(`${this.type}-btn-set`).disabled = !connected || this.subscribed;
-		$(`${this.type}-get-key`).disabled = !connected;
+		$(`${this.type}-get-key`).disabled = !connected || this.subscribed;
-		$(`${this.type}-btn-get`).disabled = !connected;
+		$(`${this.type}-btn-get`).disabled = !connected || this.subscribed;
-		$(`${this.type}-btn-clear`).disabled = !connected;
+		$(`${this.type}-pub-channel`).disabled = !connected || this.subscribed;
+		$(`${this.type}-pub-message`).disabled = !connected || this.subscribed;
+		$(`${this.type}-btn-pub`).disabled = !connected || this.subscribed;
+		$(`${this.type}-sub-channel`).disabled = !connected || this.subscribed;
+		$(`${this.type}-btn-sub`).disabled = !connected || this.subscribed;
+
 		$(`${this.type}-state`).innerText = `State: ${connected ? 'Connected' : 'Disconnected'}`;
 	}
 
+	updateLogButton() {
+		$(`${this.type}-btn-clear`).disabled = this.logCount === 0;
+	}
+
 	log(dir, msg) {
 		const id = `${this.type}-log`;
 
@@ -190,6 +249,8 @@ class Client {
 		contents.setAttribute("class", dir);
 		contents.innerHTML = msg;
 		$(id).appendChild(contents);
+		this.logCount++;
+		this.updateLogButton();
 	}
 }
 
@@ -200,12 +261,16 @@ addEventListener("DOMContentLoaded", () => {
 	const jsonClient = new Client('json',
 		() => JSON.stringify(['PING']),
 		(key) => JSON.stringify(['GET', key]),
-		(key, value) => JSON.stringify(['SET', key, value]));
+		(key, value) => JSON.stringify(['SET', key, value]),
+		(channel, message) => JSON.stringify(['PUBLISH', channel, message]),
+		(channel) => JSON.stringify(['SUBSCRIBE', channel]));
 
 	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`);
+		(key, value) =>  `*3\r\n$3\r\nSET\r\n$${key.length}\r\n${key}\r\n$${value.length}\r\n${value}\r\n`,
+		(channel, message) =>  `*3\r\n$7\r\nPUBLISH\r\n$${channel.length}\r\n${channel}\r\n$${message.length}\r\n${message}\r\n`,
+		(channel) =>  `*2\r\n$9\r\nSUBSCRIBE\r\n$${channel.length}\r\n${channel}\r\n`);
 });
 
 		</script>