69 lines
1.9 KiB
HTML
69 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
|
|
integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<h1 id="roomName">
|
|
Not Connected
|
|
</h1>
|
|
<div>
|
|
<button id="hostBtn" disabled>Host</button>
|
|
<input id="roomTxt" type="text">
|
|
<button id="joinBtn" disabled>Join</button>
|
|
</div>
|
|
<textarea readonly></textarea>
|
|
<div>
|
|
<input id="chatTxt" type="text" disabled>
|
|
<button id="chatBtn" disabled>Chat</button>
|
|
</div>
|
|
<script>
|
|
const ws = new WebSocket("ws://localhost:8080");
|
|
|
|
ws.addEventListener('open', e => {
|
|
$("#hostBtn").attr('disabled', false);
|
|
$("#joinBtn").attr('disabled', false);
|
|
});
|
|
|
|
$("#hostBtn").on('click', e => ws.send("HOST:"));
|
|
$("#joinBtn").on('click', e => {
|
|
const roomCode = $('#roomTxt').val();
|
|
const msg = `JOIN: ${roomCode}`;
|
|
ws.send(msg);
|
|
$("#roomName").text(roomCode);
|
|
});
|
|
$("#chatBtn").on('click', e => {
|
|
let text = $('#chatTxt').val();
|
|
$('#chatTxt').val('');
|
|
msg = `CHAT: ${text}`;
|
|
ws.send(msg);
|
|
});
|
|
|
|
ws.addEventListener('message', e => {
|
|
const msg = e.data;
|
|
const pos = msg.indexOf(':');
|
|
const command = msg.substring(0, pos);
|
|
const args = msg.substring(pos+1).split(',');
|
|
|
|
switch(command) {
|
|
case "ROOM_CODE":
|
|
$("#roomName").text(args[0]);
|
|
// Fallthrough
|
|
case "JOIN_OK":
|
|
$("#chatTxt").attr('disabled', false);
|
|
$("#chatBtn").attr('disabled', false);
|
|
break;
|
|
case "CHAT":
|
|
let text = $("textarea").val();
|
|
text = text += `${args[0]}\n`;
|
|
$("textarea").val(text);
|
|
default:
|
|
console.log("Unhandled message", msg);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|