Node.js serving images for canvas

Question

I'm trying to build a simple game with node.js to get more knowledge about networking and stuff related to it. But now I'm stuck. I've been pulling my hair out and searching the web for some hours now, but I can't seem to find the solution. I only found out some useful modules like path.js and mime.js.

My server's code looks like this:

var http = require("http");
var host = "127.0.0.1";
var port = 3000;
var url = require('url');
var fs = require("fs");
var path = require("path");
var mime = require('mime');

var server = http.createServer(function(request, response) {
    console.log("Request received: " + request.url);
    fs.readFile(__dirname + '/game.html', function(error, data) {
        if (error) {
            response.writeHead(404, {"Content-type":"text/plain"});
            response.end("Sorry, the page was not found");
        } else {
            var holder = url.parse(request.url);
            var ext = path.extname(holder.pathname);
            response.setHeader('Content-type',"" + mime.lookup(ext));
            response.writeHead(200);
            response.end(data);
            if (ext == ".png") {
                response.setHeader('Content-type',"image/png");
                response.writeHead(200);
                response.end(data);
            } else if (ext == ".jpeg") {
                response.setHeader('Content-type',"image/jpeg");
                response.writeHead(200);
                response.end(data);
            }
        }
    });
});

var io = require('socket.io').listen(server);

The server variable is what seems to cause me problems. The game I'm trying to implement lies in here: http://jsfiddle.net/6mWkU/2/ Nevermind the graphics ;)

With my server's code, none of the images are served. I tried to use path.js and mime.js, so it sets the specific Content-type each call, but it didn't work.

Hopefully you guys know, what's wrong and can help a newbie out!

Answer 1

Your server does not work in the corrent way, on each request you read the content of the file '/game.html' (you could read it and cache, updating only on some changes made), the you respond to each request (!) with the content of the html file without any check, and after you check the extension of the request (but it was already responded), and if it's true you write again to the response (here you should have some errors in the node's console), you can not write after end in the writable streams.

I have for you 2 solutions:

1. // The difficult solution

    /* Inside the createServer callback */ if (request.url === '/') { // read the file and respond with html } else { if (/* check for the existence of the urls */) { // get the content of the file and respond with it's content and content-type // and don't forget to do this asynchronously! } else { // return 404 } } 

2. // The simple solution

   I would recommend you to use my module simpleS , it will do everything for you (!). will serve the static files and will give you the chance to use the power of websockets. Just put all the files inside a folder, for example "static", then use the following code:

    var simples = require('simples'); var server = simples(3000); server.get('/', function (connection) { connection.type('html'); connection.drain(__dirname + '/game.html'); }); server.serve(__dirname + '/static'); /* And that's all! To work with websockets read the documentation please */