2021-08-01 22:42:34 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2021-10-26 01:09:47 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>WebSocket Chat</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>WebSocket Chat Example</h1>
|
|
|
|
|
|
|
|
|
|
<input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
|
|
|
|
|
<button id="join-chat" type="button">Join Chat</button>
|
|
|
|
|
<textarea id="chat" style="display:block; width:600px; height:400px; box-sizing: border-box" cols="30" rows="10"></textarea>
|
|
|
|
|
<input id="input" style="display:block; width:600px; box-sizing: border-box" type="text" placeholder="chat">
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const username = document.querySelector("#username");
|
|
|
|
|
const join_btn = document.querySelector("#join-chat");
|
|
|
|
|
const textarea = document.querySelector("#chat");
|
|
|
|
|
const input = document.querySelector("#input");
|
|
|
|
|
|
|
|
|
|
join_btn.addEventListener("click", function(e) {
|
|
|
|
|
this.disabled = true;
|
|
|
|
|
|
|
|
|
|
const websocket = new WebSocket("ws://localhost:3000/websocket");
|
|
|
|
|
|
|
|
|
|
websocket.onopen = function() {
|
|
|
|
|
console.log("connection opened");
|
|
|
|
|
websocket.send(username.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const btn = this;
|
|
|
|
|
|
|
|
|
|
websocket.onclose = function() {
|
|
|
|
|
console.log("connection closed");
|
|
|
|
|
btn.disabled = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
websocket.onmessage = function(e) {
|
|
|
|
|
console.log("received message: "+e.data);
|
|
|
|
|
textarea.value += e.data+"\r\n";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input.onkeydown = function(e) {
|
|
|
|
|
if (e.key == "Enter") {
|
|
|
|
|
websocket.send(input.value);
|
|
|
|
|
input.value = "";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2021-08-01 22:42:34 +02:00
|
|
|
</html>
|
