wsmini
Version:
Minimalist WebSocket client and server for real-time applications with RPC, PubSub, Rooms and Game state synchronization.
49 lines • 1.12 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>Chat</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='chat.js' type="module"></script>
<style>
* { box-sizing: border-box }
body {
display: flex;
flex-direction: column;
height: calc(100dvh - 3rem);
justify-content: space-between;
background-color: #333;
color: #fff;
font-family: sans-serif;
}
h1 {
text-align: center;
text-transform: uppercase;
}
#chat {
overflow-y: auto;
height: 100%;
width: 100%;
}
#message { width: 100% }
p { margin: 0 }
time::before { content: '[' }
time::after { content: ']' }
the-user, time { font-weight: bold }
the-user::after { content: ': ' }
input {
background-color: #555;
color: #fff;
border: none;
padding: 0.5rem;
}
</style>
</head>
<body>
<h1>Chat</h1>
<div id="chat"></div>
<form id="chat-form">
<input id="message" type="text">
</form>
</body>
</html>