Cowboy WebSocket Example

2025-06-16 11:24:19 +00:00 · 2022-04-18 18:57:01 -03:00
commit cb7be7880f
12 changed files with 8369 additions and 0 deletions
--- a/priv/index.html
+++ b/priv/index.html
@ -0,0 +1,111 @@
+<!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>