mirror of
https://github.com/guilhermewerner/erlang-ws
synced 2025-06-15 19:04:19 +00:00
110 lines
3.2 KiB
HTML
110 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Erlang WebSocket</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Erlang WebSocket</h1>
|
|
<div id="status"></div>
|
|
</header>
|
|
|
|
<nav>
|
|
<div id="connecting">
|
|
<input type='text' id="server" value=""></input>
|
|
<button type="button" onclick="toggle_connection()">Conectar</button>
|
|
</div>
|
|
|
|
<div id="connected">
|
|
<input type='text' id="message" value=""></input>
|
|
<button type="button" onclick="sendTxt();">Enviar</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main id="content">
|
|
<button id="clear" onclick="clearScreen()">Limpar</button>
|
|
<div id="output"></div>
|
|
</main>
|
|
|
|
<script type="text/javascript">
|
|
let websocket;
|
|
let server = document.getElementById("server");
|
|
let message = document.getElementById("message");
|
|
let connecting = document.getElementById("connecting");
|
|
let connected = document.getElementById("connected");
|
|
let content = document.getElementById("content");
|
|
let 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('<span><b>CLIENT</b>: ' + msg + '</span>');
|
|
} else {
|
|
showScreen('websocket is not connected');
|
|
};
|
|
};
|
|
|
|
function onOpen(evt) {
|
|
showScreen('<span><b>SERVER</b>: Conectado</span>');
|
|
connecting.style.display = "none";
|
|
connected.style.display = "";
|
|
content.style.display = "";
|
|
};
|
|
|
|
function onClose(evt) {
|
|
showScreen('<span><b>SERVER</b>: Desconectado</span>');
|
|
};
|
|
|
|
function onMessage(evt) {
|
|
showScreen('<span><b>SERVER</b>: ' + 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> |