mirror of
https://github.com/guilhermewerner/erlang-ws
synced 2025-06-20 21:14:34 +00:00
111 lines
3.2 KiB
HTML
111 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Websocket client</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Websocket client</h1>
|
|
<div id="status"></div>
|
|
</header>
|
|
|
|
<nav>
|
|
<div id="connecting">
|
|
<input type='text' id="server" value=""></input>
|
|
<button type="button" onclick="toggle_connection()">connection</button>
|
|
</div>
|
|
|
|
<div id="connected">
|
|
<input type='text' id="message" value=""></input>
|
|
<button type="button" onclick="sendTxt();">send</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main id="content">
|
|
<button id="clear" onclick="clearScreen()">Clear text</button>
|
|
<div id="output"></div>
|
|
</main>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var websocket;
|
|
var server = document.getElementById("server");
|
|
var message = document.getElementById("message");
|
|
var connecting = document.getElementById("connecting");
|
|
var connected = document.getElementById("connected");
|
|
var content = document.getElementById("content");
|
|
var output = document.getElementById("output");
|
|
|
|
server.value = "ws://" + window.location.host + "/websocket";
|
|
connected.style.display = "none";
|
|
content.style.display = "none";
|
|
|
|
function connect() {
|
|
wsHost = server.value;
|
|
websocket = new WebSocket(wsHost);
|
|
showScreen('<b>Connecting to: ' + wsHost + '</b>');
|
|
websocket.onopen = function (evt) { onOpen(evt) };
|
|
websocket.onclose = function (evt) { onClose(evt) };
|
|
websocket.onmessage = function (evt) { onMessage(evt) };
|
|
websocket.onerror = function (evt) { onError(evt) };
|
|
};
|
|
|
|
function disconnect() {
|
|
websocket.close();
|
|
};
|
|
|
|
function toggle_connection() {
|
|
if (websocket && websocket.readyState == websocket.OPEN) {
|
|
disconnect();
|
|
} else {
|
|
connect();
|
|
};
|
|
};
|
|
|
|
function sendTxt() {
|
|
if (websocket.readyState == websocket.OPEN) {
|
|
var msg = message.value;
|
|
websocket.send(msg);
|
|
showScreen('sending: ' + msg);
|
|
} else {
|
|
showScreen('websocket is not connected');
|
|
};
|
|
};
|
|
|
|
function onOpen(evt) {
|
|
showScreen('<span style="color: green;">CONNECTED </span>');
|
|
connecting.style.display = "none";
|
|
connected.style.display = "";
|
|
content.style.display = "";
|
|
};
|
|
|
|
function onClose(evt) {
|
|
showScreen('<span style="color: red;">DISCONNECTED</span>');
|
|
};
|
|
|
|
function onMessage(evt) {
|
|
showScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
|
|
};
|
|
|
|
function onError(evt) {
|
|
showScreen('<span style="color: red;">ERROR: ' + evt.data + '</span>');
|
|
};
|
|
|
|
function showScreen(html) {
|
|
var el = document.createElement("p");
|
|
el.innerHTML = html;
|
|
output.insertBefore(el, output.firstChild);
|
|
};
|
|
|
|
function clearScreen() {
|
|
output.innerHTML = "";
|
|
};
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |