Cuttlepress

Blogging about Hacker School?

Day 29

Over the weekend, I decided to turn my Socket.io demo into a little chat application using images instead of text. I drew a handful of icons, but in order to support the easy addition of images later, I wanted to make it easy for the JS on the page to grab all of the images in the assets folder on the server. So the client asks for images:

1

ws.emit("getImages");

and the server responds like this:

1
2
3
4
5
6
7
8
9
10

socket.on('getImages', function(mouseX, mouseY){
  var dir = require('node-dir');
  dir.readFiles(__dirname+"/public/assets", {match: /.png$/}, function(err, content, filename, next) {
          if (err) throw err;
          filename = filename.replace(__dirname+"/public/assets/", "");
          filename = filename.replace(".png", "");
          // console.log('filename:', filename);
          socket.emit('image', filename);
          next();
      });

and the client catches those images and wraps them in divs:

1
2
3
4
5
6
7

ws.on('image', function(buttonname){
      var thisbutton = document.createElement('div');
      thisbutton.innerHTML = "<a><img src=\"assets/"+buttonname+".png\"></a>";
      thisbutton.addEventListener("click", function(){ addToComposingStick(buttonname)});
      thisbutton.setAttribute("class", "button")
      document.querySelector('#buttons').appendChild(thisbutton);
  });

Today I added the area for the user to compose their message, and then spent a fair chunk of time wrangling CSS (in Sass, of course). I got some help from Rishi and Adam. Here’s what it looks like for now:

Chat