WebFund 2016W Lecture 17

Video

The video from the lecture given on March 15, 2016 is now available.

Student Notes

Administrative

• Assignment 5 is due on March 24th
  • The marking scheme has been updated for the assignment (now has 20 marks)
    • 2 for uploading logs
    • 4 for storing logs in MongoDB properly
    • 6 for listing entries in response to a query
    • 2 for allowing such listings to be downloaded IN THE ORDER they were in the original file
    • 6 for graphing daily frequency of logs
  • This is worth 2 assignments since we now have less assignments
• Assignment 6 is due on April 7th (last day of class)
  • This is worth 2 assignments since we have less assignments
• The solutions for our assignment 4 will be posted soon
• Solutions for assignments 5 & 6 will be posted by the end of the semester

Assignment 5

• The template we’re given should give you everything you need to start the assignment
• Each output type includes instructions with what needs to be displayed
  • ‘Download’ displays the log entries as text (similar to queryLogs in web application form)
  • ‘Show’ will have similar functionality to ‘Download’ but you’ll be putting the logs onto a text box you can scroll through
  • ‘Visualize’ can be done in a similar fashion to the graph tutorial
    • Chart.js is a graphing script (http://www.chartjs.org/docs/) that allows you to visualize your data
    • For our assignment, we are setting up all of the data needed for the graph on the server and then passing it into the Jade template to be rendered into a script tag
    • The code in the script tag will be run as client-side code in the web browser to build the graph
• In the doQuery() function, you can see that our query types are listed here (visualize, show and download)
  • For ‘Download’, you just send the logs as plain text
  • For ‘Show’, we use the template given for Show.jade
  • For ‘Visualize’, we specify the data as a result of calling analyzeSelected()
    • The analyzeSelected() function has to take the logs and analyze them and to generate the values and counts
    • To get the logs you need to implement the getLogs() function which is included in the template
    • The analyzeSelected() function does produces a string of JavaScript code with the data object in JSON format
      • This is passed in to the Visualize.jade template

Introduction to Instances

• Access the SCS OpenStack web portal at: https://openstack.scs.carleton.ca/horizon/auth/login/?next=/horizon/
• You can only access the SCS OpenStack machines when you’re on the Carleton Network (CU-Wireless)
  • If you’re attempting to access OpenStack outside the network, you’ll need a VPN (Virtual Private Network) for Carleton’s network
• Log in using:
  • Username: your MyCarletonOne username
  • Password: your MyCarletonOne username (all lowercase) and your student number (no spaces between the two)
• To create/launch your own instance in the COMP2406 subcategory
  • You’re going to have to use Google Chrome!
  • Make sure you are in the COMP2406 project (You can change at the top of the page, to the right of the OpenStack logo)
  • Go to Project → Compute → Instances
  • Click the Launch Instance button to bring up the new instance interface
    • You can name your own instance (ex// anilsomayaji-comp2406-1)
    • Instance Boot Source : Boot from snapshot
    • Instance Snapshot: COMP2406-W16
    • Go to the Access & Security tab
      • Check ping, ssh, https and default.
      • Ignore the Key Pair option
    • Go to the Networking tab
      • Under Selected networks, add the “comp2406-net-26” available network (or “comp2406-net-31”)
    • After following this procedure, you’ll be able to launch to create an instance!
  • Find you instance on the list of instances and under the Actions menu, select Allocate Floating IP
    • Select an IP address with a subnet matching the network that you joined (either 134.117.26.xx or 134.117.31.xx)
• Now you can connect to your instance via ssh
  • In a terminal, enter ssh [floating IP address] -l student
  • The password is tneduts!
• You are now connected to your own virtual machine! You can use it to run a web server!
• Transfer a web application to the instance using wget or some FTP utility
• When running your server, instead of using localhost, we can use our IP address to access our server
  • We only have access to port 443 for the server on this instance but we need elevated priviledges to use it
  • TO FIX: sudo setcap ‘cap_net_bind_service=+ep’ /user/bin/www/nodejs
• Now you can run your server with PORT=443 bin/www (It should now be listening on port 443)
• Though all the capabilities of the OpenStack instance can be done on the course virtual machine, using OpenStack allows you to deploy Node.js in a production environment

Tutorial 7 - Downloading Files

• First we need to make a download button in account.jade
  • Inside the each loop, we add a form to go along with each file
  • We use a hidden field in the form to store the file name as a value to be sent as form data in the body of the POST request

li #{s.name}: #{s.size} 
   form (method=”post”, action=”/downloadFile”)
      p #{s.name}: #{s.size} 
      input(type=”hidden”, value=s.name, name=”downloadFile”)
      input(type=”submit”, value=”Download”, name=”submit”)#{s.name}

• Next, in index.js, we add the code to handle this new request

		
function downloadFile(req, res){
   var theFile = req.body.downloadFile;
   var allFiles = req.session.files;
   var i;
   var sent = false;

   if(theFile){
      for(i = 0; i < allFiles.length; i++){
         if(allFiles[i].originalname === theFile){
            response = Buffer(allFiles[i].buffer.data).toString(‘utf8’);
            res.send(response);	
            sent = true;
            break;
         }
      }

      if(!sent)
         res.send(“File not found”);
   }
}
		   
router.post(“/downloadFile”, downloadFile);

• The downloadFile() searches through the array of uploaded files from the req.session object for a file whose name matches the name received in the request
  • If such a file is found, it is sent in the response
  • Note the use of the Buffer() constructor
    • This is to get a round a bug where the file buffer was not preserved in its Buffer format during storage in memory

Instructor comments

In class I had trouble with downloading the file. Everything worked except that the downloaded file became [Object object].

The problematic line was this, in downloadFile()

 response = allFiles[i].buffer.toString('utf8');

This line should work because when we stored the file in uploadText() it did. But in between (perhaps when stored as a session property) it was changed.

Before, we had:

 { '0': 123,
   '1': 10,
   '2': 32,
   '3': 32,
   ...
 }

But now this got changed into:

 { type: 'Buffer',
   data: 
    [ 123,
      10,
      32,
      32,
      ...
    ]
 }

The former is of type Buffer (as reported by Buffer.isBuffer()), the latter is not.

While this is strange behavior, the fix is easy:

 response = Buffer(allFiles[i].buffer.data).toString('utf8');

This is definitely a bug in node or express. If anyone wants to try isolating this bug and reporting it, let me know!

Code

upload-demo with working download button