Skip to content

Instantly share code, notes, and snippets.

@CypherpunkSamurai

CypherpunkSamurai/websocketclient.html

Created July 26, 2024 16:29
Show Gist options
  • Save CypherpunkSamurai/6209ba95b32dff51d44743bed3f620cd to your computer and use it in GitHub Desktop.
Save CypherpunkSamurai/6209ba95b32dff51d44743bed3f620cd to your computer and use it in GitHub Desktop.
Download ZIP
Web Socket Client HTML CSS Tailwind
Raw
websocketclient.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Client</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-2 sm:p-4 md:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 sm:p-6 md:p-8">
<h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-indigo-600 mb-4 sm:mb-6">WebSocket Client</h1>
<div class="mb-4 space-y-2 sm:space-y-0 sm:flex sm:items-center">
<label for="connectionUrl" class="block text-sm font-medium text-gray-700 sm:w-32 sm:mr-4">Connection URL:</label>
<input type="text" id="connectionUrl" value="ws://127.0.0.1:8000/ws" class="w-full sm:flex-grow p-2 border border-gray-300 rounded-md shadow-sm">
<button id="connectButton" class="w-full sm:w-auto mt-2 sm:mt-0 sm:ml-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Connect</button>
</div>
<div id="status" class="text-gray-500 mb-4 text-center sm:text-left">Disconnected</div>
<div id="messages" class="h-64 sm:h-96 md:h-120 overflow-y-auto mb-4 p-2 border border-gray-300 rounded"></div>
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0">
<input type="text" id="messageInput" class="flex-grow p-2 border border-gray-300 rounded-md sm:mr-2" placeholder="Type a message...">
<button id="sendButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Send</button>
</div>
</div>
</div>
<script>
let socket;
const connectionUrl = document.getElementById('connectionUrl');
const connectButton = document.getElementById('connectButton');
const status = document.getElementById('status');
const messages = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
// auto set connection url to host and port
connectionUrl.setAttribute('value', `ws://${window.location.hostname}:${window.location.port}/ws`);
function connect() {
if (socket) {
socket.close();
}
const url = connectionUrl.value;
socket = new WebSocket(url);
socket.onopen = function(e) {
status.textContent = 'Connected';
status.classList.remove('text-gray-500');
status.classList.add('text-green-500');
connectButton.textContent = 'Disconnect';
};
socket.onmessage = function(event) {
const message = document.createElement('div');
message.textContent = `Received: ${event.data}`;
message.classList.add('mb-2', 'text-gray-700');
messages.appendChild(message);
messages.scrollTop = messages.scrollHeight;
};
socket.onclose = function(event) {
status.textContent = 'Disconnected';
status.classList.remove('text-green-500');
status.classList.add('text-gray-500');
connectButton.textContent = 'Connect';
};
socket.onerror = function(error) {
console.error(`WebSocket Error: ${error}`);
status.textContent = 'Error';
status.classList.remove('text-green-500');
status.classList.add('text-red-500');
};
}
connectButton.onclick = function() {
if (socket && socket.readyState === WebSocket.OPEN) {
socket.close();
} else {
connect();
}
};
sendButton.onclick = function() {
if (socket && socket.readyState === WebSocket.OPEN) {
const message = messageInput.value;
socket.send(message);
const sentMessage = document.createElement('div');
sentMessage.textContent = `Sent: ${message}`;
sentMessage.classList.add('mb-2', 'text-blue-700');
messages.appendChild(sentMessage);
messages.scrollTop = messages.scrollHeight;
messageInput.value = '';
}
};
messageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendButton.click();
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment