LightningChat

LightningChat was a small chat application prototype I threw together over a few days back in 2019. It started as a fun experiment and a workaround for some, let’s say, restrictive internet policies at my college.

History

Back in my first year of college (high school for Americans) in 2019, I ran into a problem—every social media site and well-known chat app was blocked on the college network. The only logical solution? Build my own of course!

v0: The “Let’s Throw It at the Wall and See What Sticks” Version

This was the absolute bare-bones version, just enough to get a chat application up and running. The stack was as simple as it gets:

• A backend server: a single, glorious 200-line JavaScript file running a Socket.IO/Express app.
• A static public directory with HTML, CSS, and JS to handle the front end.
• And best of all—zero build system. Hot reloading? Just refresh the page. Restarting the server? A quick Ctrl+C, ↑, and Enter.

Despite its simplicity, it had some very innovative (read: chaotic) features:

• No persisted messages – Snapchat, eat your heart out.
• A single global chat room – no distractions, everyone in the same boat.
• Commands to keep things interesting:
• !li [len] – Generates some classic Lorem Ipsum filler text.
• !snake – Embeds a playable Snake game.
• !gif – Sends a “funny” GIF using the Giphy API (because why not?).
• !scroll [text] – Brings back that sweet 90s <marquee> nostalgia.
• !tapz – Embeds Tapz, the best game known to man (or at least to me). More on Tapz here.

And just in case you want to see how bad it really was, here lies the server code.

