This post was originally published on Coding Glamour.

File uploading is altijd een pain in the ass geweest, upload limits, geen progress informatie, geklooi met Flash plugins voor multiple file selection. Gedoe. Maar nu hebben we de File API, socket.io en node.js. Alvast filmpje van het eindresultaat:

Video

Zit daar in dan?

  • Aan de achterkant een simpele node.js server met:
  • Een laagje socket.io die als proxy dient voor het doorgeven van data tussen clients
  • Een beetje express en ejs om HTML te serveren
  • Drag and drop API om bestanden in de site te slepen
  • File API om de data te lezen
  • <progress> element voor de status
  • Socket.io om de data gebuffered door te sturen

Socket.io in 5 regels
Socket.io is WebSockets toegangelijk gemaakt. Polling on steroids. Client legt verbinding met de server, en ze kunnen two-way berichten naar elkaar sturen via een simpele one-liner. Bijvoorbeeld: na connection wordt er een bericht teruggestuurd (de tekst 'welcome' die je ziet in het filmpje). 

io.sockets.on('connection', function(socket) {
    socket.emit('message', {
        text: 'welcome'
    });
});


Zien!
KLIK. De code is ca. 200 regels lang (client + server), dus probeer het zelf uit. Klik op de link, druk op 'Run' en open een paar browsers (FF/Chrome/Safari, IE8 alleen met kleine afbeeldingen en zonder chat). Afbeeldingen door elkaar sturen kan hij niet, dus daar valt nog wat te winnen.

Werkt niet?
Op de command line (in cloud9) typ: 

npm install socket.io


Wat een baggercode
Klopt!