dangrain/fantastic-garbanzo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Redditlikechatter.HTML

Browse source
This commit is contained in:
Dangrainage 2023-11-08 18:33:58 +01:00 • committed by GitHub
parent 877f8a2d23
commit 6c0a5e9545
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
Redditlikechatter.HTML
View file

@ -18,7 +18,6 @@
<div id="chatbox"></div> <div id="chatbox"></div>
<input type="text" id="username" placeholder="Your Name"> <input type="text" id="username" placeholder="Your Name">
<input type="text" id="message" placeholder="Type your message"> <input type="text" id="message" placeholder="Type your message">
<input type="file" id="imageUpload" accept="image/*">
<button id="send">Send</button> <button id="send">Send</button>
<script> <script>
@ -26,16 +25,9 @@
const usernameInput = document.getElementById('username'); const usernameInput = document.getElementById('username');
const messageInput = document.getElementById('message'); const messageInput = document.getElementById('message');
const sendButton = document.getElementById('send'); const sendButton = document.getElementById('send');
const imageUpload = document.getElementById('imageUpload');
let username = localStorage.getItem('username') || ''; let username = localStorage.getItem('username') || '';
let userImage = localStorage.getItem('userImage') || '';
usernameInput.value = username; usernameInput.value = username;
if (userImage) {
// If there's a userImage in local storage, display it.
displayUserImage(userImage);
}
const socket = new WebSocket('wss://free.blr2.piesocket.com/v3/1?api_key=TXpdi6xfTc1u6tqppbKF3SDqQPPllfwCFe8SPIWL&notify_self=1'); const socket = new WebSocket('wss://free.blr2.piesocket.com/v3/1?api_key=TXpdi6xfTc1u6tqppbKF3SDqQPPllfwCFe8SPIWL&notify_self=1');
@ -56,20 +48,6 @@
sendButton.addEventListener('click', sendMessage); sendButton.addEventListener('click', sendMessage);
imageUpload.addEventListener('change', () => {
const file = imageUpload.files[0];
if (file) {
// Read the image as a Data URL and store it in local storage.
const reader = new FileReader();
reader.onload = function (e) {
userImage = e.target.result;
localStorage.setItem('userImage', userImage);
displayUserImage(userImage);
};
reader.readAsDataURL(file);
}
});
function sendMessage() { function sendMessage() {
username = usernameInput.value; username = usernameInput.value;
localStorage.setItem('username', username); localStorage.setItem('username', username);
@ -80,8 +58,7 @@
if (socket.readyState === WebSocket.OPEN) { if (socket.readyState === WebSocket.OPEN) {
const data = { const data = {
username: username, username: username,
message: message, message: message
userImage: userImage
}; };
socket.send(JSON.stringify(data)); socket.send(JSON.stringify(data));
@ -95,14 +72,6 @@
const messageData = JSON.parse(data); const messageData = JSON.parse(data);
if (messageData.userImage) {
// Display user's image before their username.
const userImageElement = document.createElement('img');
userImageElement.src = messageData.userImage;
userImageElement.width = 30; // Set your preferred image size here
messageElement.appendChild(userImageElement);
}
usernameElement.textContent = messageData.username + ': '; usernameElement.textContent = messageData.username + ': ';
const messageWithLinks = convertURLsToLinks(messageData.message); const messageWithLinks = convertURLsToLinks(messageData.message);
@ -122,14 +91,6 @@
return `<a href="${url}" target="_blank">${url}</a>`; return `<a href="${url}" target="_blank">${url}</a>`;
}); });
} }
function displayUserImage(userImage) {
// Create an image element and append it to the username input box.
const imageElement = document.createElement('img');
imageElement.src = userImage;
imageElement.width = 30; // Set your preferred image size here
usernameInput.parentNode.insertBefore(imageElement, usernameInput);
}
</script> </script>
</body> </body>
</html> </html>