The other day I wanted to quickly put a speech bubble on an image but surprisingly I found no online tool that would enable me to do that apart from some Flash based ones that I didn’t find particularly usable and one HTML5 one which is cool but I didn’t like the bubble style.

So I decided to make one as part of my let’s learn javascript and nodejs journey. There are so many very cool nodejs projects and blog entries out there that I don’t see much point of going into too many technical details of how the project was done, the source code is on GitHub anyway, you can take look if you are interested. But again, I’m only learning both JavaScript and NodeJS so I’m not in any way suggesting that the methods I use are the way to go, but they do the job which I can prove to you if you care to visit the website and put some speech bubbles: http://comicr.co.uk.

There were a few gotchas in the project which I had to do fair amount of googling around to sort out, so in the hope that I can make that process less painful for someone I will summarize here what I’ve learned.

app.get('/downloadImage', function(req, res) {
	var fn = 'speechBubble.png';
	res.header('Content-Type', 'image/png');
	res.header('Content-Disposition', 'attachment; filename="'+fn+'"');
        // ...
        // write the png stream to res
        // ...
}

var post_data = querystring.stringify({
	'key' : 'imgur_api_key',
	'image': canvas.toBuffer().toString("base64") // base64 encode the png stream
});
var post_options = {
	host: 'api.imgur.com',
	port: '80',
	path: '/2/upload.json',
	method: 'POST',
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded',
		'Content-Length': post_data.length
	}
};
var post_req = http.request(post_options, function(pres) {
	pres.setEncoding('utf8');
	var response = "";  // this will be the response to the POST
	pres.on('data', function (chunk) {
		response += chunk;
	});
	pres.on('end', function() {
		console.log('Response: ' + response);
		var obj = JSON.parse(response); // imgur answers with json
		var result = obj.upload.links;
		console.dir(result); // this will contain the imgur links (image, imgur page, delete, etc.)
	});
});
// post the data
post_req.write(post_data);
post_req.end();

app.post('/doUpload', function(req, res, next) {
	var buffers = [];
	var sumLength = 0;
	req.on("data", function(chunk) {
		buffers.push(chunk);
		sumLength += chunk.length;
	});
	req.on('end', function(chunk) {
		console.log("Total Length: ", sumLength);
		var pos = 0;
		var bigBuffer = new Buffer(sumLength + 1)
		for (var i = 0; i < buffers.length; i++) {
			buffers[i].copy(bigBuffer, pos, 0);
			pos += buffers[i].length;
		}

		// ...
		// bigBuffer now holds the full image as a Buffer
		// ...
	});
});

So after 3-4 years of pure frontend (Flash, Flex) development I’ve gotten bored of it and decided it was time explore something else.

The first stack I looked into was the increasingly popular NodeJS platform. I’m not a huge fan of Javascript but the idea of a fully asynchronous platform both on the server and the client sounded interesting enough to give it a go.

According to my experience the best way to learn a language is to write something in it so I decided to write a very simple application that can be looked at as a much simplified version of google docs collaborative text editor with a little twist that the text can only grow (no correction / deletion) and users have to ‘agree’ on the next word by suggesting words and/or voting on suggestions. If 3 users agree on a word it becomes the continuation of the story. The idea is pretty much the extrapolation of the game I used to play as a kid with a friend where we would start telling a story and each of us would suggest how it should go on. Some really cool stuff came out of that game so I was (still am) curious what it would look like with many more people.

You can check out the result here: http://sociowriter.com . There’s not too much great content there at the moment, people getting there usually just type some random words to see if the thing works then get bored and leave. Which is understandable cause the only appeal of it would be seeing what other people think the next word should be; without that it’s merely a very bad text editor.

The de facto push technology for NodeJS seemed to be socket.io which is an abstraction for duplex client/server communication and includes methods like Websockets, Flash transport, long polling. Since I didn’t really want to bother with the communication layer too much I was quite happy for this library. It turned out to be quite good except for some issues like channels not working properly after socket reconnection and the whole thing not working at all on some free cloud hosting services. But apart from that it’s really very convenient. I’m somewhat reluctant to put code here as their API seem to be ever changing but I’ll do anyway and if you are lucky it still works by the time you try it.

On the server side:

var sio = require('socket.io');
var io = sio.listen(8080);
//Sending a message to all connected sockets:
io.sockets.emit("someMessage", someData);

And on the client:

<script type="text/javascript" src="/socket.io/socket.io.js" />
var socket = io.connect();
socket.on('connect', function(socket) {
	console.log('socket connect '+socket);
});
socket.on('someMessage', function(data) {
	console.log('data arrived '+data);
});

So as you see it’s really high level and you don’t need to get your hands dirty with the networking stuff. I didn’t entirely rely on SocketIO for the communication: the clients don’t send messages to the server through it but instead they do HTTP requests and the server broadcasts the words to the clients through SocketIO.

It was surprisingly easy to get the thing do what I wanted. Because I wanted to immerse a bit deeper into NodeJS I decided to use ExpressJS and MongoDB but I will write about that in an other post maybe. If anyone’s interested in the source code please let me know and I’ll put it on github.

Edit: https://github.com/amiklosi/SocioWriter