WebFund 2016W Lecture 7: Difference between revisions

Latest revision as of 17:25, 31 January 2016

Video

The video for the lecture given on January 28, 2016 is now available.

Notes

In-class Poll

Code

var http = require('http');

var request_handler = function(request, response) {

    var body_content;

    console.log("I got a request for: " + request.url);

    response.writeHead(404, {
        "Content-Type": "text/html"
    });

    body_content = "You requested: " + request.url;
    
    response.write("<html>\n<head>\n<title>Hello!</title>\n</head>" +
		   "<body><h1>Hello world!</h1>" +
		   "<p>" + body_content + "</p>" +
		   "<script>alert('where does this print');</script> " +
		   "\n</body>\n</html>\n");

    return response.end();
}

var server = http.createServer(request_handler);

server.listen(8000, "localhost", function() {
    return console.log("Server listening at http://localhost:8000/");
});

console.log("Finished!");

Student Notes

Even Smaller Web Server

Can we go smaller than tiny?
Bare bones:
- http module
- server
  - Made using http.createServer()
  - We include the port number and host in the server.listen() to actually start up the server
- request handler
  - A function provided as an argument to the createServer() method which is call for every request that comes in
With these pieces, the server can accept requests but does not yet send any responses
We need responses so we can hard code something and put it in request handler
- We can make the server respond with a webpage (html file), using response.writeHead(), response.write and response.end()
At this point we have a very basic web server that works
We can also display what the request was, using request.url
All tiny web server has over this is error handling, dealing with files and providing different responses based on the requests
- This additional functionality can be easily added
- Providing different responses based on the requests, for example, can be achieved by using the request.url to decide how to respond

Client Side JavaScript

(We will be playing with this much more after the midterm)

We can include client-side JavaScript in a response by using the <script> tag within the HTML code that we send to the client
This will allow for JavaScript code to be embedded in the webpage and run in the client's browser
Example:

<script>alert(‘where does this print?’);</script>

Polls

When are A and B added?

y = f(A+B);

A and B are added before f() is called. It needs the value of A+B as an argument to the function.

In what order do these execute?

writeFile(“/tmp/foo.txt”, myData, console.log(“Finished!”));

Finished is printed then myData is written to /tmp/foo.txt. No callback function is given (console.log() returns undefined). It evaluates the value of all the arguments before calling the function.

Express

We use an app object in Express to represent the server as an application
Don’t actually call createServer() or explicitly write server.listen()
No request handler. Instead have app.get() (essentially the same thing though)
How do we use this like tiny web server to find files in directories and then just serve them?
- app.use(express.static(‘.’));
  - This makes a static web server that just serves files from whatever directory you want
- Besides setup, tiny web server is essentially this one line in Express
Express does some basic error handling for us

Node Debugger

When running the Node debugger, it breaks on first line of program by default
You can write debugger; in your code to create additional break points
- This is useful to see if your code is actually running at particular points

Code Examples

fs.readFile(“classtest”, “utf-8”, callback);
console.log(“Finished!”);
5;

This prints:

Finished!
5
Got data: I have to put something here (callback function)

It prints in this order because the callback function passed as an argument is not executed immediately (no parentheses means it is not being called). The application therefore continues to do other work while it waits for the callback to be called.

var f = function(x) { console.log(“Inside f, x = ” + x); return x + 30; };
console.log(“Running f: “ + f(3));

This prints:

Inside f, x = 3
Running f: 30

The argument inside the console.log() function gets evaluated first, resulting in “Inside f, x = 3” being printed before “Running f: 30”.

@@ Line 1: / Line 1: @@
 ==Video==
-The video for the lecture given on January 28, 2016 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/lectures/comp2406-2016w-lec01-07Jan2016.mp4 is now available].
+The video for the lecture given on January 28, 2016 [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/lectures/comp2406-2016w-lec07-28Jan2016.mp4 is now available].
 ==Notes==
@@ Line 8: / Line 8: @@
 https://pollev.com/anilsomayaji565
