Skip to content

Commit

Permalink
changed handler function to router function
Browse files Browse the repository at this point in the history
  • Loading branch information
shannonjensen committed Mar 15, 2018
1 parent c03d2d9 commit 619bd5e
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 32 deletions.
30 changes: 15 additions & 15 deletions step03.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Step 3 - Communicate with the server

### What is a handler function?
### What is a router function?

When a request reaches the server, we need a way of responding to it. In comes the **handler** function. The handler function is just a function which receives requests and handles them, hence the name.
When a request reaches the server, we need a way of responding to it. In comes the **router** function. The router function is just a function which receives requests and routes them to any appropriate handler functions (which handle the requests) or handles the requests directly.

The handler function always takes a `request` and `response` object and sends the response back to the client along with some information. You can decide what to send back in your response.
The router function (as well as any handler functions) always takes a `request` and `response` object and sends the response back to the client along with some information. You can decide what to send back in your response.

```js
function handler (request, response) {
function router (request, response) {
// deal with request and sending response
}
```

## 1. Create your own handler function.
## 1. Create your own router function.

We are now making a handler function with a custom message in our response. You can write any message you want.
We are now making a router function with a custom message in our response. You can write any message you want.

**Add the following code to `server.js`**

Expand All @@ -24,7 +24,7 @@ var http = require('http');

var message = 'I am so happy to be part of the Node Girls workshop!';

