bio photo

Email

Self-study from week2 (18th Feb 2016)

AJAX (Asynchronous JavaScript XML) is a way to communicate with the server without leaving the page. XMLHttpRequest objects make it possible. Here it is in action:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) { //4: request finished and response is ready && 	//Returns the status-number (e.g. "404" for "Not Found" or "200" for "OK")
    myFunction(xhttp);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}

The XML DOM defines the objects, properties and methods of all XML elements.

These are the main steps of making an AJAX request:

  1. Create an XMLHttpRequest object.
  2. Assign a callback function to handle the HTTP response.
  3. Make (send) the request.

Aaron Schwartz > AJAX was a hack (XMLHTTPRequest developed by Microsoft, Google used it really well, it was pre-dated by a startup that used it too but asked for money, yahoo acquired it. iframe src attribute (tag) something similar (it’s not allowed on Chrome - whatever). LiveScript in NetScape (e.g letting invalid form entry know before sending a request to server. Wow, TimeSvr doesn’t even have that! Marc Andreesen, didn’t like parents, spent 2 months building Mosaic with friend (in Uni Illinois). Probably had a better programmer as a friend, distributed it for free, invited to startup with a person 20 years his senior in Silicon Valley. He jumped at it, as CTO, became a millionaire at 24. Got rich, stayed rich, married rich. Considered part of establishment now.))

XMLHttpRequest object still sends requests (pull req), waits for server to respond, there’s a socket created everytime. It’s inefficient, latency is high (Latency is a time interval between the stimulation and response). Sockets solve that, they’re full-duplex communication channels. It’s a persistent connection between the client and server any change in state or new data can be instantly sent from client to server or server to client with very little latency.

Technically Sockets have very little to do with Web or HTTP (wow!) it’s a protocol. Here’s its RFC.

Tried IRC

LimeChat. Didn’t get to speak to anybody in Channel Mozilla, Chatroom #Firefox.

/join mozilla #firefox

Class Notes - week 2

Assignment: Pick a live-synchronous platform (WhatsApp, Slack), define how they use it, what’s interesting in how they use it and describe its use.

Assignment: IRC (Internet Relay Chat) - sign up look at it.

Email downgraded to people who grew up with it.

Open Protocol defines how IRC, SMS and Email works. 100s of email apps, that use open Email protocols.

Motivation of everything else (Skype, Whatsapp, FB Messenger, MSN Messenger, Viber etc) is moentization.

PostMail, MailMan, PostFix services running on a physical server listening for connections on a port (25, 21 ports), some ports are for sending mail, some are for receiving. SMTP is the send mail transfer protocol. POP is the post office protocol. IMAP mail gets stored on the server, director server on the server (kind of like Gmail). These Protocols (all end in P) are defined by RFC. Request for comments. They put it out there and anybody can write software that work to that standard and are interoperable.

SMTP, IMAP and POP are TCP/IP protocols used for mail delivery. SMTP uses port 25 and is used by email clients (outlook, mail in mac) and server-server email delivery. IMAP (port 143) downloads all emails from a server to the client, doesn’t delete emails from the server. POP3 (port 110) downloads emails to client from server, but deletes emails from the server.

HTTP is the protocol that most of the other (non-email or IRC) services (WhatsApp etc) rely on.

Recently, BitCoin and BitTorrent are an addition to open protocols.

Skype doesn’t use HTTP, it uses its own network infrastructure (doesn’t work over a browser). It’s not published, own protocol.

Skype p2p peer-to-peer infrastructure, maybe they are improving bandwidth for other users if you’re on a really good network.

Tinder, Twitch, Twitter, Instagram, Slack, Periscope, use web infrastructure.

ICQ/AOL and ICQ dont use web infrastructure (HTTP protocol).

Monetization is over HTTP (web infrastructure), but the EMAIL protocols IMAP, POP, SMTP doesnt have any commercial monetization built in them.

Below is the proper way to add size elements in HTML
<style>
	#myaudio {
		width: 500px;
	}
</style>

<audio id = "myaudio" controls autoplay>
<source src="http://www.osamasehgol.com/something.mp3">

</audio>

//Ruta's code:
view-source:http://itpruta.com/live%20web/portrait2.html
Something new:
myDiv.appendChild(vid);

if you want to limit number of videos on the page. Create a global variable, var numVideo, numVideo++, if numVideo < 12 do all of this code, otherwise don't do it. 

what's window.confirm?
what's window.event
https://stackoverflow.com/questions/6926963/understanding-the-window-event-property-and-its-usage

event.screenX; somethign to do with mouse position relative to the window. 
event.screenY

Nick Brattons:
video1.addEvenListener('mousemove', play1); calling HTML in Javacript. Older way was, <video id = "video1" video1.play> in html.

Sergio:
//http://104.236.48.182:3002/liveweb01/ 

** baseurl ** tag you can use to give relative path where everything can be loaded from. 

<script type="text/javascript"></script>

function videoControl(evt){
	console.log(evt); <- this event has a lot of properties. Console log it to see, its got mouseX, mouseY etc
	var currentVideo = evt.target; //this event object has the target. And target is the thing that generated the event in the first place. 

	if (currentVideo.paused()){
		currentVideo.play();
	} else {
		currentVideo.pause();
	}
}

window.addEventListener('load', init);

function init() {
	document.getElementId('videoElement0').addEventListener('click', videoControl)
}