+==Code==
+<source lang="javascript" line>
+var http = require('http');
+var request_handler = function(request, response) {
+    var body_content;
+    console.log("I got a request for: " + request.url);
+    response.writeHead(404, {
+        "Content-Type": "text/html"
+    });
+    body_content = "You requested: " + request.url;
+    response.write("<html>\n<head>\n<title>Hello!</title>\n</head>" +
+		   "<body><h1>Hello world!</h1>" +
+		   "<p>" + body_content + "</p>" +
+		   "<script>alert('where does this print');</script> " +
+		   "\n</body>\n</html>\n");
+    return response.end();
+}
+var server = http.createServer(request_handler);
+server.listen(8000, "localhost", function() {
+    return console.log("Server listening at http://localhost:8000/");
+});
+console.log("Finished!");
+</source>
+==Student Notes==
+===Even Smaller Web Server===
+*Can we go smaller than tiny?
+*Bare bones:
+**http module
+**server
+***Made using <code>http.createServer()</code>
+***We include the port number and host in the <code>server.listen()</code> to actually start up the server
+**request handler
+***A function provided as an argument to the <code>createServer()</code> method which is call for every request that comes in
+*With these pieces, the server can accept requests but does not yet send any responses
+*We need responses so we can hard code something and put it in request handler
+**We can make the server respond with a webpage (html file), using <code>response.writeHead()</code>, <code>response.write</code> and <code>response.end()</code>
+*At this point we have a very basic web server that works
+*We can also display what the request was, using <code>request.url</code>
+*All tiny web server has over this is error handling, dealing with files and providing different responses based on the requests
+**This additional functionality can be easily added
+**Providing different responses based on the requests, for example, can be achieved by using the <code>request.url</code> to decide how to respond
+===Client Side JavaScript===
+(We will be playing with this much more after the midterm)
+*We can include client-side JavaScript in a response by using the <code>&lt;script&gt;</code> tag within the HTML code that we send to the client
+*This will allow for JavaScript code to be embedded in the webpage and run in the client's browser
+*Example:
+<code><pre><script>alert(‘where does this print?’);</script></pre></code>
+===Polls===
+*When are A and B added?
+<code>y = f(A+B);</code>
+A and B are added before <code>f()</code> is called. It needs the value of <code>A+B</code> as an argument to the function.
+*In what order do these execute?
+<code>writeFile(“/tmp/foo.txt”, myData, console.log(“Finished!”));</code>
+Finished is printed then <code>myData</code> is written to <code>/tmp/foo.txt</code>. No callback function is given (<code>console.log()</code> returns <code>undefined</code>). It evaluates the value of all the arguments before calling the function.
+===Express===
+*We use an <code>app</code> object in Express to represent the server as an application
+*Don’t actually call <code>createServer()</code> or explicitly write <code>server.listen()</code>
+*No request handler. Instead have <code>app.get()</code> (essentially the same thing though)
+*How do we use this like tiny web server to find files in directories and then just serve them?
+**<code>app.use(express.static(‘.’));</code>
+***This makes a static web server that just serves files from whatever directory you want
+**Besides setup, tiny web server is essentially this one line in Express
+*Express does some basic error handling for us
+===Node Debugger===
+*When running the Node debugger, it breaks on first line of program by default
+*You can write <code>debugger;</code> in your code to create additional break points
+**This is useful to see if your code is actually running at particular points
+===Code Examples===
+<code><pre>fs.readFile(“classtest”, “utf-8”, callback);
+console.log(“Finished!”);
+;</pre></code>
+This prints:
+<code><pre>Finished!
+Got data: I have to put something here (callback function)</pre></code>
+It prints in this order because the callback function passed as an argument is not executed immediately (no parentheses means it is not being called). The application therefore continues to do other work while it waits for the callback to be called.
+<code><pre>var f = function(x) { console.log(“Inside f, x = ” + x); return x + 30; };
+console.log(“Running f: “ + f(3));</pre></code>
+This prints:
+<code><pre>Inside f, x = 3
+Running f: 30</pre></code>
+The argument inside the <code>console.log()</code> function gets evaluated first, resulting in <code>“Inside f, x = 3”</code> being printed before <code>“Running f: 30”</code>.