function handler (request, response) {
function router (request, response) {

}

Expand All @@ -39,16 +39,16 @@ server.listen(3000, function () {

```

## 2. Tell your handler function what to do
## 2. Tell your router function what to do

We want our handler function to send our message in a response. To do that we will use one of the method of `response` object, which is: ```response.write()```. You can find more about `response.write()` [here](https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_response_write_chunk_encoding_callback)
We will have our router function handle requests directly for now. We want our router function to send our message in a response. To do that we will use one of the methods of `response` object, which is: ```response.write()```. You can find more about `response.write()` [here](https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_response_write_chunk_encoding_callback)

Every response has a header, which contains information about the response. We can add information to the header using `response.writeHead()`. The `writeHead` takes 2 parameters: status code and header object.

**Add these lines to the handler function**
**Add these lines to the router function**

```js
function handler (request, response) {
function router (request, response) {

response.writeHead(200, {"Content-Type": "text/html"});
response.write(message); //response body
Expand All @@ -57,14 +57,14 @@ function handler (request, response) {

```

## 3. Pass the handler function to your server
## 3. Pass the router function to your server

The createServer() method takes a handler function as an argument.
The createServer() method takes a router function as an argument.

**Pass your handler function to createServer method**
**Pass your router function to createServer method**

```js
var server = http.createServer(handler);
var server = http.createServer(router);

```

Expand Down
8 changes: 4 additions & 4 deletions step04.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ An endpoint is the part of the url which comes after `/`, in above case it's `/

There is a particular method on the request object that allows you to see the endpoint, which was put in the url.

**Inside your handler function, at the top, add the following:**
**Inside your router function, at the top, add the following:**

```js
var endpoint = request.url;
Expand All @@ -25,7 +25,7 @@ All requests use one of the HTTP methods. The main ones are: `GET, POST, PUT, DE

### Check which method was used for your request.

**Type inside your handler function at the top :**
**Type inside your router function at the top :**

```js
var method = request.method;
Expand All @@ -35,7 +35,7 @@ console.log(method);

## 1. Create your own endpoints and send different responses.

Now, you know how to get the endpoint using `request.url`. Change your handler function so that it sends one message when requested url is `/node` and another one when requested url is `/girls`.
Now, you know how to get the endpoint using `request.url`. Change your router function so that it sends one message when requested url is `/node` and another one when requested url is `/girls`.

Good luck :) Feel free to discuss it with your team or mentor.

Expand All @@ -61,7 +61,7 @@ Let's try it.
var http = require('http');
var fs = require('fs');

function handler (request, response) {
function router (request, response) {

if (endpoint === "/") {
response.writeHead(200, {"Content-Type": "text/html"});
Expand Down
6 changes: 3 additions & 3 deletions step05.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ Note the `<link>` and `<img>` tags in the `index.html` page. Here they're lookin

So there's actually **three** requests going on here. One is the original browser request, another is a request sent by `<link>`, and the last one is a request sent by `<img>`

#### So how do we deal with these two extra requests in our handler?
#### So how do we deal with these two extra requests in our router?

You *could* write more routes in your handler for the `image.jpg` and `main.css` files in the public folder. But what if you had multiple css files, or multiple images? Writing routes for *all* of them would get very tedious very quickly!
You *could* write more routes in your router for the `image.jpg` and `main.css` files in the public folder. But what if you had multiple css files, or multiple images? Writing routes for *all* of them would get very tedious very quickly!

Luckily, you don't need to write specific routes for everything. You can write a generic route that is able to deal with lots of different **assets**.

So now you're going to add one more route to your handler function, and that route should be able to successfully respond with both the `image.jpg` and `main.css` files, plus any other files that might be in public folder.
So now you're going to add one more route to your router function, and that route should be able to successfully respond with both the `image.jpg` and `main.css` files, plus any other files that might be in public folder.

**Add a final `else` to your `if-else` block and finish the code for the generic route**

Expand Down
20 changes: 10 additions & 10 deletions step07.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ Let's make the code a bit more structured and organised. The best way to do that
* favicon.ico

**src** --> `src` is short for 'source'. This will contain the server-side code that deals with logic
* handlers.js (we will create this)
* router.js (we will create this)

`server.js` will remain in the **root**.

**Create a folder called `src` in the root**

* create a `handler.js` file in the `src` folder
* paste handler function and related dependencies into handler.js
* create a `router.js` file in the `src` folder
* paste router function and related dependencies into router.js


## Making your own modules!
Expand All @@ -42,31 +42,31 @@ we do this:
var myModule = require('path/to/my/file');
```

**Require your handler.js file into your server.js file**
**Require your router.js file into your server.js file**

If you run your server, you should get an error:
```bash
TypeError: listener must be a function
```
![require error](readme-images/step7-require-error.png)

This is because we haven't "exported" the code inside the `handler.js` file, so it isn't available to us yet. Let's do that now.
This is because we haven't "exported" the code inside the `router.js` file, so it isn't available to us yet. Let's do that now.

**In `handler.js`, you will need to add the following**
**In `router.js`, you will need to add the following**

```js
module.exports = handler;
module.exports = router;
```

`module.exports` magically makes our handler function available to be required in other files.
`module.exports` magically makes our router function available to be required in other files.

Try running the server again and reloading the page.

## Fixing your broken paths

You should see a very broken webpage now. There's a reason for that!

When the handler function was in `server.js`, the paths to our assets (html, css etc) that were assigned to the `pathToFile` and `pathToIndex` variables, were correct. Now the handler function has moved inside the `src` folder, we need to update the paths to our assets to make sure they point to the right location.
When the router function was in `server.js`, the paths to our assets (html, css etc) that were assigned to the `pathToFile` and `pathToIndex` variables, were correct. Now the router function has moved inside the `src` folder, we need to update the paths to our assets to make sure they point to the right location.

We can use **relative paths**. `..` means "go up one level to the folder above". `.` means "look inside the current folder". For example: '../myComputer/home.txt' means "go up one folder, then go to the 'myComputer' folder, then go to the 'home.txt' file". Another example: './home.txt' means "look inside the current folder for the 'home.txt' file"

Expand All @@ -77,7 +77,7 @@ See if you can do this by yourself. Work with your team if you're struggling.

## More modularisation!!!

You could split `handler.js` even further, by separating your routes from your handler. We will not do this now.
You could split `router.js` even further, by separating your routes from your handlers. Go ahead and do this if you still have time.

---

Expand Down

0 comments on commit 619bd5e

Please sign in to comment.