From d76b4a9b91225bbca78054a9f88d05a8e61c49de Mon Sep 17 00:00:00 2001
From: Dangrainage <99558179+Dangrainage@users.noreply.github.com>
Date: Wed, 8 Nov 2023 18:57:44 +0100
Subject: [PATCH] Update Redditlikechatter.HTML
---
Redditlikechatter.HTML | 56 ++++++------------------------------------
1 file changed, 8 insertions(+), 48 deletions(-)
diff --git a/Redditlikechatter.HTML b/Redditlikechatter.HTML
index 28b6a71..7366509 100644
--- a/Redditlikechatter.HTML
+++ b/Redditlikechatter.HTML
@@ -2,6 +2,7 @@
<html>
<head>
<link rel="icon" href="Dangrain.ico" type="image/x-icon">
+ <li><a href="Redditlike.HTML">Home</a></li>
<title>Chatroom</title>
<style>
@@ -16,14 +17,12 @@
<body>
<div id="chatbox"></div>
<input type="text" id="username" placeholder="Your Name">
- <input type="file" id="imageInput" accept="image/*">
<input type="text" id="message" placeholder="Type your message">
<button id="send">Send</button>
<script>
const chatbox = document.getElementById('chatbox');
const usernameInput = document.getElementById('username');
- const imageInput = document.getElementById('imageInput');
const messageInput = document.getElementById('message');
const sendButton = document.getElementById('send');
@@ -37,12 +36,8 @@
});
socket.addEventListener('message', event => {
- const data = JSON.parse(event.data);
- if (data.message) {
- appendMessageToChatbox(data);
- } else if (data.image) {
- appendImageToChatbox(data);
- }
+ const message = event.data;
+ appendMessageToChatbox(message);
});
messageInput.addEventListener('keydown', event => {
@@ -53,24 +48,12 @@
sendButton.addEventListener('click', sendMessage);
- imageInput.addEventListener('change', () => {
- const file = imageInput.files[0];
- if (file) {
- const reader = new FileReader();
- reader.onload = (e) => {
- const imageBase64 = e.target.result;
- sendImage(imageBase64);
- };
- reader.readAsDataURL(file);
- }
- });
-
function sendMessage() {
username = usernameInput.value;
localStorage.setItem('username', username);
const message = messageInput.value;
- if (username.trim() === '' || (message.trim() === '' && !imageInput.files[0])) return;
+ if (username.trim() === '' || message.trim() === '') return;
if (socket.readyState === WebSocket.OPEN) {
const data = {
@@ -83,30 +66,15 @@
}
}
- function sendImage(imageBase64) {
- username = usernameInput.value;
- localStorage.setItem('username', username);
-
- if (username.trim() === '' || !imageBase64) return;
-
- if (socket.readyState === WebSocket.OPEN) {
- const data = {
- username: username,
- image: imageBase64
- };
-
- socket.send(JSON.stringify(data));
- imageInput.value = '';
- }
- }
-
function appendMessageToChatbox(data) {
const messageElement = document.createElement('div');
const usernameElement = document.createElement('strong');
- usernameElement.textContent = data.username + ': ';
+ const messageData = JSON.parse(data);
- const messageWithLinks = convertURLsToLinks(data.message);
+ usernameElement.textContent = messageData.username + ': ';
+
+ const messageWithLinks = convertURLsToLinks(messageData.message);
const messageContentElement = document.createElement('div');
messageContentElement.innerHTML = messageWithLinks;
@@ -117,14 +85,6 @@
chatbox.scrollTop = chatbox.scrollHeight;
}
- function appendImageToChatbox(data) {
- const imageElement = document.createElement('img');
- imageElement.src = data.image;
-
- chatbox.appendChild(imageElement);
- chatbox.scrollTop = chatbox.scrollHeight;
- }
-
function convertURLsToLinks(text) {
const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, (url) => {