File uploads using Node.js

In this blog we will cover easiest file upload mechanism using Node.js

I am going to use express framework and middleware called “multer”. This middleware is designed for handling the multipart/form-data.

In front-end script, we will set the “target” parameter of FORM to our router. for.eg  /upload/picture and in app.get(‘/upload/picture’, …) we will be able to handle our file. Let’s see how.

Our project:

This project is simple. We will have simple express web server which does the task of routing and other stuff. Multer will take care of the file handling and HTML for handling form input.

package.json
{
  "name": "file_upload",
  "version": "0.0.1",
  "dependencies": {
    "express": "~4.10.2",
    "multer": "~0.1.6"
  }
}

Installing dependency:

Save the package.json in folder and type

npm install

to install the required stuff.

Create a file Server.js in your project folder, and put below code in this

/*Define dependencies.*/

var express=require("express");
var multer  = require('multer');
var app=express();
var done=false;

/*Configure the multer.*/

app.use(multer({ dest: './uploads/',
 rename: function (fieldname, filename) {
    return filename+Date.now();
  },
onFileUploadStart: function (file) {
  console.log(file.originalname + ' is starting ...')
},
onFileUploadComplete: function (file) {
  console.log(file.fieldname + ' uploaded to  ' + file.path)
  done=true;
}
}));

/*Handling routes.*/

app.get('/',function(req,res){
      res.sendfile("index.html");
});

app.post('/api/photo',function(req,res){
  if(done==true){
    console.log(req.files);
    res.end("File uploaded.");
  }
});

/*Run the server.*/
app.listen(3000,function(){
    console.log("Working on port 3000");
});


Now create a view file index.html in your project folder, and put below code in this.

<form id        =  "uploadForm"
     enctype   =  "multipart/form-data"
     action    =  "/api/photo"
     method    =  "post"
>
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Image" name="submit">
</form>

Running project:Type below command on terminal

node Server.js

to run the project. Visit localhost:3000 to view the app. Select the file and check the uploads folder. Your file must be present there!

Explanation :

In our Server.js file, we have configured multer. Multer emits event on particular situation such as we used onFileUploadStart which means when file start uploading, this event will be emitted.

After completing upload , file variable holds following array of information.
{
  userPhoto:
  {
     fieldname: 'userPhoto',
     originalname: 'banner.png',
     name: 'banner1415699779303.png',
     encoding: '7bit',
     mimetype: 'image/png',
     path: 'uploads\\banner1415699779303.png',
     extension: 'png',
     size: 11800,
     truncated: false,
     buffer: null
 }
}

We used rename function to manually pass the name of files, else by default multer use the random names for uniqueness.

As soon as onFileUploadComplete event emitted we have set the variable done to true and use it in our router to determine whether file is uploaded or not.
 if(done==true){
    res.end("File uploaded.");
  }

In HTML form you must mention enctype=”multipart/form-data” else multer will not work.
Performing file validation:

To perform validation on Server end, multer provides limits array parameter which have following parameters.
    fieldNameSize – integer – Max field name size (Default: 100 bytes)
    fieldSize – integer – Max field value size (Default: 1MB)
    fields – integer – Max number of non-file fields (Default: Infinity)
    fileSize – integer – For multipart forms, the max file size (in bytes) (Default: Infinity)
    files – integer – For multipart forms, the max number of file fields (Default: Infinity)
    parts – integer – For multipart forms, the max number of parts (fields + files) (Default: Infinity)
    headerPairs – integer – For multipart forms, the max number of header key=>value pairs to parse Default: 2000 (same as node’s http).

You can define it like this
limits: {
  fieldNameSize: 100,
  files: 2,
  fields: 5
}

In our code.
app.use(multer({ dest: './uploads/',
 rename: function (fieldname, filename) {
    return filename+Date.now();
  },
limits: {
  fieldNameSize: 100,
  files: 2,
  fields: 5
}
}));

Conclusion:

Multer is very nice middleware created by Express community. It really helps us to quickly develop critical code like File uploads in Node.js easily. I hope you find this tutorial helpful.
For any clarification comment on this post.

Debugging Queries in Laravel 5.1

Laravel provides a fantastic database query builder and ORM system named Eloquent. It makes running queries extremely simple and allows you to get records with minimal effort. However, there may be times when you need to build an advanced query and would like to see the actual SQL being generated.

In this tutorial let’s go through some of the ways we can easily get access to this information. Starting with the simplest methods and moving into more powerful packages.

Before we jump in let’s build an Eloquent query for a fictitious bug report that has been assigned to us:

Issue #22321
Problem: Searching users is showing to many results
Steps to reproduce: I search for "John Doe john@example.org" and

I'm getting back hundreds of results.


As we dig into the code, we find this query that seems to be where

the problem lies:

