<!DOCTYPE html >
<meta charset="utf-8" />
<html >
<head >
<script language="javascript" type="text/javascript" >
var socket = null;
function log(msg) {
const logElem = document.getElementById("log" );
const p = document.createElement("p" );
p.textContent = msg;
logElem.appendChild(p);
logElem.scroll(0, logElem.scrollHeight);
}
function connect() {
disconnect();
socket = new WebSocket(document.getElementById("wsUri" ).value);
log("Connecting..." );
socket.addEventListener("open" , function() {
log("Connected." );
update_ui();
});
socket.addEventListener("message" , function(e) {
log("Received: " + e.data);
});
socket.addEventListener("close" , function() {
log("Disconnected." );
socket = null;
update_ui();
});
}
function disconnect() {
if (socket !== null) {
log("Disconnecting..." );
socket.close();
socket = null;
update_ui();
}
}
function update_ui() {
const status = document.getElementById("status" );
const connect = document.getElementById("connect" );
if (socket === null) {
status.innerText = "disconnected" ;
connect.innerText = "Connect" ;
} else {
status.innerText = "connected (" + socket.protocol + ")" ;
connect.innerText = "Disconnect" ;
}
}
window.addEventListener("DOMContentLoaded" , function() {
const protocol = (window.location.protocol=="https:" && "wss://" || "ws://" );
document.getElementById("wsUri" ).value = protocol + (window.location.host || "localhost:8080" );
document.getElementById("connect" ).addEventListener("click" , function() {
if (socket == null) {
connect();
} else {
disconnect();
}
update_ui();
return false;
});
document.getElementById("send" ).addEventListener("click" , function() {
const text = document.getElementById("text" );
log("Sending: " + text.value);
socket.send(text.value);
text.value = "" ;
text.focus();
return false;
});
document.getElementById("text" ).addEventListener("keyup" , function(e) {
if (e.keyCode === 13) {
document.getElementById("send" ).click();
return false;
}
});
});
</script >
</head >
<body >
<h3>Chat!</h3>
<div >
<input id="wsUri" type="text" />
<button id="connect" >Connect</button > | Status:
<span id="status" >disconnected</span >
</div >
<div id="log"
style ="width:20em;height:15em;overflow:auto;border:1px solid black" >
</div >
<form id="chatform" onsubmit="return false;" >
<input id="text" type="text" />
<input id="send" type="button" value="Send" />
</form >
</body >
</html >
quality 99%
¤ Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.0.34Bemerkung:
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland