Creating a node.js http/express server

Hey  there!! In this blog I am going to walk through step by step how to create a node.js http/express server, with a simple breakdown of what each part does.

 

What in the world is node.js?

Node.js is an open source platform that allows developer to create a Web server, basically something for your application to run on.Node.js runs on the Javascript runtime environment but is not a Javascript framework.Node.js has a collection of “modules”that help you tackle task like for an example networking.  If you you are unfamiliar on the purpose of a web server well let me tell you. A web server uses something called http (Hypertext Transfer Protocol)which overall helps web applications and web pages connect to the user taking in request from the user dealing with the application and the response to the user from the app. This process is what people may refer as the client/server model, the client (you) sends a tweet which is an request and the server directs that tweet to the most recent post response. The node.js modules are very low- level doing very complex things, that’s why modules come in handy you can do a lot with little code. Me personally anytime i’m creating a web app I prefer to run it on a local server like node.js. In my experience it has always been a faster load time when dealing with files like images and code, its just less of a headache to deal with to avoid browser and load errors.

 

Creating a basic http server

What you need to do first is to create a project folder, then inside your folder create a file called “server.js”. Go into your text editor and open that project folder up  in you editor.

Now to get started in your “server.js” file lets call the ‘http’ module thats automatically embedded into node.js and store it in a variable called http by typing this:

var http = require('http');

 

Next we are going to create a server with the method “createServer();”.Now the createServer method in its parameter the method takes in a “requestHandler” like so.

 var server = http.createServer(requestHandler);

 

Take the requestHandler that we past through in the createServer method and this is going to be our callback method anytime  user wants to connect to our server.In the method we will log to the console reqeust.url which gathers infomation about the request we sent.lastly responing to the user in the console with a message like “server running..”.Also in the begining passing through the request and respone arguements.

var requestHandler = (request, respone) => {
 console.log(request.url);
 respone.end('Server running....');
}

 

Now for our server to be able to connect the user to the content it needs a place  to direct the user to whatever they are trying to connect too. What we need is to tell the server what ‘port’ we are establishing the application on. First, we are going to write a variable called port and store 3000 in it.

var port = 3000;

 

Next we are going to take the “server” variable and allow for our server we created to ‘listen’ for port 3000 and pass in the err method.Now ‘err’ is a method to allow us to take in error handling for insteads, if the port we called is areadly taken then our server will not run. If not then run as planned and log out a message telling the user where to go.

 server.listen(port, (err) => {
  if (err) {
   return console.log('Server error',err);
  }

  console.log(`server is listening on localhost:${port}`)
 })

 

Reminder that localhost is a variable that stores your IP (Internet Protocol)address then its the port number that your ip address is directed too.

var http = require('http');
var server = http.createServer(requestHandler);

var requestHandler = (request, respone) => {
 console.log(request.url);
 respone.end('Server running....');
}


var port = 3000;server.listen(port, (err) => {
 
if (err) {
 return console.log('Server error',err);
 }

 console.log(`server is listening on localhost:${port}`)
})

 

Lastly, in the same folder create an html file and make an h1 tag with message. Run the server within that ‘http-server’ folder and point your browser to localhost:3000.

Create Acid Rain!!

Hi again, I recently came across this cool project and a IDE that I have never heard of before, with the exception of a very familiar programming language for me at least.But the project is acid rain and I’m using an IDE called p5.js Originally the project was not called acid rain but I messed around with my code a little to put my own flavor on it and, afterwards I encourage you to do the same.To download and learn more about p5.js Click Here. But for anyone with an Linux operating system and struggling, just having trouble getting p5 to work or, just doesn’t really feel like installing another IDE. Here’s a blog to show you how to use p5 in Sublime Text Click Here!!

The Project

screen-shot-2017-01-04-at-12-42-53-pm

The Details

What we are going to do is to simulate an acid type rain fall. First we need to think about a couple of things to make this look like rain. How do we create the rain, how do we allow the rain to fall and also fall in random places on the x, y and,z axis, so lets get started.

Setting up your IDE(if you have it)

Well lets start first we need to click on the pink p5 icon.When it opens you should have something like what shown below and, you should see two functions Setup and Draw if so then you are in good terms so far.

IDE_p5_acid.png

Next what we want to happen is to be able to access all the files.To do that we would need to go on the top right hand corner and click on the pink gear. Once we do that go all the way down to “Show sidebar and turn it on, this should enable us to access all the files.On the side we should see an “index.html”, “libraries” folder and, “sketch.js”.

p5_aicd.png

Now Lets Code!!

Alright I think before we start to code lets establish what are color values for your rain and background.

//Color of rain: RGB(10, 255, 21);
//Background: RGB(0, 0, 0);

Next in your setup function we need a something to draw on. To be able to execute that task we would need to call the createCanvas(); and pass through some dimensions.

function setup(){
 createCanvas(600,600);
}

Now we would need too color in our background with background(); and pass through our color value in.This goes into our draw function.

function draw(){
 background(0, 0, 0);
}