$results = User::where(function($q) use ($request) {
    $q->orWhere('email', 'like', '%john@example.org%');
    $q->orWhere('first_name', 'like', '%John%');
    $q->orWhere('last_name', 'like', '%Doe%');
})->get();

Can you already spot the problem? If not, don’t worry as we will

start debugging this and see what is actually going on.



Simple Query Debugging

The simplest method to see the query generated is by utilizing

a ->toSql() method. All that we need to do is replace the closing

->get() with ->toSql(). Then printing out the results with the dd(),

die and dump, helper.

Here is the updated query:

$results = User::where(function($q) use ($request) {
    $q->orWhere('email', 'like', '%john@example.org%');
    $q->orWhere('first_name', 'like', '%John%');
    $q->orWhere('last_name', 'like', '%Doe%');
})->toSql();
dd($results)

Running this in the browser will give us the following generated

SQL:

select * from `users` where (`email` like ? or `first_name` like ?

or `last_name` like ?)

This method is great for quickly seeing the SQL. However,

it doesn’t include the query bindings, only a ? for where they are

to be inserted. Depending on the complexity of the bindings, this

may be enough information for youto debug it.


Listening For Query Events

The second option is to listen for query events on the DB object.

To set this up above the query add this little helper:

\DB::listen(function($sql) {
    var_dump($sql);
});

Now when you load the page in the browser you will get the same

 output as in the simple query debugging section:

select * from `users` where (`email` like ? or `first_name` like ?

or `last_name` like ?)


DB::listen is also more advanced, and it accepts two additional

parameters to give us access to the passed in bindings and the

time the query took to run:

\DB::listen(function($sql, $bindings, $time) {
    var_dump($sql);
    var_dump($bindings);
    var_dump($time);
});

Running this again will then display the following results:

string 'select * from `users` where (`email` like ? or `first_name`

 like ? or `last_name` like ?)' (length=89)
array (size=3)
  0 => string '%john@example.org%' (length=18)
  1 => string '%John%' (length=6)
  2 => string '%Doe%' (length=5)
float 35.63

As you can see, this gives us the query, the bindings, and the

 time the query took to run. With this, we can match up the

bindings to the query.



Debugbar Package

Another viable option is to install the Laravel Debugbar package.

 Once installed you will get a heads up overview of your app that

 is displayed at the bottom of the browser. It’s a very

full-featured package and will give you lots of insights into

your application.

The part we want to focus is the query tab that outputs every

query ran to generate the page.





This gives us the full query with the bindings inserted into

the correct place and a bonus of showing query hints to

improve it.

Another advantage of having the query shown instantly like

this is you can quickly spot areas that might not be

eager loaded. This can lead to a significate database

performance hit, and it’s easy to notice as you will

see the total number of queries being high.



Conclusion

Have you spotted the error with the query now? Instead of using

orWhere we needed to be using where. Here is the final code

that fixes the bug:

$results = User::where(function($q) use ($request) {
    $q->where('email', 'like', '%john@example.org%');
    $q->where('first_name', 'like', '%John%');
    $q->where('last_name', 'like', '%Doe%');
})->get();

Which gives us the corrected query:

select * from `users` where (`email` like '%john@example.org%'

and `first_name` like '%John%' and `last_name` like '%Doe%')

Creating real time chat using Node.js, Socket.io and ExpressJS

 Real time chat using Node.js, Socket.io, ExpressJS:

For creating a real time chat you have to do some following steps:

Setup Environment
Of course, the first thing to do is get NodeJS installed on your system.Once you have NodeJS installed, you're ready to setup the needed instruments.

ExpressJS - this will manage the server and the response to the user
Jade - template engine
Socket.io - allows for real time communication between the front-end and back-end

Continuing on, within an empty directory, create a package.json file with the following content.



{
    "name": "RealTimeWebChat",
    "version": "0.0.0",
    "description": "Real time web chat",
    "dependencies": {
        "socket.io": "latest",
        "express": "latest",
        "jade": "latest"
    },
    "author": "developer"
}

By using the Terminal (under Windows - command prompt), navigate to your folder and execute:

npm install

Within a few seconds, you'll have all the necessary dependencies downloaded to the node_modules directory

Developing the Backend
Let's begin with a simple server, which will deliver the application's HTML page, and then continue with the more interesting bits: the real time communication. Create an index.js file with the following core expressjs code:

var express = require("express");
var app = express();
var port = 3700;

app.get("/", function(req, res){

    res.send("It works!");
});

app.listen(port);
console.log("Listening on port " + port);
Above, we've created an application and defined its port. Next, we registered a route, which, in this case, is a simple GET request without any parameters. For now, the route's handler simply sends some text to the client. Finally, of course, at the bottom, we run the server. To initialize the application, from the console, execute:

node index.js

The server is running, so you should be able to open http://127.0.0.1:3700/ and see:

It works!

Now, instead of "It works" we should serve HTML. Instead of pure HTML, it can be beneficial to use a template engine. Jade is an excellent choice, which has good integration with ExpressJS. This is what I typically use in my own projects. Create a directory, called tpl, and put the following page.jade file within it:

<!DOCTYPE html>
html
    head
        title= "Real time web chat"
    body
        #content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
        .controls
            input.field(style='width:350px;')
            input.send(type='button', value='send')

The Jade's syntax is not so complex, but, for a full guide, I suggest that you refer to jade-lang.com. In order to use Jade with ExpressJS, we require the following settings.

app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res){
    res.render("page");
});

This code informs Express where your template files are, and which template engine to use. It all specifies the function that will process the template's code. Once everything is setup, we can use the .render method of the response object, and simply send our Jade code to the user.

The output isn't special at this point; nothing more than a div element (the one with id content), which will be used as a holder for the chat messages and two controls (input field and button), which we will use to send the message.

Because we will use an external JavaScript file that will hold the front-end logic, we need to inform ExpressJS where to look for such resources. Create an empty directory, public, and add the following line before the call to the .listen method.

app.use(express.static(__dirname + '/public'));

So far so good; we have a server that successfully responds to GET requests. Now, it's time to add Socket.io integration. Change this line:

app.listen(port);

to:

var io = require('socket.io').listen(app.listen(port));

Above, we passed the ExpressJS server to Socket.io. In effect, our real time communication will still happen on the same port.

Moving forward, we need to write the code that will receive a message from the client, and send it to all the others. Every Socket.io application begins with a connection handler. We should have one:

io.sockets.on('connection', function (socket) {
    socket.emit('message', { message: 'welcome to the chat' });
    socket.on('send', function (data) {
        io.sockets.emit('message', data);
    });
});

The object, socket, which is passed to your handler, is actually the socket of the client. Think about it as a junction between your server and the user's browser. Upon a successful connection, we send a welcome type of message, and, of course, bind another handler that will be used as a receiver. As a result, the client should emit a message with the name, send, which we will catch. Following that, we simply forward the data sent by the user to all other sockets with io.sockets.emit.

With the code above, our back-end is ready to receive and send messages to the clients. Let's add some front-end code.
Developing the Front-end

Create chat.js, and place it within the public directory of your application. Paste the following code:

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += messages[i] + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        var text = field.value;
        socket.emit('send', { message: text });
    };

}

Our logic is wrapped in a .onload handler just to ensure that all the markup and external JavaScript is fully loaded. In the next few lines, we create an array, which will store all the messages, a socket object, and few shortcuts to our DOM elements. Again, similar to the back-end, we bind a function, which will react to the socket's activity. In our case, this is an event, named message. When such an event occurs, we expect to receive an object, data, with the property, message. Add that message to our storage and update the content div. We've also included the logic for sending the message. It's quite simple, simply emitting a message with the name, send.

If you open http://localhost:3700, you will encounter some errors popup. That's because we need to update page.jade to contain the necessary JavaScript files.

head
    title= "Real time web chat"
    script(src='/chat.js')
    script(src='/socket.io/socket.io.js')
Notice that Socket.io manages the delivery of socket.io.js. You don't have to worry about manually downloading this file.

We can again run our server with node index.js in the console and open http://localhost:3700. You should see the welcome message. Of course, if you send something, it should be shown in the content's div. If you want to be sure that it works, open a new tab (or, better, a new browser) and load the application. The great thing about Socket.io is that it works even if you stop the NodeJS server. The front-end will continue to work. Once the server is booted up again, your chat will be fine too.

Deployment Using SSH2

Today we will going to learn deployment on remote server using SSH2. First ssh2 package needs to be installed.
Establish a connection:

connection = ssh2_connect('Server ip / domain name',

22,array('hostkey'=>'ssh-rsa'));

if(!$connection){    echo "connection is not established";}
Prefer using public and private keys to authenticate logins.
ssh2_auth_pubkey_file(    $connection,    'deploy',    
'/your path to/.ssh/id_rsa.pub',    '/your path to/.ssh/id_rsa');


Whether we use username/password or public/private key authentication ssh2_auth_pubkey_file() return a Boolean value indicating whether authentication was successful.

Now performing basic command to deploy

$stream = ssh2_exec($connection, 'cd /your document root path; 
git pull https://username:password@git repositrypath your branch name;');

$errorStream = ssh2_fetch_stream($stream, SSH2_STREAM_STDERR);


stream_set_blocking($errorStream, true);

stream_set_blocking($stream, true);

echo   stream_get_contents($stream) . stream_get_contents($errorStream);


Last line to show message, if deployment is successfull or not.