AbuTahir
- 32 Posts
- 31 Comments
thoughts mean when people think about to give opinion about something
AbuTahir@lemm.eeOPto Lemmy Shitpost@lemmy.world•agi graph slop, wtf does goverment collapse have to do with ai?31·3 days agoi think we are safe till atleast early 2030’s
AbuTahir@lemm.eeOPto Mildly Infuriating@lemmy.world•TIL Nearly 84% of Telangana women who participated in a survey agree with domestic violence perpetrated against them.English7·6 days agosir please forgive us
AbuTahir@lemm.eeOPto Fediverse@lemmy.world•IDEA to make this site standout why don't you make a live chatbox for people who have logged in?English216·6 days agowhat about established accounts?
AbuTahir@lemm.eeOPto Fediverse@lemmy.world•IDEA to make this site standout why don't you make a live chatbox for people who have logged in?English120·6 days agois it wrong?
AbuTahir@lemm.eeOPto Fediverse@lemmy.world•IDEA to make this site standout why don't you make a live chatbox for people who have logged in?English114·6 days agoyes i meant separate instance also we just have to put this, dark souls wiki also uses it
You don’t need to rewrite the whole page—just inject the pieces for Socket .io and your chat UI where indicated. Here’s exactly what to add or change in existing HTML (THIS PAGE):
1. Include Socket.IO on the client
Find the closing
</head>
tag and just before it insert:<!-- Socket.IO client library (served automatically by your server) --> <script src="/socket.io/socket.io.js"></script> <!-- Optional: simple styles for the chat box --> <style> #chat-container { position: fixed; bottom: 0; right: 0; width: 300px; max-height: 400px; background: white; border: 1px solid #ccc; display: flex; flex-direction: column; font-family: sans-serif; z-index: 1000; } #chat-messages { flex: 1; overflow-y: auto; padding: 8px; } #chat-form { display: flex; border-top: 1px solid #eee; } #chat-input { flex: 1; border: none; padding: 8px; } #chat-send { border: none; padding: 8px 12px; cursor: pointer; } </style> </head>
2. Add the chat HTML
Find the closing
</body>
tag and just before it paste:<!-- Chat widget --> <div id="chat-container"> <div id="chat-messages"></div> <form id="chat-form"> <input id="chat-input" autocomplete="off" placeholder="Type a message…" /> <button type="submit" id="chat-send">Send</button> </form> </div>
3. Wire up the client-side JavaScript
Right below that (still before
</body>
), add:<script> // connect using the global io() function const socket = io(); const form = document.getElementById('chat-form'); const input = document.getElementById('chat-input'); const messages = document.getElementById('chat-messages'); // render incoming messages socket.on('message', ({ from, text }) => { const div = document.createElement('div'); div.textContent = from + ': ' + text; messages.appendChild(div); messages.scrollTop = messages.scrollHeight; }); // on submit send to server form.addEventListener('submit', e => { e.preventDefault(); const msg = input.value.trim(); if (!msg) return; socket.emit('message', msg); input.value = ''; }); </script> </body> </html>
4. Ensure your server is serving this page and Socket.IO
On your Node/Express server (the same one you use to serve the Lemmy/lemm.ee front-end), you need to:
-
Install Socket.IO:
npm install socket.io
-
Hook it up to your HTTP server (roughly as in the example I shared before), making sure you share sessions so only logged-in users connect.
The minimal changes in your
server.js
(or equivalent) are:const http = require('http'); const socketIO = require('socket.io'); // … your existing Express `app` const server = http.createServer(app); const io = socketIO(server); // (if you have session middleware already:) io.use((socket, next) => { // reuse your Express session middleware here… sessionMiddleware(socket.request, socket.request.res || {}, next); }); io.on('connection', socket => { const user = socket.request.session.user; if (!user) return socket.disconnect(true); socket.broadcast.emit('message', { from: 'SYSTEM', text: `${user.name} joined.` }); socket.on('message', msg => { io.emit('message', { from: user.name, text: msg }); }); socket.on('disconnect', () => { io.emit('message', { from: 'SYSTEM', text: `${user.name} left.` }); }); }); server.listen(3000);
Summary of “what changed” in your HTML
- Head: added
<script src="/socket.io/socket.io.js">
+ minimal CSS - Body: injected a
<div id="chat-container">…</div>
chat widget - Footer: added a
<script>…</script>
block to wire upio()
With those three small patches, your existing site will host a floating chat box that’s only usable by authenticated users. Let me know if you need help wiring up the session middleware or adjusting the styles!
-
AbuTahir@lemm.eeOPto Fediverse@lemmy.world•IDEA to make this site standout why don't you make a live chatbox for people who have logged in?English214·6 days agoyea but do you think it will be a good idea?
AbuTahir@lemm.eeOPto Showerthoughts@lemmy.world•Some popular sayings i combined: Evil is smart but kindness is naive, It's easy to give into evil but being Kind is hard51·8 days agoknow when to be evil? i am assuming you meant to say when do we have the right to defend ourselves?
AbuTahir@lemm.eeOPto World News@lemmy.world•NHS manager accused of fatwa death threat over 'insult to Mohammed'English11·10 days agonope. 2 words, rashidun caliphate
AbuTahir@lemm.eeOPto World News@lemmy.world•NHS manager accused of fatwa death threat over 'insult to Mohammed'English12·10 days agocool, here is some history i recommend
AbuTahir@lemm.eeOPto World News@lemmy.world•NHS manager accused of fatwa death threat over 'insult to Mohammed'English15·10 days agoyou should read more statistics
AbuTahir@lemm.eeOPto World News@lemmy.world•NHS manager accused of fatwa death threat over 'insult to Mohammed'English16·10 days agoyea but clearly there are religions who are less reformed compared to others
AbuTahir@lemm.eeOPto Technology@lemmy.world•Top 5 advances in medicine this weekEnglish11·15 days agoworks for me, looks like you are bot unfortunately
AbuTahir@lemm.eeOPto Technology@lemmy.world•India-made GPUs to be tech demo-ready by 2025, production by 2029English22·19 days agowe have these parasites gifting daily in the US too
do you mean this in a racial way or economic way?
AbuTahir@lemm.eeOPto Technology@lemmy.world•HMD, Lava to launch feature phones with direct-to-mobile technology, Developed in collaboration with Tejas Networks and powered by Saankhya's chipset, these phones can stream content without internetEnglish415·20 days agolaava bahut achchha majaboot phon, source: meree maan mujhe isake saath maaratee thee aur phir bhee yah theek kaam karata tha jab mainne baad mein isake saath khelane kee koshish kee
AbuTahir@lemm.eeOPto Technology@lemmy.world•Most influential LLM papers and the ideas they introduced (post 2017)English11·21 days ago😘no homo
AbuTahir@lemm.eeOPto World News@lemmy.world•It was our tactical brilliance: Pakistan's top air force official admits role in Pulwama,English23·22 days agoAsim muner also supports lobotomization for his own country
https://www.youtube.com/shorts/cNThC2RMTYk
this is proof that pakistan establishment is holding their population hostage
i have been using this site since 2023, watch your tone commoner