56b5f8043f
It so happened that the code works, because both variables exist, but the code was not clean. close #1620
61 lines
1.9 KiB
HTML
61 lines
1.9 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; white-space: normal; overflow: auto; 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;
|
|
function showMessage(msg) {
|
|
messages.innerText += msg + "\n";
|
|
messages.scrollTop = messages.scrollHeight - messages.clientHeight;
|
|
};
|
|
connect.onclick = function() {
|
|
ws = new WebSocket(uri.value);
|
|
ws.onopen = function(ev) {
|
|
showMessage("[connection opened]");
|
|
};
|
|
ws.onclose = function(ev) {
|
|
showMessage("[connection closed]");
|
|
};
|
|
ws.onmessage = function(ev) {
|
|
showMessage(ev.data);
|
|
};
|
|
ws.onerror = function(ev) {
|
|
showMessage("[error]");
|
|
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 (ev.keyCode === 13) {
|
|
send.click();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|