Before we create multiple rain drops and get into placement, we would need to create one single rain drop. So now what we need to do is to make another class called drop.js . We can do so by mashing the “+” button on the right side of the tab.Then after that is done go into your “index.html” folder and in the “” initialize our new class “drop.js” by write this:

 ""

So now we need too create a constructor function for our drop called Drop().

function Drop() { 
}

Then create a another function where we can work on the fall of our rain drop.

this.fall = function() {
}

We wrote the keyword this in referring the object we are working on. To learn more read this or watch this.

Next we will need a function to show our drop like so:

  this.show = function() {
}

In our Drop function our drop need an x and a y.

this.x
this.y

Now lets focus on the design of our rain drop, well in this case we would want a line by using line();. We are passing through an x , y coordinates  and the second x point and y +10, which is y plus 10 pixies. This goes into our show function.

this.show = function() {
line(this.x, this.y, this.x, this.y+ 10);
}

Now let work on the color of the rain drop with the method stroke(); ,with this we are going to pass through our color value for our rain.

stroke(10, 255, 21);

OK great!! Lets go over to our Drop function and create a variable called “yspeed” and set the speed to how fast we want our rain drop to travel along the y axis. For now we are going to set our speed to 1.

  this.yspeed = 1;

Now lets go to the fall function and we are going to set y to what ever we set the y speed to become.

this.y = this.y + this.yspeed;

Lastly we need to set values for our x and y in the Drop function.We are going to set x to the middle of the screen  and y to the top of the screen.

this.x = width/2;
this.y = 0;

Alright now that we have enough code to test in our drop.js lets go over to the sketch.js and implement that in our drop.js in the sketch.js.First lets create a variable drop (We are not going to set a value for it yet, this is just for test purposes).

//make sure you code this above the setup function 
var drops;

Now we are going to take the rain drop we created and store into the “drops” variable.

drops =new Drop();

Lastly, before we test it out, we are going to the draw function and implement the fall and show function out of our “drops” variable.

 drops.fall();
 drops.show();

Test #1

one_aicd_rain_drop.jpg.png
What you should get is one single slow rain drop.

Making multiple rain drops

Now we have one rain drop lets create multiple rain drops. How we would go about that is to add an empty array value to our drops variable.

var drops = [];

Next we need to find a way to fill that empty array with rain drops. Got it !!! we will create a for loop to do so and lets make about 100 or so to start off with.Also we need to place “i” in the array. By the way this goes into our setup function.

for (var i = 0; i < 100; i++){
 drops[i] = new Drop();
 }

Then we need to go down to the draw function and do the same.

for(var i = 0; i< drops.length; i++){
 drops[i].fall();
 drops[i].show();

}

Next we need to switch over to our drop.js and go into the Drop function. Now if we would to run this now, you would only see one run drop that’s because all 100 rain drops are exactly on the same x axis so we would need to spread them out.

 //this spreads them out to the width of our canvas 
this.x = random(width);

Test 2#

rian_drop_line.jpg.png
What should. get is drops moving in same speed.

Well we have rain and multiple of them but it doesn’t look natural. What we have to do is is to get them to start at random y points, but allow them to do that off the screen so we wont see them start at random spots on your canvas.

this.y = random(-500, -50);

Also we we can make happen is to give them different speeds.

this.yspeed = random(4, 20);

Test #3

end_rain.jpg.png
So if you see the rain ends after we cycle through 100 rain drops.

Now we need to work on having continuous rain drops. How we can go about doing that is after the last drop of rain is greater than the height of the canvas we will cycle through another 100 drops.Remember that the rain is being generated of the canvas.

//This goes into the fall function in the drop.js file
if (this.y > height) {
 this.y = random(-200, -100);

 }

Test #4

same_rain.jpg.png

Another thing we can do is to have some rain appears closer its bigger and falls faster and ,others appear farther, slower and smaller. We can achieve this by utilizing the map(); method. So lets create a “z” variable even though this is a 2-d project. So we are going to create values from 0 to 20.

this.z = random(0, 20);

Then we are going to create a “len” which stands for length, to create that parallax view. So first we are going to map the “z” that we just made and pass through the values 0 and 20. Then pass lengths from 10 to 20.

//this means if its futher its shorter if its closer its longer
this.len = map(this.z, 0, 20, 10, 20);

After that make sure you go down to the show and make this change to your line.

                                   
line(this.x, this.y, this.x, this.y+this.len);

Also we should map the speed for the far drops to travel slower.

this.yspeed = map(this.z, 0, 20, 4, 10);

Now  we are going to work on the weight or thickness of our rain drops depending on how close they are. So we can make a variable called “thick” then map it.

var thick = map(this.z, 0, 20, 1, 5);
strokeWeight(thick);

Great now you need to do is test it out and should have something like so:

screen-shot-2017-01-04-at-12-42-53-pm

Nice!! Congrats you have created acid rain pretty cool right. Like always I encoruge you to play around with this code and put your own taste on it or just add to it and keep programming!