d2-ui
Version:
97 lines (83 loc) • 2.86 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>http-proxy-middleware - WebSocket example</title>
<style>
fieldset {
border: 0;
}
label {
display: inline-block;
width: 5em;
vertical-align: top;
}
code {
background-color: #eee;
}
</style>
</head>
<body>
<h2>WebSocket demo</h2>
<p>
Proxy <code>ws://localhost:3000</code> to <code>ws://echo.websocket.org</code>
</p>
<fieldset id="configuration">
<p>
<label for="location">location:</label>
<input id="location" type="text" value="ws://localhost:3000">
<button id="connect">connect</button>
<button id="disconnect" disabled="disabled">disconnect</button>
</p>
</fieldset>
<fieldset id="messaging" disabled="disabled">
<p>
<label for="message">message:</label>
<input type="text" id="message" value="Hello WebSocket">
<button id="send">send</button>
</p>
<p>
<label for="logger">log:</label>
<textarea id="logger" cols="30" rows="10"></textarea>
</p>
</fieldset>
<script>
window.onload = function () {
// elements
var configuration = document.getElementById('configuration');
var location = document.getElementById('location');
var connect = document.getElementById('connect');
var disconnect = document.getElementById('disconnect');
var messaging = document.getElementById('messaging');
var message = document.getElementById('message');
var send = document.getElementById('send');
var logger = document.getElementById('logger');
// ws
var socket;
connect.onclick = function () {
connect.disabled = true;
disconnect.disabled = false;
messaging.disabled = false;
socket = new WebSocket(location.value);
socket.onopen = function () { log('CONNECTED'); };
socket.onclose = function () { log('DISCONNECTED'); };
socket.onerror = function () { log('SOCKET ERROR OCCURED'); };
socket.onmessage = function (msg) { log('RECEIVED:' + msg.data); };
}
disconnect.onclick = function () {
connect.disabled = false;
disconnect.disabled = true;
messaging.disabled = true;
socket.close();
}
send.onclick = function () {
log('SEND: ' + message.value);
socket.send(message.value);
};
function log (message) {
logger.value = logger.value + message + '\n'
}
}
</script>
</body>
</html>