Now we’re learning sockets:

In the past there was a meta tag. Meta tag causes a page to reload. This is gonna tell the browser to reload this page every 5 seconds. It’ll cause a server refresh.

Drawback: everytime a new connection is formed with the server, it takes quite a bit of horsepower. [Client —> HTTP —> Server - refresh]

No refresh happening when you start typing inside Google search bar but web page changes. It’s called xmlhttprequest (AJAX). Asynchronous JavaScript and XML. It’s ALL a javascript object. XML was used for server to server data communication, its fairly heavyweight and is being replaced with JSON.

Lots of LIVE possibilities open up. AJAX does alot of polling without reloadin the server.

New standard taking place -> SOCKETS.

Bi-directional Connections between two servers which are sending AND receiving data. In fact HTTP/FTP/SMTP and other protocols all work on top of TCP (Transmission Control Protocol), in TCP you create socket connections between clients-server, server-server etc. WebSockets create TCP connections over the broswer (between client+server) using JavaScript. As long as the browser session is open.

Apache typically doesn’t support webSockets. Apache (in conjunctions with scripts written on Perl, PHP, C, Python) and shared hosting is an older model of web development.

webSockets are a new model of web development where you WRITE an ENTIRE SERVER. Developing your own server, writing websockets using Python, Ruby on Rails, JavaScript Express.

QUESTION: TCP opening sockets, are they same as ports?

TASK: Google the term: vanilla linux box

In order to write our own servers, we need a place to write them. That’s a DigitalOcean droplet.

SSH is a secure shell.

Port delivers services from a server to a client/server. Socket is a connection between a port on one server to the port on another server/client. Different ports deliver different services.

Breakdown of Class code

Chat

This is my understanding of class code.

Chat app has two portions. One is HTTP the other socket. HTTP + socket portion written in Node (server side) is as follows:

// HTTP Portion - this is just setting up a webserver (http) that listens to port: 8080. 
// function requestHandler(req,res){...} is giving a path to incoming requests.  

var http = require('http');
var fs = require('fs'); // Using the filesystem module

var httpServer = http.createServer(requestHandler);


httpServer.listen(8080, function(){
	console.log("listening to 8080");
});

function requestHandler(req, res) {
	console.log(req);
	// Read index.html
	fs.readFile(__dirname + '/index.html', function (err, 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);
			res.end(data);
  		}
  	);
}

This is the summary of what’s going on (note difference between sockets & socket):

http > sockets.on ‘connection’ » socket.on ‘chatmessage’ & socket.on ‘disconnect’ » if socket.on ‘chatmessage’ > function (data){socket.broadcast.emit}

  • Remember this sequence (from Shawn):
*Step 1* //client (index.html)

function sendMessage(message) {
				socket.emit('chatmessage', message);
			};

*Step 2* //server (server.js)
socket.on('chatmessage',
                              ....
		});

*Step 3* //server (server.js)

 function(data) {
		socket.broadcast.emit('chatmessage', data);
                         }				
*Step 4* //client (index.html)

socket.on('chatmessage', function (data) {
                document.getElementById('messages').innerHTML = "" + data + 
 							+ "" + document.getElementById('messages').innerHTML;
			});
// WebSocket Portion
// WebSockets work with the HTTP server because sockets need HTTP connections


var io = require('socket.io').listen(httpServer);

// Register a callback function to run when we have an individual connection

// This is run for each individual user that connects

// in io, there's a method "sockets", so "on" (i.e when) io.sockets happens, make // a "connection", which is function(socket){...}"

//in that function(socket){
//		you are running socket.on('chatmessage'), which in turn runs socket.broadcast.emit('chatmessage', data); 
//}

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('disconnect', function() {
			console.log("Client has disconnected " + socket.id);
		});
	}
);

This is the index.html code for chat app. In effect this is the client side code:

<html>
	<head>
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
		<script type="text/javascript">
				//io is probably a library, in it there's a method .connect
			var socket = io.connect('http://localhost:8080/');

//on io.connect, run function connect which is just a console.log for us
// and also on io.connect (socket.on), 'chatmessage' function (data) {
//document.getElementById('messages').innerHTML =""+data+""+document.getElementById('messages').innerHTML; 
				//}

				//sendmessage() really runs first, it passes object "message"  in socket.emit and labels it 'chatmessage'. Then socket.on('chatmessage') prints these messages. Question! why do we do var sendmessage = function(message){socket.emit(..)}, and not: function sendMessage(message){socket.emit('chatmessage', message);} changing input onclick sendMessage(...)

function sendMessage(message){socket.emit('chatmessage', message)}
			socket.on('connect', function() {
					console.log("Connected");
					});

			// Receive from any event
			socket.on('chatmessage', function (data) {
						console.log(data);
document.getElementById('messages').innerHTML = "" + data + + "" + document.getElementById('messages').innerHTML;
			});

//senedmessage() is passing object message which is 'message'.value received from text input. It is emitting and labelling as 'chatmessage'	and then socket.on('chatmessage', function(data){...} is run)	
			var sendmessage = function(message) {
				console.log("chatmessage: " + message);
				socket.emit('chatmessage', message);
			};

	
		</script>	
	</head>
 <body>
 <div id="messages">
 No Messages Yet
 </div>
 <input type="text" id="message" name="message">
 <input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">
 </body>
</html>