@@ -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.ws.send(serialized);
+ this.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.ws.send(serialized);
+ this.send(serialized);
});
$(`${this.type}-btn-get`).addEventListener('click', event => {
event.preventDefault();
- const serialized = this.getSerializer($(`${this.type}-set-key`).value);
- this.log("sent", serialized);
- this.ws.send(serialized);
+ const serialized = this.getSerializer($(`${this.type}-get-key`).value);
+ this.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}-set-key`).disabled = !connected;
- $(`${this.type}-set-value`).disabled = !connected;
- $(`${this.type}-btn-set`).disabled = !connected;
- $(`${this.type}-get-key`).disabled = !connected;
- $(`${this.type}-btn-get`).disabled = !connected;
- $(`${this.type}-btn-clear`).disabled = !connected;
+ $(`${this.type}-btn-ping`).disabled = !connected || this.subscribed;
+ $(`${this.type}-set-key`).disabled = !connected || this.subscribed;
+ $(`${this.type}-set-value`).disabled = !connected || this.subscribed;
+ $(`${this.type}-btn-set`).disabled = !connected || this.subscribed;
+ $(`${this.type}-get-key`).disabled = !connected || this.subscribed;
+ $(`${this.type}-btn-get`).disabled = !connected || this.subscribed;
+ $(`${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`);
});