Comment on IDEA to make this site standout why don't you make a live chatbox for people who have logged in?

hendrik@palaver.p3x.de ⁨6⁩ ⁨days⁩ ago

• Allah@lemm.ee ⁨6⁩ ⁨days⁩ ago

  yea but do you think it will be a good idea?

  source

  • Nighed@feddit.uk ⁨6⁩ ⁨days⁩ ago

    No.

    People (mostly) use sites like this because of the threaded discussions.

    It would also be hell to moderate.

    source

    • Allah@lemm.ee ⁨6⁩ ⁨days⁩ ago

      what about established accounts?

      source

      • nokturne213@sopuli.xyz ⁨6⁩ ⁨days⁩ ago

        The are established accounts that works be worse to be in a chat with than with a new unknown account.

        source
  • hendrik@palaver.p3x.de ⁨6⁩ ⁨days⁩ ago

    You'd need to change the idea a lot and make it more specific. This way it's not a good way. A local instance chat might be useful for some things. But then this is a platform to discuss underneath posts in communities. So we can already talk to each other...

    source

    • Allah@lemm.ee ⁨6⁩ ⁨days⁩ ago

      yes 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:

      1. Install Socket.IO:

         npm install socket.io
         

      2. 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

      1. Head: added <script src=“/socket.io/socket.io.js”> + minimal CSS
      2. Body: injected a <div id=“chat-container”>…</div> chat widget
      3. Footer: added a <script>…</script> block to wire up io()

      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!

      source

      • hendrik@palaver.p3x.de ⁨6⁩ ⁨days⁩ ago

        this uses cargo and Rust. Not npm and NodeJS... I mean go ahead and try, this is an entirely different programming language.

        source