|
|
@ -101,6 +101,26 @@ function installBlock(title, type) {
|
|
|
|
</fieldset>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</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"> </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-g">
|
|
|
|
<div class="pure-u-2-3"> </div>
|
|
|
|
<div class="pure-u-2-3"> </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>
|
|
|
|
<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 {
|
|
|
|
class Client {
|
|
|
|
constructor(type, pingSerializer, getSerializer, setSerializer) {
|
|
|
|
constructor(type, pingSerializer, getSerializer, setSerializer, pubSerializer, subSerializer) {
|
|
|
|
this.type = type;
|
|
|
|
this.type = type;
|
|
|
|
this.pingSerializer = pingSerializer;
|
|
|
|
this.pingSerializer = pingSerializer;
|
|
|
|
this.getSerializer = getSerializer;
|
|
|
|
this.getSerializer = getSerializer;
|
|
|
|
this.setSerializer = setSerializer;
|
|
|
|
this.setSerializer = setSerializer;
|
|
|
|
|
|
|
|
this.pubSerializer = pubSerializer;
|
|
|
|
|
|
|
|
this.subSerializer = subSerializer;
|
|
|
|
this.ws = null;
|
|
|
|
this.ws = null;
|
|
|
|
|
|
|
|
this.connected = false;
|
|
|
|
|
|
|
|
this.subscribed = false;
|
|
|
|
|
|
|
|
this.logCount = 0;
|
|
|
|
|
|
|
|
|
|
|
|
$(`${this.type}-btn-connect`).addEventListener('click', event => {
|
|
|
|
$(`${this.type}-btn-connect`).addEventListener('click', event => {
|
|
|
|
event.preventDefault();
|
|
|
|
event.preventDefault();
|
|
|
|
console.log('Connecting...');
|
|
|
|
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 => {
|
|
|
|
this.ws.onopen = event => {
|
|
|
|
console.log('Connected');
|
|
|
|
console.log('Connected');
|
|
|
|
this.setConnectedState(true);
|
|
|
|
this.setConnectedState(true);
|
|
|
@ -135,50 +161,83 @@ class Client {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
this.ws.onclose = event => {
|
|
|
|
this.ws.onclose = event => {
|
|
|
|
$(`${this.type}-btn-connect`).disabled = false;
|
|
|
|
console.log('ON CLOSE')
|
|
|
|
|
|
|
|
$(`${this.type}-btn-connect`).innerText = 'Connect';
|
|
|
|
this.setConnectedState(false);
|
|
|
|
this.setConnectedState(false);
|
|
|
|
|
|
|
|
this.subscribed = false;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
$(`${this.type}-btn-ping`).addEventListener('click', event => {
|
|
|
|
$(`${this.type}-btn-ping`).addEventListener('click', event => {
|
|
|
|
event.preventDefault();
|
|
|
|
event.preventDefault();
|
|
|
|
const serialized = this.pingSerializer();
|
|
|
|
const serialized = this.pingSerializer();
|
|
|
|
this.log("sent", serialized);
|
|
|
|
this.send(serialized);
|
|
|
|
this.ws.send(serialized);
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
$(`${this.type}-btn-set`).addEventListener('click', event => {
|
|
|
|
$(`${this.type}-btn-set`).addEventListener('click', event => {
|
|
|
|
event.preventDefault();
|
|
|
|
event.preventDefault();
|
|
|
|
const serialized = this.setSerializer($(`${this.type}-set-key`).value, $(`${this.type}-set-value`).value);
|
|
|
|
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 => {
|
|
|
|
$(`${this.type}-btn-get`).addEventListener('click', event => {
|
|
|
|
event.preventDefault();
|
|
|
|
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 => {
|
|
|
|
$(`${this.type}-btn-clear`).addEventListener('click', event => {
|
|
|
|
event.preventDefault();
|
|
|
|
event.preventDefault();
|
|
|
|
$(`${this.type}-log`).innerText = "";
|
|
|
|
$(`${this.type}-log`).innerText = "";
|
|
|
|
|
|
|
|
this.logCount = 0;
|
|
|
|
|
|
|
|
this.updateLogButton();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
send(serialized) {
|
|
|
|
|
|
|
|
this.log("sent", serialized);
|
|
|
|
|
|
|
|
this.ws.send(serialized);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
setConnectedState(connected) {
|
|
|
|
setConnectedState(connected) {
|
|
|
|
|
|
|
|
this.connected = connected;
|
|
|
|
$(`${this.type}-btn-connect`).disabled = 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'}`;
|
|
|
|
$(`${this.type}-state`).innerText = `State: ${connected ? 'Connected' : 'Disconnected'}`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updateLogButton() {
|
|
|
|
|
|
|
|
$(`${this.type}-btn-clear`).disabled = this.logCount === 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
log(dir, msg) {
|
|
|
|
log(dir, msg) {
|
|
|
|
const id = `${this.type}-log`;
|
|
|
|
const id = `${this.type}-log`;
|
|
|
|
|
|
|
|
|
|
|
@ -190,6 +249,8 @@ class Client {
|
|
|
|
contents.setAttribute("class", dir);
|
|
|
|
contents.setAttribute("class", dir);
|
|
|
|
contents.innerHTML = msg;
|
|
|
|
contents.innerHTML = msg;
|
|
|
|
$(id).appendChild(contents);
|
|
|
|
$(id).appendChild(contents);
|
|
|
|
|
|
|
|
this.logCount++;
|
|
|
|
|
|
|
|
this.updateLogButton();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -200,12 +261,16 @@ addEventListener("DOMContentLoaded", () => {
|
|
|
|
const jsonClient = new Client('json',
|
|
|
|
const jsonClient = new Client('json',
|
|
|
|
() => JSON.stringify(['PING']),
|
|
|
|
() => JSON.stringify(['PING']),
|
|
|
|
(key) => JSON.stringify(['GET', key]),
|
|
|
|
(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',
|
|
|
|
const rawClient = new Client('raw',
|
|
|
|
() => '*1\r\n$4\r\nPING\r\n',
|
|
|
|
() => '*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) => `*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>
|
|
|
|
</script>
|
|
|
|