CS 3214 Computer Systems Lecture 25 Godmar Back

Announcements Project 5 out Exercise 11 Tentative grades Apr 28 Waiting on IT staff Tentative grades Apr 28 Minimum requirements for p1-p5 Resubmit p3 as needed in p3r CS 3214 Spring 2010 4/11/2018

Some of these slides are substantially derived from slides provided by Jim Kurose & Keith Ross. Copyright on this material is held by Kurose & Ross. Used with permission. The textbook is Computer Networking: A Top Down Approach Featuring the Internet Jim Kurose, Keith Ross, Addison-Wesley, July 2004 Part 2 Networking CS 3214 Spring 2010 4/11/2018

Mashups Web applications that combine and mix data from different sources CS 3214 Spring 2010 4/11/2018

Base Server http://www.lib.edu Source A http://www.lib.edu/sourceA Mash-Up Server http://mashup.lib.edu Source B http://opac.lib.edu/sourceB HTML Source C http://any.host.domain/sourceC Client Browser Base Page A C B Server-side Mash-Up CS 3214 Spring 2010 4/11/2018

Base Server http://www.lib.edu Source A http://www.lib.edu/sourceA HTML+JavaScript Proxy http://www.lib.edu/proxy Source B http://opac.lib.edu/sourceB XMLHttpRequest Source C http://any.host.domain/sourceC Client Browser Base Page A C B Proxy-Based Mash-Up CS 3214 Spring 2010 4/11/2018

Base Server http://www.lib.edu Source B http://opac.lib.edu/sourceB HTML+JavaScript Same Origin Restriction Same Domain Restriction Source A http://www.lib.edu/sourceA XMLHttpRequest + XML/Text XMLHttpRequest + XML/Text No Domain Restriction Client Browser Base Page Source C http://any.host.domain/sourceC A B C B (via hidden frame) <SCRIPT> + JSON Client-side Mash-Up CS 3214 Spring 2010 4/11/2018

HTTP & JSON In modern web applications, HTTP is increasingly initiated from code Either directly, e.g., XMLHttpRequest Or indirectly, via SCRIPT/JSON Example: http://books.google.com/books?jscmd=viewapi&bibkeys=0060731338&callback=callThisFunction callThisFunction({"0060731338":{"bib_key":"0060731338", "info_url": "http://books.google.com/books?id=HCInGwAACAAJ\x26source=gbs_ViewAPI", "preview_url": "http://books.google.com/books?id=HCInGwAACAAJ\x26source=gbs_ViewAPI",“ preview":"noview", "embeddable":false}}); CS 3214 Spring 2010 4/11/2018

HTTP & AJAX AJAX Frameworks no longer build entire web pages from an HTML description Rather: bootstrap small amount of code, then dynamically load and update page “piece-by-piece” CS 3214 Spring 2010 4/11/2018

Goal – Use of AJAX Page 1 Page 2 Page 3 Conventional Navigation Model Submit button pressed Submit button pressed Page 1 Servlet1 Servlet1-1 Update portion of page HTML Page returned Page 2 Submit button pressed Mouse Hover Servlet 2 Servlet 1-2 Page 3 HTML Page returned Update Portion of Page Popularity of ajax over recent years because of advtgs AJAX is the technology responsible for the Web 2.0 hype. Many companies have started using AJAX for their projects because of the notable advantages that it offers in terms of user-interaction Our first goal was to implement the Edition Builder as a web application because Web-applications can be accessed by any user with a computer and an Internet connection. Moreover , web applications can be updated and maintained without installation of software on the client side. Hence, deployment of changes and updates can be done transparently from the user and in an expedited fashion. Problems in conventional navigation model Disruptive page refreshes after each user-interaction Confusing because of hyper-links and page layout AJAX Asynchronous JavaScript and XML Incremental update of pages (No page refreshes) Higher levels of interactivity and responsiveness Explain Working of AJAX An AJAX application has an intermediate layer between the user and the server called the AJAX engine. Each user interaction results in a call to the AJAX engine. The AJAX engine decides, whether a call requires action from the server. If the AJAX engine itself can service a call, it does so without resorting to communication with the server. In this way, unnecessary http requests to the server are avoided and user-interaction can proceed smoothly with other components that do not require server-processing at that moment. Thus, due to the interposition of the AJAX engine, a user interacts with the application without interruptions Conventional Navigation Model AJAX Navigation Model CS 3214 Spring 2010 4/11/2018

