lessbreath:
how can i create a web
Bluehorizon19:
hmm what kind of web
Harmonic:
i can show u
Bluehorizon19:
lessbreath:
please do show me
Harmonic:
ok ik this looks kinda bc its hard to like draw using a keyboard but this is how you draw it
Harmonic:
@cora1
euphoriiic:
what web?
getgoddedon:
not sure
lessbreath:
getgoddedon:
Alexis1415:
Well for chatsites you can either code it, which will take forever but will be worth. Or you can buy one off someone.
lessbreath:
What is attribute? Attribute is a content added to the opening tag of an element and can be used in several different ways, for providing information to changing styling.
lessbreath:
Aratox:
Oh, you're interested in coding? Why wasn't I tagged 😭 I have a custom-coded chatsite on Replit, and I believe I could help you. What specific part of setting up a chatsite do you need help with?
lessbreath:
Aratox:
Aratox:
Also, if you want an easily rememberable URL to the site, you'd have to buy a domain for the site (www.example.com) from domain providers such as GoDaddy, or in Jaynator495's case, NameCheap.
lessbreath:
Aratox:
No problem, I could provide code examples if needed.
lessbreath:
Aratox:
I'll just provide my basic chat code, but be warned, it's a few hundred lines of code long...
lessbreath:
Aratox:
yeah this file is huge... ```html <!DOCTYPE html> <html> <head> <title>Chat Application</title> <style> body { background-color: black; color: white; font-family: Times New Roman, serif; display: flex; flex-direction: column; align-items: flex-start; /* Changed from center to left */ justify-content: flex-start; height: 100vh; margin: 0; padding: 0; overflow: hidden; } #overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2; } #usernameForm { background-color: white; color: black; padding: 20px; border-radius: 5px; } #messagesWrapper { flex: 1; width: 100%; display: flex; justify-content: flex-start; /* Changed from center to flex-start */ overflow-y: auto; } #messages { max-width: 80%; list-style-type: none; padding: 1; margin: 0; padding-bottom: 80px; text-align: left; /* Ensure the messages are aligned to the left */ } #formWrapper { width: 100%; display: flex; justify-content: center; position: fixed; bottom: 0; background-color: black; padding: 0px 0; } #form { width: 80%; max-width: 400px; display: flex; margin-bottom: 20px; } #input { flex: 1; padding: 10px; border: none; border-radius: 5px 0 0 5px; } button { padding: 10px 20px; background-color: black; color: white; border: none; border-radius: 0 5px 5px 0; cursor: pointer; } #fileInputWrapper { width: 100%; display: flex; justify-content: center; margin-bottom: 35px; } #fileInput { color: white; } #filePreview { max-width: 80%; margin-top: 20px; } #filePreview img, #filePreview iframe { max-width: 100%; } .join { color: purple; } .leave { color: red; } </style> </head> <body> <div id="overlay"> <div id="usernameForm"> <h1>Welcome</h1> <p>Please enter your username:</p> <input id="username" placeholder="Enter your username" autocomplete="off" /> <button id="submitUsername">Submit</button> </div> </div> <div id="messagesWrapper"> <ul id="messages"></ul> </div> <div id="formWrapper"> <form id="form" action=""> <input id="input" placeholder="Enter your message" autocomplete="off" /> <button>Send</button> </form> </div> <div id="fileInputWrapper"> <input type="file" id="fileInput" accept=".jpg, .jpeg, .png, .pdf" /> </div> <div id="filePreview"></div> <script src="https://cdn.socket.io/4.2.0/socket.io.min.js"></script> <script> const socket = io(); const messagesWrapper = document.getElementById('messagesWrapper'); const messages = document.getElementById('messages'); const form = document.getElementById('form'); const input = document.getElementById('input'); const fileInput = document.getElementById('fileInput'); const filePreview = document.getElementById('filePreview'); const overlay = document.getElementById('overlay'); const usernameForm = document.getElementById('usernameForm'); const usernameInput = document.getElementById('username'); const submitUsernameBtn = document.getElementById('submitUsername'); const formatTime = (time) => { const date = new Date(time); return `${date.getHours()}:${date.getMinutes()}`; }; const scrollToBottom = () => { messagesWrapper.scrollTop = messagesWrapper.scrollHeight; }; submitUsernameBtn.addEventListener('click', () => { let username = usernameInput.value.trim(); if (username !== '') { username = username.replace(/\s+/g, '_'); socket.emit('setUsername', username); } }); socket.on('usernameError', (data) => { alert(data.message); // Display the error message to the user usernameInput.value = ''; // Clear the input field }); socket.on('usernameSuccess', () => { overlay.style.display = 'none'; messages.style.display = 'block'; form.style.display = 'flex'; scrollToBottom(); }); form.addEventListener('submit', (e) => { e.preventDefault(); const message = input.value; if (message) { socket.emit('chat message', { message }); input.value = ''; scrollToBottom(); if (message === '/cmds') { const cmdsMessage = document.createElement('li'); cmdsMessage.innerHTML = '[Server]: Available commands: /online, /whisper <username> <message>, /cmds'; messages.appendChild(cmdsMessage); scrollToBottom(); } if (message === '/online') { const onlineUsersMessage = document.createElement('li'); onlineUsersMessage.innerHTML = '[Server]: Fetching online users...'; messages.appendChild(onlineUsersMessage); scrollToBottom(); } } }); fileInput.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const fileData = e.target.result; socket.emit('file', { file: fileData, fileName: file.name }); previewFile(file, fileData); scrollToBottom(); }; reader.readAsDataURL(file); }); function previewFile(file, fileData) { filePreview.innerHTML = ''; const item = document.createElement('li'); if (file.type.startsWith('image/')) { const img = document.createElement('img'); img.src = fileData; item.appendChild(img); } else if (file.type === 'application/pdf') { const iframe = document.createElement('iframe'); iframe.src = fileData; iframe.width = '100%'; iframe.height = '500px'; item.appendChild(iframe); } filePreview.appendChild(item); } socket.on('chat message', (data) => { const item = document.createElement('li'); const time = new Date().getTime(); let messageClass = ''; if (data.message.includes('has entered the chat')) { messageClass = 'join'; } else if (data.message.includes('has left the chat')) { messageClass = 'leave'; } const messageWithLinksAndEmojis = data.message .replace(/:\w+:/g, (match) => { const emojiMap = { ':skull:': '💀', ':smile:': '😄', ':heart:': '❤️', ':thumbs_up:': '👍', ':clap:': '👏', ':joy:': '😂', ':fire:': '🔥', ':tada:': '🎉', ':sunglasses:': '😎', ':smirk:': '😏', ':imp:': '👿', ':smiling_imp:': '😈', ':wink:' : '😉', // Add more as needed }; return emojiMap[match] || match; }) .replace(/\bhttps?:\/\/\S+/gi, (url) => { return '<a href="' + url + '" target="_blank">' + url + '</a>'; }); item.className = messageClass; item.innerHTML = `[${formatTime(time)}] ${data.username}: ${messageWithLinksAndEmojis}`; messages.appendChild(item); scrollToBottom(); }); socket.on('whisper', (data) => { const item = document.createElement('li'); const time = new Date().getTime(); const messageWithLinksAndEmojis = data.message .replace(/:\w+:/g, (match) => { const emojiMap = { ':skull:': '💀', ':smile:': '😄', ':heart:': '❤️', ':thumbs_up:': '👍', ':clap:': '👏', ':joy:': '😂', ':fire:': '🔥', ':tada:': '🎉', ':sunglasses:': '😎', ':smirk:': '😏', ':imp:': '👿', ':smiling_imp:': '😈', ':wink:' : '😉', // Add more as needed }; return emojiMap[match] || match; }) .replace(/\bhttps?:\/\/\S+/gi, (url) => { return '<a href="' + url + '" target="_blank">' + url + '</a>'; }); item.innerHTML = `<span style="color: green;">[${formatTime(time)}] ${data.username}: ${messageWithLinksAndEmojis}</span>`; messages.appendChild(item); scrollToBottom(); }); socket.on('file', (data) => { const item = document.createElement('li'); const time = new Date().getTime(); if (data.fileName.endsWith('.jpg') || data.fileName.endsWith('.jpeg') || data.fileName.endsWith('.png')) { const img = document.createElement('img'); img.src = data.file; item.appendChild(img); } else if (data.fileName.endsWith('.pdf')) { const iframe = document.createElement('iframe'); iframe.src = data.file; iframe.width = '100%'; iframe.height = '500px'; item.appendChild(iframe); } const fileLink = document.createElement('a'); fileLink.href = data.file; fileLink.textContent = `${data.username} sent a file: ${data.fileName}`; item.appendChild(document.createElement('br')); item.appendChild(fileLink); messages.appendChild(item); scrollToBottom(); }); </script> </body> </html> ```
Aratox:
That was the HTML file (it MUST be named `index.html`), which is for design... now for server-side logic, `server.js`.
Aratox:
```javascript const express = require('express'); const app = express(); const http = require('http').Server(app); const io = require('socket.io')(http); const axios = require('axios'); const port = process.env.PORT || 3000; const usernames = {}; const messageCounts = {}; const RATE_LIMIT = 40; const TIME_FRAME = 60 * 1000; // List of banned IP addresses const bannedIPs = []; // Add the emoji mapping const emojiMap = { ':skull:': '💀', ':smile:': '😄', ':heart:': '❤️', ':thumbs_up:': '👍', ':clap:': '👏', ':joy:': '😂', ':fire:': '🔥', ':tada:': '🎉', ':sunglasses:': '😎', ':smirk:': '😏', ':imp:': '👿', ':smiling_imp:': '😈', ':wink:': '😉', // Add more as needed }; function replaceEmojis(message) { return message.replace(/:\w+:/g, (match) => emojiMap[match] || match); } app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); // Keep-alive route app.get('/keep-alive', (req, res) => { res.sendStatus(200); }); io.on('connection', (socket) => { const ip = socket.handshake.address; // Check if the IP is banned if (bannedIPs.includes(ip)) { socket.emit('chat message', { username: 'Server', message: 'You are banned from this chat.' }); socket.disconnect(); return; } console.log('A user connected'); socket.on('setUsername', (username) => { username = username.replace(/\s+/g, '_'); if (Object.values(usernames).includes(username)) { socket.emit('usernameError', { message: 'Username already taken. Please choose another.' }); } else { socket.username = username; usernames[socket.id] = username; messageCounts[socket.id] = { count: 0, timer: null }; socket.emit('usernameSuccess'); io.emit('chat message', { username: 'Server', message: `User ${username} has entered the chat` }); } }); socket.on('chat message', (data) => { let message = data.message; message = replaceEmojis(message); console.log(`[${new Date().toISOString()}] ${usernames[socket.id]}: ${message}`); if (message === '/online') { const onlineUsers = Object.values(usernames).join(', '); socket.emit('chat message', { username: 'Server', message: `Online users: ${onlineUsers}` }); return; } if (message === '/cmds') { const commandsList = '/online, /whisper username message, /cmds'; socket.emit('chat message', { username: 'Server', message: `Available commands: ${commandsList}` }); return; } if (messageCounts[socket.id].count >= RATE_LIMIT) { socket.emit('chat message', { username: 'Server', message: 'You have exceeded the message limit. Please wait a moment before sending more messages.' }); return; } if (messageCounts[socket.id].count === 0) { messageCounts[socket.id].timer = setTimeout(() => { messageCounts[socket.id].count = 0; }, TIME_FRAME); } messageCounts[socket.id].count++; if (message.startsWith('/whisper ')) { const parts = message.split(' '); const targetUsername = parts[1]; const whisperMessage = parts.slice(2).join(' '); const targetSocketId = Object.keys(usernames).find(id => usernames[id] === targetUsername); if (targetSocketId) { socket.emit('whisper', { username: `${targetUsername}`, message: whisperMessage }); io.to(targetSocketId).emit('whisper', { username: `${usernames[socket.id]} whispers`, message: whisperMessage }); } else { socket.emit('chat message', { username: 'Server', message: `User ${targetUsername} not found.` }); } return; } if (message.startsWith('/kick ')) { const parts = message.split(' '); const targetUsername = parts[1]; const targetSocketId = Object.keys(usernames).find(id => usernames[id] === targetUsername); if (targetSocketId) { io.emit('chat message', { username: 'Server', message: `User ${targetUsername} has been kicked from the chat.` }); io.sockets.sockets.get(targetSocketId).disconnect(); delete usernames[targetSocketId]; clearTimeout(messageCounts[targetSocketId]?.timer); delete messageCounts[targetSocketId]; console.log(`User ${targetUsername} has been kicked from the chat.`); } else { socket.emit('chat message', { username: 'Server', message: `User ${targetUsername} not found.` }); } return; } if (message.startsWith('/ban ')) { const parts = message.split(' '); const targetUsername = parts[1]; const targetSocketId = Object.keys(usernames).find(id => usernames[id] === targetUsername); if (targetSocketId) { const targetIp = io.sockets.sockets.get(targetSocketId).handshake.address; bannedIPs.push(targetIp); io.emit('chat message', { username: 'Server', message: `User ${targetUsername} has been banned from the chat.` }); io.sockets.sockets.get(targetSocketId).disconnect(); delete usernames[targetSocketId]; clearTimeout(messageCounts[targetSocketId]?.timer); delete messageCounts[targetSocketId]; console.log(`User ${targetUsername} with IP ${targetIp} has been banned from the chat.`); } else { socket.emit('chat message', { username: 'Server', message: `User ${targetUsername} not found.` }); } return; } if (message.length <= 500) { io.emit('chat message', { username: usernames[socket.id], message }); } else { socket.emit('chat message', { username: 'Server', message: 'Your message exceeds the character limit (500 characters).' }); } }); socket.on('file', (data) => { io.emit('file', { username: usernames[socket.id], file: data.file, fileName: data.fileName }); }); socket.on('disconnect', () => { const username = usernames[socket.id]; if (username) { console.log(`User ${username} disconnected`); io.emit('chat message', { username: 'Server', message: `User ${username} has left the chat` }); clearTimeout(messageCounts[socket.id]?.timer); delete usernames[socket.id]; delete messageCounts[socket.id]; } }); }); http.listen(port, () => { console.log(`Server is running on port ${port}`); }); process.on('uncaughtException', (err) => { console.error('Unhandled exception:', err); }); process.on('unhandledRejection', (reason, promise) => { console.error('Unhandled rejection:', reason); }); ```
Aratox:
Keep in mind, this code was built on Replit with the HTML, CSS, and JavaScript template, so there may be files that are missing in this code.
lessbreath:
oh ok
Aratox:
"ok" is an understatement 😂
lessbreath:
lol
lessbreath:
Happy Halloween to you all
FaGG0t:
can u spam so when i come back its 1000+ over?
forgetmylife:
ykbatman:
fr
ykbatman:
you could probably just search this up too
ykbatman:
and get some really good answers
Join our real-time social learning platform and learn together with your friends!
Late:
Roses in the sun, Waving, having fun. Bees are buzzing loud, "Hey, look at us now!" Petals soft and bright, Colors such delight.
xEdwinX:
(pt 6) My time at school was like a dime, very little Time But It'll do, It was b
ilikefood07:
I'm Sorry... I'm sorry that I hurt you in more ways then one I'm sorry that I wasn't good enough for you I'm sorry I couldn't make you happy I'm sorry for a
Jesus928:
For you... (A) Time can be a friend, steady and kind, or a thief that steals what you hoped to find.
Troyboy:
I now know what real love is true love is to hold someone in your arms and never
marienne:
this for the reeal one or for thoes who found love .UNTIL YOU CAME INTO MY WORLD, THERE WAS NOTHING BUT DARKNESS AND GLOOM MY WORLD WAS MISSING THE CLOUDS A
Countless7Echos:
Finished!!! Tw: For mature audience, contains blood, scars and disturbing image (
Ray13:
He broke up with me first Then he called me the worst I was in rage But it wasnu2
whypyt:
i just want you to love me and take me within you're arms and make sure that im w