William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

NodeJS & Express: get URL image and refresh ALL linked screen (1)

NodeJS & Express: get URL image and refresh ALL linked screen

Use NodeJS and Express web framework to implement a very cool effect:

  • in the webpage, user inputs a URL to upload a image
  • when submit, the image is uploaded to server directory, and reflect to current webpage without page refresh.
  • meanwhile, all the web users could immediately see this uploaded image without refresh.
  • exact the same as Facebook’s ‘like’ feature.

Traditional technology such as PHP & DB do not have such features, only the server-side JavaScript NodeJS can do. I googled all around but can not find an effective and existed solution; so I have to do by myself.

After trying several ways, finally by using request module, I made it work. Here I list for sharing when some people want to do the same thing. The following is the core app.js:

var my_dir = __dirname+'/public/images/';
var express = require('express'), 
 routes = require('./routes'),
 request = require('request'),
 fs = require('fs');
var app = module.exports = express.createServer();
app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, 
     showStack: true }));
});
app.configure('production', function(){
  app.use(express.errorHandler());
});

app.get('/', function(req, res){
 var html = fs.readFileSync(__dirname+'/public/index.html');
 res.end(html);
});

app.post('/api/photos', function(req, res) {
 console.log(JSON.stringify(req.body));
 var serverPath = req.body.userPhotoInput.replace(/.*\//, '');
 var path = my_dir + serverPath;
 console.log(path);
 console.log(serverPath);
	
 var ws = fs.createWriteStream(path);
 var r = request({url:req.body.userPhotoInput, res:res}, 
  function (error, response, body) {
  if (!error && response.statusCode == 200) {
   res.send({ path: serverPath	});
  }
  else {
   res.send({ error: 'No such image file!' });
  }
 }).pipe(ws);
});

app.listen(3001, function(){
 console.log("Express server listening on port %d in %s mode", 
   app.address().port, app.settings.env);
});

var nowjs = require("now");
var everyone = nowjs.initialize(app);
everyone.now.distributeMessage = function(message){
 everyone.now.receiveMessage(message);
};

It is not perfect, but it works fine. The core part is the callback for app.post -> ‘/api/photos’.
In the following blog, I will list brief client-side code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: