Install PM2

Link to PM2 install

Notice! PM2 has a bug and they doesn’t fix it. When you install it ,the pm2 has a special request of the node .js version(v0.10.22).
after install node.js
change the version to  v0.10.22

sudo npm install n -g
sudo n 0.10.22
npm install pm2@latest -g
So far (fingers crossed) switching back to v0.10.26 after installing seems to work.

Building FTP server in linux

Recently I try to connect my PHPstorm to my virtual server. And I figure out that PHPstorm has a Deploying function. It allow user to deploy committed changes to a remote server.
Here is a link of Deploying configuration:

It seems that I have to use ftp to upload my files to the server.
Here is some simple steps to setup the ftp server in linux

Typing in the followed command:

sudo apt-get install vsftpd


Open the FTP server configuration file.

cd /etc/
vim vsftpd.conf

In the vsftpd.conf , we need to change several things.


NOTICE:we must set local_enable=YES,otherwise the ftp server will only allow anonymous visiting.


Create FTP user on server


useradd -m -G ftp -s /sbin/nologin -d /home/user newuser
passwd newuser

NOTICE:-s /sbin/nologin will not allow new user to login the server,

                -d /home/newuser will set default path for newuser

For existing user you should do:

usermod newuser -G ftp -d /home/newuser

Then remember to restart server:

service vsftpd restart 
sudo /etc/init.d/vsftpd restart

If you want to use ftp on another PC,typing in : ftp

Building Web server by express js (tmux & git)

Here are some tips about building web server on the remote server.
Step One:

setting up express js sever 

After installing the express frame and node js, go to this link :
Follow the guide of express js.
Here are some important points:
       (1):making sure that you install express-generator globally with npm.
              $ npm install -g express-generator        
       (2):run this command
            $ express –css stylus myapp
      It will create a myapp file automatically and setup app.js and some else

   (3):cd into the myapp and install npm

       $ cd myapp
       $ npm install
       $ node app.js
If we open the app.js ,we can change the port.
For example:
    This will set node server to listen to 4000 port on the server.
    And if we use “$lsof -i” ,we can check the status of open port.

Step Two:

        Tmux is an useful tool that can allow us to run the program after close the iterm window.
       After installing the tmux successfully,click this link:
       Here is an example about how to tmux to  run the node js server successfully.
       tmux will run and the iterm will come into a new window
       $node app.js
      click control + b and then type d
      The new window will close,it will come back to the old window and you can see a [detach] there.
      By the way, use $killall node to kill all node .

Step Three:

    About Git
    I finally install and run the git successfully on the remote server.
    After installing the git successfully,follow the guide here:
    But first you need to have a github account and create a project successfully.



Install node.js on remote web server & install express frame

1.login into the linux system
2.go to the /usr/local/src eg:root@ubuntu:~# cd /usr/local/src/
3.install source code of node.js from website


4.install the tar file

#  tar xvf node-v0.10.17.tar.gz 
#  cd node-v0.10.17
#  ./configure
# make
# make install
# cp /usr/local/bin/node /usr/sbin/

Attention:when we run the make command,the system will take a long time on installing it.
5.check the version

# node -v 

6.After installing the source code successfully,going to the guide page of express frame.

Cross domain Request

As it known to all, javascript has one- domain policy.That is to say we cannot directly send request to another website.

There are 2 methods to solve this situation

1. Using jsonp in ajax.

            url :yahooURL,
            jsonp: false,
            success: function(response){

                var wind =“”, “popupWindow”, “width=600,height=600,scrollbars=yes”);
Jsonp is the only type in ajax that  allow cross domain request.But the problem is that the response data type must be jsonp as well.


CORS also use XMLHttpRequest to send request.
The problem is that if we want to use CORS we need to set the sever side.
However ,sometime we can not set the config file on the server side.

There is  another way to do it .link :–net-10225

Working Notes:iptables

This command is special for building rules.And it is very useful command when it comes to networking.I will use it to set the firewall.

To list NAT rules:

iptables -t nat -L

iptables -t nat -L -n -v | grep ‘something’

iptables -t nat -L -n -v

For other attributes,click this link:

About the Linux command ls

When we use the ls command ,there are a lot of things we need to understand.
Firstly, the output of the ls command:

As what is showed above,in the middle of the photo,there are 2 columns.First word is the user ownership  of this file,and the second one is the  group ownership  of this file.
If we want to change the user,do it like this:
chown  user directory
change the group:
chown :group directory

Sending photos through WebRTC & How to build data channel

Sending photos through WebRTC is really a strange part of my job.And here are some notes and tips about this part.
The main  aim of sending photo is to send the contents of photos.The contents will be a quite  long string.We can not understand the string .And some time we can divide the entire string into many small parts.Then send those small strings via data channel.

Here I have some misunderstanding of the P2P.Socket is not the data channel.Actually we only use socket to build P2P connection —WebRTC connection—- and then we don’t need it any more.
After the connection has been built,we begin to use data channel to send data .

When we build WebRTC connection,we also need to build data channel.
Here is an example:

  pc = new RTCPeerConnection(configuration);
   sendChannel = pc.createDataChannel(“sendDataChannel”,
                {reliable: false});
As what has be showed above, A new data channel is essential once we define a new WebRTC connection.Using pc.createDataChannel to define a data channel.

   sendData = function(data){

At this part,we define a function called sendData in order to use the sendchannel. Every time we want to send data through data channel we need to call this function.

When we want to send the data of photos via data channel,the first thing we need to do is to build a canvas.
Canvas is a place where we can store the photo temporarily.It is essential and we should define the width and height of the canvas appropriately.
All those thing can be done inside onload function.
 var image= new Image();
image.onload =function(){

Usually we will give the width and height of the photo to canvas.
   var tmpimagecanvas = document.createElement(‘canvas’);
                                        tmpimagecanvas.width = image.width;

If we don’t define the value of the width and height,the canvas cannot get the photo correctly.
Some time it can only get one part of the photo because  the size of canvas is not correct.
Then use the code as followed

  var context = tmpimagecanvas.getContext(‘2d’);

it will give the contents of the photo to the canvas.
We can use toDataURL to check the contents of photo.

               var photoDataBeforeSending = tmpimagecanvas.toDataURL(“image/jpeg”);
               console.log(“Photo Data Before Sending   ” + photoDataBeforeSending);

When we want to send the contents via webRTC,remember the size of data channel is limited.
Therefore,we need to divide the whole photo into small parts.

imageSelected = function(data){

            var canvas = data.canvas;
            var imageWidth=data.imageWidth;
            var imageHeight=data.imageHeight;
            var delay = 10;//se the time of sending interval
            var charSlice = 10000;
            var terminator = “n”;
            //console.log(“HELLO : ” + canvas.getContext(‘2d’).getImageData(0,0,50, 50).data[0]);
            var data = canvas.toDataURL(“image/jpeg”);
            console.log(“DATA: ” + data);
            var dataSent = 0;
            var intervalID = 0;

            intervalID = setInterval(function(){
                var slideEndIndex = dataSent + charSlice;
                if (slideEndIndex > data.length) {
                    slideEndIndex = data.length;
               // sendChannel.send(data.slice(dataSent, slideEndIndex));

                console.log(“dataslice-” + data.slice(dataSent, slideEndIndex));

                    type: “mobileControl-send-data”,
                    data: {type:”imageDataPacketSent”,
                        dataslice: data.slice(dataSent, slideEndIndex)},//send one part of photo
                        imageWidth: imageWidth,
                        imageHeight: imageHeight
                dataSent = slideEndIndex;
                if (dataSent + 1 >= data.length) {//check whether the entire photo has been sent or not
                    //trace(“All data chunks sent.”);
                        type: “mobileControl-send-data”,
                        data: {type:”imageDataPacketSent”,
                            dataslice: “n”,
                            imageWidth: imageWidth,
                            imageHeight: imageHeight

            }, delay);

Once we receive those strings ,we need to integrate those strings.

processImageData= function(dataslice,width,height){
            if (dataslice == “n”){
                /*var img = new Image();
                img.onload = function(){
                    //put image data into canvas here
                img.src = imgdata;*/

                    type: “mobileControl-draw-Tool-Setup-upload-file”,
                    data: {
                console.log(“ImgData  ” + imgdata);
            else {
                imgdata += dataslice;
            console.log(“DATASLICETEST: ” + imgdata);

Then we create a new canvas and give the content of the photo to the new canvas and show it at the correct position on the screen.

Working Note:WebRTC II JSEP

WebRTC applications need to do several things;
1.get streaming audio,video or other data
2.get network information such as IP addresses and ports, and exchange this with other WebRTC clients to enable connection errors and initiate or close sessions information about media and client capability
5.communicate streaming audio,video or data

The MediaStream API is one part of the webRTC.
Each MediaStream has an input,which might be a media stream generated by navigator.getUserMedia().


navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {audio: false, video: true};
var video = document.querySelector(“video”);

function successCallback(stream) { = stream; // stream available to console
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;

function errorCallback(error){
  console.log(“navigator.getUserMedia error: “, error);


It will take 3 parameters:
1.a constraints object
2.a success callback,which is passed a MediaStream error callback

The way to exchange the data and the offer/answer architecture is called JSEP,JavaScript Session Establishment Protocol.