63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Simple Chat Room</title>
|
|
</head>
|
|
<body>
|
|
<input id="messageInput" type="text" placeholder="Type a message...">
|
|
<button id="sendButton">Send</button>
|
|
<input type="file" id="imageInput">
|
|
<img id="imagePreview" style="max-width: 200px; max-height: 200px; display: none;">
|
|
|
|
<ul id="messages"></ul>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
const socket = io();
|
|
|
|
const messageInput = document.getElementById('messageInput');
|
|
const sendButton = document.getElementById('sendButton');
|
|
const imageInput = document.getElementById('imageInput');
|
|
const imagePreview = document.getElementById('imagePreview');
|
|
const messages = document.getElementById('messages');
|
|
|
|
sendButton.addEventListener('click', () => {
|
|
const message = messageInput.value;
|
|
socket.emit('chat message', message);
|
|
messageInput.value = '';
|
|
});
|
|
|
|
imageInput.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function(event) {
|
|
const img = document.createElement('img');
|
|
img.src = event.target.result;
|
|
img.style.maxWidth = '200px';
|
|
img.style.maxHeight = '200px';
|
|
messages.appendChild(img);
|
|
socket.emit('image', event.target.result);
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
socket.on('chat message', (msg) => {
|
|
const li = document.createElement('li');
|
|
li.textContent = msg;
|
|
messages.appendChild(li);
|
|
});
|
|
|
|
socket.on('image', (img) => {
|
|
const imgElement = document.createElement('img');
|
|
imgElement.src = img;
|
|
imgElement.style.maxWidth = '200px';
|
|
imgElement.style.maxHeight = '200px';
|
|
messages.appendChild(imgElement);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|