Networking & The Web

HCID 520 User Interface Software & Technology

1991 — HTTP v0.9

Uniform Resource Locator (URL)

http://info.cern.ch:80/

Uniform Resource Locator (URL)

Scheme/Protocol

http://info.cern.ch:80/

1991 — HTTP v0.9

Uniform Resource Locator (URL)

Scheme/Protocol

http://info.cern.ch:80/Host

1991 — HTTP v0.9

Uniform Resource Locator (URL)

Scheme/Protocol

http://info.cern.ch:80/Host

Port

1991 — HTTP v0.9

Uniform Resource Locator (URL)

Scheme/Protocol

http://info.cern.ch:80/Host

Port

Path

1991 — HTTP v0.9

1992 — Line Mode Browser

1993 — WorldWideWeb, first graphical browserhttp://home.cern/topics/birth-web

1994 — Mosaic, commercialized as Netscapehttps://en.wikipedia.org/wiki/Mosaic_(web_browser)

Server-Side Client-Side

Web Browser

Web Server

Database

HTTP Request

HTTP Response

SQL

Go to URLRoute RequestProcess Data

Build ResponseSend Response

Get ResponseRender Page

Request

Response

Headers

Content

Server-Side Client-Side

Web Browser

Web Server

Database

HTTP Request

HTTP Response

SQL

Server Technologies Apache (basic server) Java Servlets PHP Ruby on Rails (Ruby) Django (Python) Node.js / JavaScript and many others…

Databases MySQL Postgres SQLite MongoDB and many others…

Server-Side Client-Side

Web Browser

Web Server

Database

HTTP Request

HTTP Response

SQLWhat about interactivity?

Server-Side Client-Side

Web Browser

Web Server

Database

HTTP Request

HTTP Response

SQLWhat about interactivity? In the early days, users could submit “forms”. The server would process the results and return a new page.

1994 — Mosaic, commercialized as Netscapehttps://en.wikipedia.org/wiki/Mosaic_(web_browser)

1995 – JavaScript created... in 10 days

Netscape Navigator

Internet Explorer

1997 – DHTML & Proprietary DOMs

Netscape Navigator

Internet Explorer

2000 – XMLHttpRequest

Netscape Navigator

Internet Explorer

Netscape Navigator

Internet Explorer

2001 – Internet Explorer 6

Firefox Internet Explorer

Firefox released – 2004 XMLHttpRequest standardized ("AJAX")

Firefox Chrome

Chrome released – 2008New Browser built on Webkit , V8, node

Server-Side Client-Side

Web Browser

Web Server

Database

HTTP Request

HTTP Response

SQL

Go to URLRoute RequestProcess Data

Build ResponseSend Response

Get ResponseRender Page

(HTML, CSS, etc.)

Server-Side Client-Side

Web Browser

Web Server

Database

HTTP Request

HTTP Response

SQL

Go to URLRoute RequestProcess Data

Build ResponseSend Response

Get ResponseRender Page

(HTML, CSS, etc.)

Server-Side Client-Side

Web Server

Database

HTTP Request

HTTP Response

SQL

Route RequestProcess Data

Build ResponseSend Response

(XML/JSON)

Java

Scrip

t

UI (

HTM

L)Call

Update

(XML/JSON)

Server-Side Client-Side

Web Server

Database

HTTP Request

HTTP Response

SQL

Route RequestProcess Data

Build ResponseSend Response

(XML/JSON)

Java

Scrip

t

UI (

HTM

L)Call

Update

(XML/JSON)

XMLHttpRequest (XHR)var xhr = new XMLHttpRequest();

Server-Side Client-Side

Web Server

Database

Java

Scrip

t

UI (H

TML)Call

XMLHttpRequest (XHR)var xhr = new XMLHttpRequest();

// Make the request xhr.open("GET", "//api.github.com/users/vega/repos", true); xhr.send();

HTTP Method "GET", "POST",

"PUT", "DELETE", etc.

URL

Asynchronous? i.e., should execution

wait for xhr.send().

HTTP Post Content

"?sort=updated"

Server-Side Client-Side

Web Server

Database

HTTP Request

Java

Scrip

t

UI (H

TML)Call

XMLHttpRequest (XHR)var xhr = new XMLHttpRequest();

// Handle the response xhr.onreadystatechange = function() {

};

// Make the request xhr.open("GET", "//api.github.com/users/vega/repos", true); xhr.send();

Server-Side Client-Side

Web Server

Database

HTTP Request

HTTP Response

SQL

Route RequestProcess Data

Build ResponseSend Response Ja

vaSc

ript

UI (H

TML)Call

XMLHttpRequest (XHR)var xhr = new XMLHttpRequest();

// Handle the response xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) {

} };

// Make the request xhr.open("GET", "//api.github.com/users/vega/repos", true); xhr.send();

XHR operation complete. HTTP Status Code. 200 (OK)

Server-Side Client-Side

Web Server

Database

HTTP Request

HTTP Response

SQL

Route RequestProcess Data

Build ResponseSend Response Ja

vaSc

ript

UI (H

TML)Call

XMLHttpRequest (XHR)var xhr = new XMLHttpRequest();

// Handle the response xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var response = JSON.parse(xhr.responseText); } };

// Make the request xhr.open("GET", "//api.github.com/users/vega/repos", true); xhr.send();

Server-Side Client-Side

Web Server

Database

HTTP Request

HTTP Response

SQL

Route RequestProcess Data

Build ResponseSend Response Ja

vaSc

ript

UI (H

TML)Call

XMLHttpRequest (XHR)Libraries to the rescue! E.g., jQuery:$.get("url", function(text) {

});

$.getJSON("url", function(json) {

});

$.post("url", data, function() {

});

JavaScript Object Notation (JSON)

Basic Types (Primitives)Boolean true falseNumber 0 1 5.6 0.3String "hello"No Value null

Advanced TypesObject {"key": value}Array [value, value, ...]

JavaScript Object Notation (JSON)

[true, false, true, true, false]Array of booleans.

[5, 0.491, 80, 29.41, 3.14159]Array of numbers.

["whiskey", "tango", "foxtrot"] Array of string.

JavaScript Object Notation (JSON)

{"fruit": "apples", "amount": 2} Object with two keys and a string and number value.

{"fruits": ["apples", "bananas"], "amount": 2} Object with an array and number value.

[{"fruit": "apples"}, 4, true, null] Array of values.

What about interaction initiated by the server?

https://brigetteheffernan.wordpress.com/category/illustrations/

WebSocketsvar socket = new WebSocket("wss://echo.websocket.org");

New URL scheme for WebSockets. ws : http :: wss : https

WebSocketsvar socket = new WebSocket("wss://echo.websocket.org");

// Send a message to the server socket.onopen = function() { socket.send("Hello"); };

Can be any JSON data types, including binary data (e.g., images).

WebSocketsvar socket = new WebSocket("wss://echo.websocket.org");

// Send a message to the server socket.onopen = function() { socket.send("Hello"); };

// Receive messages from the server socket.onmessage = function(msg) { console.log(msg.data); };

WebSocketsLibraries to the rescue (again!). E.g., socket.io:var socket = io(wss://echo.websocket.org");

socket.send("ant", mouseX, mouseY);

socket.on("ant", function(mouseX, mouseY) {

});