Live-web-wk3

Class Notes Week 3

Next week we start group project presentations.

I’m next.

Recap: Ajax - JavaScript makes pages much more interactive. A script running in the background (on an HTML page), that (java)script makes an HTTP request, it hits some remote server and loads something back in our HTML page.

Ajax is based upon XMLHTTPREQUEST api within javascript.

A telnet is opening a raw interactive socket to a server, a regular

$ [telnet](http://searchnetworking.techtarget.com/definition/Telnet) www.google.com 80
Trying 4.35.21.148...
Connected to www.google.com.
Escape character is '^]'.
GET /

GET is just, GET me this resource. POST (usually when you’re sending data on a form). DEL, most servers dont support it. PUT very similar to POST (not commonly supported).

HTTP over javascript via AJAX SOCKET over javascript via socket.io

NODE is literally vp8 is chrome’s for use on the commandline. Instead of having run javascript on the broswer. It makes Javascript a commandline scripting language.

server.js

// HTTP Portion var http = require(‘http’);

http is a module built into node. It allows us to create a normal web-server.

var fs = require(‘fs’); // Using the filesystem module var httpServer = http.createServer(requestHandler); httpServer.listen(8080);

function requestHandler(req, res) { // Read index.html fs.readFile(__dirname + ‘/index.html’, //current directory name //no matter what i type in after “/” it will send me to index.html

	// Callback function for reading
	function (err, data) {
					//when this file is read, pass contents from index.html to this data
		// if there is an error
		if (err) {
			res.writeHead(500);
			return res.end('Error loading canvas_socket.html');
		}
		// Otherwise, send the data, the contents of the file
		res.writeHead(200);
		// a header of 200 in HTTP means 'all good'
		// https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
		res.end(data);
  		}
  	); }

// WebSocket Portion // WebSockets work with the HTTP server var io = require(‘socket.io’).listen(httpServer); //socket is also required here server side, but also client side, in index.html //this httpServer is the one //defined up there

// Register a callback function to run when we have an individual connection // This is run for each individual user that connects io.sockets.on(‘connection’, // We are given a websocket object in our function function (socket) {

	console.log("We have a new client: " + socket.id);
	
	// When this user emits, client side: socket.emit('otherevent',some data);
	socket.on('chatmessage', function(data) {
		// Data comes in as whatever was sent, including objects
		console.log("Received: 'chatmessage' " + data);
		
		// Send it to all of the clients
		socket.broadcast.emit('chatmessage', data);
	});

	socket.on('blink', function(data){
		document.body.style.backgroundColor="black";
		setTimeout(function(){
			document.body.style.backgroundColor="white";
			}, 500);
		console.log("im blinking")
		});
	if we get a command over our server on socket, blink, we will 
	
	socket.on('disconnect', function() {
		console.log("Client has disconnected " + socket.id);
	});
} );

INDEX.HTML

//////

forever lets you run a script forever (it intends to at least).

Globally: npm install -g forever

Run server forever command: forever start server.js

“forever list” shows all the forever scripts running

“forever stop id_process” stops the server with id id_process

forever doesn’t automatically load in changes.

//CANVAS within body you can do canvas

var context; //make it global so socket.on runs

function init() {

var canvas = document.getElementById('mycanvas');	
context = canvas.getContext('2d');

// what you can do http://www.w3schools.com/html/html5_canvas.asp

canvas.addEventListener('mousemove', function(evt){
	console.log(evt); //evt is gonna happen everytime mouse moves
	context.lineTo(evt.clientX, evt.clientY);
	context.stroke();
	});

//sending data var drawingobj = {x: evt.clientX, y: evt.clientY}; socket.emit(‘mousemove’, drawobj);

}

Difference between screenX/Y, clientX,Y, PageX,Y inside evt: // https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

window.addEventListener(‘load’, init);

//receiving data from the server socket.on(‘mousemove’, function(data){ console.log(data); context.lineTo(data.clientX, data.clientY); context.stroke(); })

//Week3 ClassExample Code review

We’re drawing on canvas and passing it around for others to share.

we’re setting up the HTTP portion of Node. Setup webserver 8081 and pass any :8081/ path to /canvas.html

var httpServer = http.createServer(requestHandler);
httpServer.listen(8081, function(){
		console.log("listening at 8081");
});

function requestHandler(req, res) {
	// Read index.html
	fs.readFile(__dirname + '/canvas.html', 
		// Callback function for reading
		function (err, data) {
			// if there is an error
			if (err) {
				res.writeHead(500);
				return res.end('Error loading canvas.html');
			}
			// Otherwise, send the data, the contents of the file
			res.writeHead(200);
			res.end(data);
  		}
  	);
}