• Server Code

  server.js

  const fetch = require('node-fetch');
  const express = require('express');
  const app = express();
  const http = require('http');
  const httpServer = http.createServer(app);
  const bodyParser = require('body-parser');
  const io = require('socket.io')(httpServer);
  const fs = require('fs');
  const path = require('path');
  const uuid4 = require('uuid/v4');
  
  // GIPHY Constants
  const GIPHY_API_KEY = "....";
  const GIPHY_RANDOM_TAGS = "funny";
  
  let chatServer = { uid: "ServerID", username: "LightningChat" }
  let connectedClients = 0;
  
  // expressjs boilerplate
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(express.static('public'));
  
  app.get('/', (req, res) => res.sendFile('public/index.html'));
  app.get('/ping', (req, res) => res.send('pong'))
  
  // websockets
  io.on('connection', socket => {
      // handle client numbers
      connectedClients++;
      sendUserNum(); // tell user num of clients
  
      // user on message event
      socket.on('message', data => {
          // handle if commands have been used
          switch (data.m.split(" ")[0]) {
              case "!gif":
                  sendGif(data, socket);
                  break;
  
              case "!help":
                  sendHelp();
                  break;
  
              case "!scroll":
                  sendScrollingMessage(data, socket);
                  break;
  
              case "!li":
                  sendLoreumIpsum(data, socket);
                  break;
  
              case "!tapz":
                  sendTapZ();
                  break;
  
              case "!snake":
                  sendSnake();
                  break;
  
              default:
                  // magic
                  let messageData = data.m.replace(/ +(?= )/g, '');
  
                  io.emit('message', {
                      msg: messageData,
                      id: socket.id,
                      u: data.u
                  });
                  break;
          }
      })
  
      // user typing event
      socket.on('typing', data => io.emit('typing', data))
  
      // socket disconnect event
      socket.on('disconnect', () => {
          console.log(`[${new Date().toISOString()}] User ${socket.id} disconnected`);
          connectedClients--;
          sendUserNum();
      })
  });
  
  // clear the video directory
  const clearVideos = () => {
      console.log(`[${new Date().toISOString()}] Video/Gif cleanup`);
      const directory = './public/videos';
      fs.readdir(directory, (err, files) => {
          if (err) {
              console.log(`[${new Date().toISOString()}] [Video/Gif ReadDir] ${err}`);
          } else {
              for (const file of files) {
                  fs.unlink(path.join(directory, file), err => {
                      if (err) console.log(`[${new Date().toISOString()}] [Video/Gif Unlink] ${err}`);
                  });
              }
          }
      });
  }
  
  // send number of users to client
  const sendUserNum = () => io.emit('userNum', connectedClients);
  
  // send embedded tapz
  const sendTapZ = () => {
      io.emit('message', {
          msg: `<iframe src="https://tapz.williamneild.com/" width="720" height="480"></iframe>`,
          id: chatServer.uid,
          u: chatServer.username
      })
  }
  
  // send embedded snake
  const sendSnake = () => {
      io.emit('message', {
          msg: `<iframe src="/snake.html" width="450" height="450"></iframe>`,
          id: chatServer.uid,
          u: chatServer.username
      })
  }
  
  // send gif
  const sendGif = (data, socket) => {
      const reqUsername = data.u;
      const category = data.m.split(" ")[1] ? data.m.split(" ")[1] : GIPHY_RANDOM_TAGS;
      const giphyAPIEndpoint = `https://api.giphy.com/v1/gifs/random?api_key=${GIPHY_API_KEY}&tag=${category}`;
  
      fetch(giphyAPIEndpoint).then(response => response.json()).then(data => {
          let giphyGifURL = data.data.images.original.mp4;
          if (giphyGifURL[4] == "s") {
              giphyGifURL = giphyGifURL.slice(0, 4) + giphyGifURL.slice(5, giphyGifURL.length);
          }
  
          const videoID = uuid4();
          const gifFile = fs.createWriteStream(`public/videos/${videoID}.mp4`);
          http.get(giphyGifURL, res => {
              res.pipe(gifFile);
              io.emit('message', {
                  msg: `<video src="/videos/${videoID}.mp4" width="250" loop autoplay></video><br/><span>Requested by ${reqUsername}</span>`,
                  id: chatServer.uid,
                  u: chatServer.username
              })
          })
      })
  }
  
  // send help message to user
  const sendHelp = () => {
      io.emit('message', {
          msg: `
              <p style="user-select: none;">
                  <b>LightningChat Help</b><br/>
                  !help - this menu<br/>
                  !gif - returns a 'funny' gif<br/>
                  !scroll [text] - makes [text] scroll<br/>
                  !tapz - Play TapZ<br/>
                  !Snake - Play Snake<br/>
                  !li [number of paragraphs] - generate Loreum Ipsum text
              </p>
          `,
          id: chatServer.uid,
          u: chatServer.username
      })
  }
  
  // send scrolling message
  const sendScrollingMessage = (data, socket) => {
      const message = data.m.split(" ");
      message.shift();
  
      io.emit('message', {
          msg: `<marquee>${message.join(" ")}</marquee>`,
          id: socket.id,
          u: data.u
      });
  }
  
  const LoreumIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet nisi ullamcorper purus cursus malesuada. Mauris vehicula quam a magna semper tincidunt. Nam consectetur mauris vitae blandit sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat lacus ac libero tempus, non tincidunt arcu lobortis. Donec congue dolor sed velit pharetra consectetur. Aliquam in justo eu dui ultricies porttitor sed non neque. Donec non diam ut justo pulvinar viverra. Suspendisse tincidunt euismod enim pellentesque gravida. Ut justo risus, sollicitudin id risus eu, tempus facilisis est. Fusce laoreet nisi lorem, sed faucibus leo vulputate nec. Nam lorem mauris, condimentum eget gravida eget, tincidunt nec quam. Ut eu libero tempor, ultricies felis sit amet, fermentum tortor. Etiam ornare vestibulum accumsan. In volutpat quam eu urna fringilla commodo. Nulla sit amet mauris placerat, aliquet nisi sit amet, venenatis ex. Nam ultrices dui purus, sit amet tristique libero tempor sodales. Nulla facilisi.";
  const sendLoreumIpsum = (data, socket) => {
      try {
          let numberOfParagraphs = data.m.split(" ")[1];
          let message = "";
  
          // will crash the clients otherwise
          if (numberOfParagraphs > 30) return;
  
          // loop for the number of lipsums
          while (numberOfParagraphs > 0) {
              message += LoreumIpsum + " ";
              numberOfParagraphs--;
          }
  
          // send the bulk loreum ipsum data
          io.emit('message', {
              msg: message,
              id: socket.id,
              u: data.u
          });
      } catch (e) {
          console.log("Error", data, e)
      }
  }
  
  // start server
  httpServer.listen(3000, () => {
      console.log(`[${new Date().toISOString()}] Server started`);
      clearVideos();
      setInterval(sendUserNum, 10000); // 10 secs
      setInterval(clearVideos, 60000); // 1 minute
  });
  

  Language: js

---

v1: The “One That Never Was”

Fast-forward two years. LightningChat had been sitting in the archives, but I wanted to experiment with UI design tools. Naturally, I picked this project to redesign.

Here’s what I came up with:

While the designs gave me a solid vision for the app, the actual implementation never quite materialized. The scope was a bit too ambitious given my time constraints, and so LightningChat v1 never really made it past the concept stage.

But hey, who knows? Maybe one day I’ll revisit it.