umgeher/cowboy
0
Fork 0
mirror of https://github.com/ninenines/cowboy.git synced 2025-07-14 12:20:24 +00:00
Code Issues Wiki Activity

Remove jQuery, cleanup Websocket example a bit

Browse source
This commit is contained in:
Loïc Hoguin 2020-05-23 11:00:17 +02:00
parent 8d5628c5f1
commit 3eec447960
No known key found for this signature in database
GPG key ID: 8A9DF795F6FED764
2 changed files with 101 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

163
examples/websocket/priv/index.html
View file

@ -1,113 +1,110 @@
<html> <!DOCTYPE html>
<head> <html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <head>
<meta charset="utf-8"/>
<title>Websocket client</title> <title>Websocket client</title>
<script src="/static/jquery.min.js"></script> </head>
<script type="text/javascript">
var websocket; <body>
$(document).ready(init);
function init() { <header>
$('#server').val("ws://" + window.location.host + "/websocket"); <h1>Websocket client</h1>
if(!("WebSocket" in window)){ <div id="status"></div>
$('#status').append('<p><span style="color: red;">websockets are not supported </span></p>'); </header>
$("#navigation").hide();
} else {
$('#status').append('<p><span style="color: green;">websockets are supported </span></p>');
connect();
};
$("#connected").hide();
$("#content").hide();
};
function connect() <nav>
{ <div id="connecting">
wsHost = $("#server").val() <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); websocket = new WebSocket(wsHost);
showScreen('<b>Connecting to: ' + wsHost + '</b>'); showScreen('<b>Connecting to: ' + wsHost + '</b>');
websocket.onopen = function(evt) { onOpen(evt) }; websocket.onopen = function(evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) }; websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) }; websocket.onerror = function(evt) { onError(evt) };
}; };
function disconnect() { function disconnect() {
websocket.close(); websocket.close();
}; };
function toggle_connection(){ function toggle_connection(){
if(websocket.readyState == websocket.OPEN){ if (websocket && websocket.readyState == websocket.OPEN) {
disconnect(); disconnect();
} else { } else {
connect(); connect();
}; };
}; };
function sendTxt() { function sendTxt() {
if(websocket.readyState == websocket.OPEN){ if (websocket.readyState == websocket.OPEN) {
txt = $("#send_txt").val(); var msg = message.value;
websocket.send(txt); websocket.send(msg);
showScreen('sending: ' + txt); showScreen('sending: ' + msg);
} else { } else {
showScreen('websocket is not connected'); showScreen('websocket is not connected');
}; };
}; };
function onOpen(evt) { function onOpen(evt) {
showScreen('<span style="color: green;">CONNECTED </span>'); showScreen('<span style="color: green;">CONNECTED </span>');
$("#connected").fadeIn('slow'); connecting.style.display = "none";
$("#content").fadeIn('slow'); connected.style.display = "";
}; content.style.display = "";
};
function onClose(evt) { function onClose(evt) {
showScreen('<span style="color: red;">DISCONNECTED </span>'); showScreen('<span style="color: red;">DISCONNECTED</span>');
}; };
function onMessage(evt) { function onMessage(evt) {
showScreen('<span style="color: blue;">RESPONSE: ' + evt.data+ '</span>'); showScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
}; };
function onError(evt) { function onError(evt) {
showScreen('<span style="color: red;">ERROR: ' + evt.data+ '</span>'); showScreen('<span style="color: red;">ERROR: ' + evt.data + '</span>');
}; };
function showScreen(txt) { function showScreen(html) {
$('#output').prepend('<p>' + txt + '</p>'); var el = document.createElement("p");
}; el.innerHTML = html;
output.insertBefore(el, output.firstChild);
};
function clearScreen() function clearScreen() {
{ output.innerHTML = "";
$('#output').html(""); };
};
</script>
</head>
<body> </script>
<div id="header"> </body>
<h1>Websocket client</h1>
<div id="status"></div>
</div>
<div id="navigation">
<p id="connecting">
<input type='text' id="server" value=""></input>
<button type="button" onclick="toggle_connection()">connection</button>
</p>
<div id="connected">
<p>
<input type='text' id="send_txt" value=></input>
<button type="button" onclick="sendTxt();">send</button>
</p>
</div>
<div id="content">
<button id="clear" onclick="clearScreen()" >Clear text</button>
<div id="output"></div>
</div>
</div>
</body>
</html> </html>

2
examples/websocket/priv/static/jquery.min.js vendored
View file

File diff suppressed because one or more lines are too long