60 lines
1.9 KiB
HTML
60 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
height: 88vh;
|
||
|
|
width:100%;
|
||
|
|
background-color: black;
|
||
|
|
overflow-y: scroll;
|
||
|
|
overflow-x: hidden;
|
||
|
|
font-family: 'Consolas', 'Arial', sans-serif;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>WebChat...?</title>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
|
||
|
|
<script>
|
||
|
|
var socket;
|
||
|
|
var nick = "dupel" + Math.round(Math.random() * 1000);
|
||
|
|
|
||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
||
|
|
document.getElementById("nick").innerText = "Chatting as: " + nick;
|
||
|
|
dick = document.getElementById("messages");
|
||
|
|
box = document.getElementById("message");
|
||
|
|
socket = io();
|
||
|
|
socket.on("connect", function() {
|
||
|
|
cpplus = document.createElement("p");
|
||
|
|
cpplus.innerText = "Connected";
|
||
|
|
dick.append(cpplus);
|
||
|
|
})
|
||
|
|
socket.on("disconnect", function() {
|
||
|
|
cpplus = document.createElement("p");
|
||
|
|
cpplus.innerText = "Disconnected";
|
||
|
|
dick.append(cpplus);
|
||
|
|
})
|
||
|
|
socket.on("message", function(msg) {
|
||
|
|
cpplus = document.createElement("p");
|
||
|
|
cpplus.innerText = msg;
|
||
|
|
dick.append(cpplus);
|
||
|
|
})
|
||
|
|
box.onkeypress = function(e) {
|
||
|
|
if (e.key == "Enter") {
|
||
|
|
socket.send(nick + "> " + box.value);
|
||
|
|
box.value = "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<label id="nick"></label>
|
||
|
|
<div id="messages" />
|
||
|
|
<textarea rows="2" placeholder="We neeed to figure shit out..." id="message"></textarea>
|
||
|
|
</body>
|
||
|
|
</html>
|