Server centric vs. Client centric AJAX frameworks Browser Browser Generated HTML+ JavaScript Client Side AJAX Engine Application HTML+ JavaScript Client Side AJAX Engine Dom Dom Server Side AJAX Engine Web Application Web Application Scraps of sample code that you find on the Web and that you can cut and paste into your own application, to comprehensive frameworks. Just above the level of code scraps are individual JavaScript components that present an API for a specific purpose. Some of these represent UI widgets that will appear on a Web page, like the Dojo Button, and others are for solving lower-level, plumbing-related issues like communicating with the server or manipulating the browser DOM (for example the Prototype APIs). Fundamental choices Give examples of toolkits that follow either model Explain dom If you look at the diagrams in Figure 2 below, you can see that in the server-centric model, the application programmer develops the entire application in what appears to the programmer to be server-side code. Of course, DHTML and JavaScript are involved when the application runs, but the framework does not expose these to the programmer. The framework provides both a server-side and client-side Ajax engine. The server-side engine generates HTML and JavaScript that is served into the browser along with a client-side engine, which provides APIs used by the generated code to manipulate the browser DOM, receive events, and push them back to the server-side engine, which communicates events back to the application. A client-side framework, on the other hand, expects the application programmer to write both the server side of the application and the part that will run in the browser. The client-side code is served into the browser along with the Ajax engine, which performs the same intercession functions between the DOM and the application code that it does in the server-centric model An advantage of client side frameworks is that developers can leverage JavaScript skills to combine features from various frameworks and create a complex application. But, client side frameworks entail significant amount of JavaScript programming, which can still give rise to unmaintainable JavaScript code. Moreover, with client-centric AJAX frameworks, the programmer needs to take the responsibility of sending client state to the server periodically. If the client fails to send state information to the server then the server may not be able to retain consistency of the application based on the client-state. Server Server Server-Centric Client-Centric Framework code Application Code Generated Code CS 3214 Spring 2010 4/11/2018

Architectures and Protocol on top of HTTP REST: Representational State Transfer URL represent resources SOAP: Remote-procedure call abstraction CS 3214 Spring 2010 4/11/2018

Network Address Translation CS 3214 Spring 2010 4/11/2018

NAT: Network Address Translation rest of Internet local network (e.g., home network) 192.168.5/24 192.168.5.62 gogo.rlogin 192.168.5.1 /hn1.rlogin 192.168.5.63 umaro.rlogin 128.173.41.81 hn1.cs.vt.edu 192.168.5.64 kefka.rlogin All datagrams leaving local network have same single source NAT IP address: 128.173.41.81, different source port numbers Datagrams with source or destination in this network have 192.168.5.* address for source, destination (as usual) CS 3214 Spring 2010 4/11/2018

NAT: Network Address Translation Motivation: local network uses just one IP address as far as outside word is concerned: no need to be allocated range of addresses from ISP: - just one IP address is used for all devices can change addresses of devices in local network without notifying outside world can change ISP without changing addresses of devices in local network devices inside local net not explicitly addressable, visible by outside world (a huge security plus). CS 3214 Spring 2010 4/11/2018

NAT: Network Address Translation Implementation: NAT router must: outgoing datagrams: replace (source IP address, port #) of every outgoing datagram to (NAT IP address, new port #) . . . remote clients/servers will respond using (NAT IP address, new port #) as destination addr. remember (in NAT translation table) every (source IP address, port #) to (NAT IP address, new port #) translation pair incoming datagrams: replace (NAT IP address, new port #) in dest fields of every incoming datagram with corresponding (source IP address, port #) stored in NAT table CS 3214 Spring 2010 4/11/2018

NAT: Network Address Translation NAT translation table WAN side addr LAN side addr 1: host 192.168.5.62 sends datagram to 128.119.40.186, 80 2: NAT router changes datagram source addr from 192.168.5.62, 3345 to 128.173.41.81, 5001, updates table 128.173.41.81, 5001 192.168.5.62, 3345 …… …… S: 192.168.5.62, 3345 D: 128.119.40.186, 80 1 S: 128.119.40.186, 80 D: 192.168.5.62, 3345 4 192.168.5.62 S: 128.173.41.81, 5001 D: 128.119.40.186, 80 2 192.168.5.1 128.173.41.81 192.168.5.63 S: 128.119.40.186, 80 D: 128.173.41.81, 5001 3 4: NAT router changes datagram dest addr from 128.173.41.81, 5001 to 192.168.5.62, 3345 3: Reply arrives dest. address: 128.173.41.81, 5001 192.168.5.64 CS 3214 Spring 2010 4/11/2018

Managing NAT table NAT Gateway (usually) adds entries for datagrams traveling private to public automatically Allows UDP/TCP clients to transparently sendto/connect to outside servers Removal of entries UDP: timeout due to inactivity TCP: timeout + TCP connection teardown Other direction requires configuration so NAT Gateway knows where to forward incoming datagram even if no private host previously punched a hole by initiating UDP traffic/TCP connection CS 3214 Spring 2010 4/11/2018

NAT Disadvantages 16-bit port-number field: NAT is controversial: Only 60,000 simultaneous connections with a single LAN-side address! NAT is controversial: routers should only process up to layer 3 violates end-to-end argument NAT possibility must be taken into account by app designers, eg, P2P applications address shortage should instead be solved by IPv6 really annoying if you time out on rlogin.cs.vt.edu CS 3214 Spring 2010 4/11/2018

NAT Challenges Considering that most Internet hosts are behind NAT these days – how should applications be written to deal with that? No problem as long as server has public IP and client knows where to connect (HTTP, XMPP, SMTP, POP) If server has private IP, entries in NAT forwarding table can be manually configured What about P2P applications? Could relay through server, but that would defeat purpose of P2P Instead, a technique called “hole punching” is widely used (e.g., in Skype) Discussed in [Ford/Srisuresh/Kegel 2005] UDP hole punching is widely used, but TCP hole punching is possible as well CS 3214 Spring 2010 4/11/2018

NAT Relaying All traffic goes through S Source: [Ford/Srisuresh/Kegel 2005] CS 3214 Spring 2010 4/11/2018

UDP Hole Punching Rendezvous server only directs punches, traffic goes P2P Details in [Ford/Srisuresh/Kegel 2005] CS 3214 Spring 2010 4/11/2018