75 lines
2.2 KiB
HTML
75 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Websocket tutorial</title>
|
|
<style>
|
|
body { font-family: sans-serif; padding: 20px; background: #121212 ; color: #ffff;}
|
|
#log {background: #0000; padding: 10px; height: 300px; overflow-y: scroll; border: 1px solid #333;}
|
|
.status-on {color: #00ff00}
|
|
.status-off {color: #ff0000;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>WebSocket Broadcast Console</h1>
|
|
<p id="status" class="status-off">Connecting...</p>
|
|
|
|
<form id="message-form">
|
|
<input
|
|
id="message-input"
|
|
type="text"
|
|
placeholder="Send cargo..."
|
|
required
|
|
/>
|
|
<button
|
|
type="submit">
|
|
Deploy Message
|
|
</button>
|
|
</form>
|
|
<h3>Live Steam Logs:</h3>
|
|
<pre id="log"></pre>
|
|
</body>
|
|
<script>
|
|
const statusEl = document.getElementById('status')
|
|
const log = document.getElementById('log')
|
|
const input = document.getElementById('message-input')
|
|
|
|
// 1. creates the connection
|
|
const s = new WebSocket('ws://localhost:8081')
|
|
|
|
const appendLog = (label, message) =>{
|
|
const entry = `${new Date().toLocaleTimeString()} ${label}: ${message}\n`
|
|
log.textContent = entry + log.textContent
|
|
}
|
|
|
|
s.addEventListener('open', ()=>{
|
|
statusEl.textContent = 'CONNECTED: ws://localhost:8081'
|
|
statusEl.className = 'status-on'
|
|
appendLog('[SYSTEM]', 'Tunnel Established')
|
|
})
|
|
|
|
s.addEventListener('close', ()=>{
|
|
statusEl.textContent = 'Disconnected from: ws://localhost:8081'
|
|
statusEl.className = 'status-off'
|
|
appendLog('[SYSTEM]', 'Tunnel Disconnected')
|
|
})
|
|
|
|
s.addEventListener('message', (e)=>{
|
|
appendLog('[RECEIVED]', e.data)
|
|
})
|
|
|
|
document.getElementById("message-form").addEventListener('submit', (e)=>{
|
|
e.preventDefault()
|
|
if(s.readyState !== WebSocket.OPEN){
|
|
appendLog('[ERROR]', 'Not Connected')
|
|
}
|
|
|
|
const msg = input.value.trim()
|
|
s.send(msg)
|
|
appendLog('[SENT]', msg)
|
|
input.value = ''
|
|
})
|
|
|
|
</script>
|
|
</html> |