Using raphael.js to draw an image with parameters sent through socket.io

Question

This is what I have tried so far.

socket-server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var config = require('./config2.js');

app.get('/', function(req, res){
  res.sendfile('socket-client.html');
});
io.on("connection", function (socket) {
    var mapRes = {width : 720, height: 1040};
    socket.emit("mapRes", mapRes);
});
http.listen(3000, function(){
  console.log('listening on *:3000');
});

Relevent scripts from socket-client.html

var socket = io();
window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas'), canvas_width, canvas_height);
    socket.on('mapRes', function(message){
    var mapRes = message;
    var mapImg = paper.image("http://localhost/home/username/Desktop/map.png",0,0,mapRes.width,mapRes.height);
    });
}

Here, "canvas" just an id of the tag where the image is supposed to be loaded

Although the console showed GET http://localhost/home/username/Desktop/map.png [0ms], the image is not loaded. both the image and the codes (socket-server.js & socket-client.html) are in the same folder as the map.png.The complete path to folder is /home/username/Desktop. Can someone enlighten me on where I got it wrong?

Answer 1

You could create a folder under the same folder as the script files and name it as "public" (or whatever you'd like).

On your socket-server.js,

var express = require('express');
var app = express();
app.use(express.static('public')); //let express access your "public" folder.

On your client.html,

var mapImg = paper.image("./map.png",x,y,width,height);

Paper will try to load your image from your "public" folder. FYI, "http:" won't be able to access your local files(from local HDD) for security reasons.