forked from boostorg/beast
60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Boost.Beast WebSocket Chat Client</title>
|
|
</head>
|
|
<body>
|
|
<h1>Boost.Beast WebSocket Chat Client</h1>
|
|
<p>
|
|
<a href="http://www.boost.org/libs/beast">Boost.Beast</a>
|
|
<a href="http://www.boost.org/libs/beast/example/websocket/server/chat-multi">Source Code</a>
|
|
</p>
|
|
Server URI: <input class="draw-border" id="uri" size="47" value="ws://localhost:8080" style="margin-bottom: 5px;">
|
|
<button class="echo-button" id="connect">Connect</button>
|
|
<button class="echo-button" id="disconnect">Disconnect</button><br>
|
|
Your Name: <input class="draw-border" id="userName" size=47 style="margin-bottom: 5px;"><br>
|
|
|
|
<pre id="messages" style="width: 600px; height: 400px; border: solid 1px #cccccc; margin-bottom: 5px;"></pre>
|
|
|
|
<div style="margin-bottom: 5px;">
|
|
Message<br>
|
|
<input class="draw-border" id="sendMessage" size="74" value="">
|
|
<button class="echo-button" id="send">Send</button>
|
|
</div>
|
|
<script>
|
|
var ws = null;
|
|
|
|
connect.onclick = function() {
|
|
ws = new WebSocket(uri.value);
|
|
ws.onopen = function(ev) {
|
|
messages.innerText += "[connection opened]\n";
|
|
};
|
|
ws.onclose = function(ev) {
|
|
messages.innerText += "[connection closed]\n";
|
|
};
|
|
ws.onmessage = function(ev) {
|
|
messages.innerText += ev.data + "\n";
|
|
};
|
|
ws.onerror = function(ev) {
|
|
messages.innerText += "[error]\n";
|
|
console.log(ev);
|
|
};
|
|
};
|
|
disconnect.onclick = function() {
|
|
ws.close();
|
|
};
|
|
send.onclick = function() {
|
|
ws.send(userName.value + ": " + sendMessage.value);
|
|
sendMessage.value = "";
|
|
};
|
|
sendMessage.onkeyup = function(ev) {
|
|
ev.preventDefault();
|
|
if (event.keyCode === 13) {
|
|
send.click();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|