Transcript 159.339 - Massey University

159.339
LECTURE
Client-Server Model
WWW, HTTP, INTERNET
PROTOCOL STACK, TCP/IP, Xitami,
CGI
159.339
Last time, we saw a quick tour of the different web
technologies involved for a simple CGI program
deployed in our own webserver.
Next, we would like to see more details on the ClientServer interaction. We shall study the details of the
internet protocol stack, the network core and the
HTTP protocol responsible for allowing CLIENTSERVER communication.
We will also see how a webserver is installed and
configured.
Overview: Client-Server
Client
Web
browser
159.339
requests an Internet
resource by
specifying a URL and
providing input via HTTP
encoded strings
OS
Usually we want to open an HTML file from some
website, but we can also open a program alternatively.
HTML supports Javascript, DOM, CSS, HTML Events
Overview: Client-Server
Client
Web
browser
159.339
requests an Internet
resource by
specifying a URL and
providing input via HTTP
encoded strings
Server
os
Web
server
os
Internet
Network Core
Overview: Client-Server
Client
Web
browser
159.339
Server-side program
works out the necessary
business logic and
dynamically builds an
HTML response.
Server
os
Web
server
os
Internet
Overview: Client-Server
Client
Web
browser
159.339
Server-side program
sends back output as
HTML using HTTP as
transport mechanism
Server
Web
server
Internet
Overview: Client-Server
Client
Web
browser
159.339
Client-side program (Internet Explorer,
Firefox) displays the HTML output
• HTML text
• Graphics
• Streaming video/audio
• XML
Server
Web
server
Internet
Overview: Client-Server
159.339
Our codes might be embedded into an HTML, or viceversa. It may generate an HTML on its own as well.
Server
Web
server
My codes
HTML
MySQL
Client
Operating System
Web
browser
Internet
PHP
159.339
What is the HTTP
protocol?
What is a protocol in
the first place?
What’s a protocol?
159.339
a human protocol and a computer network protocol:
TCP connection request
Hi
Hi
TCP connection reply
Got the time?
Get http://www.massey.ac.nz/
2:00
<file>
time
HTTP Protocol
159.339
Client: makes a request
Client
(browser)
Web
browser
159.339
requests an Internet
resource by
specifying a URL and
providing input via HTTP
encoded strings
GET hello.php HTTP/1.1
Host: www.massey.ac.nz:80
os
Server
Web
server
os
Internet
Network Core
Server: responds
159.339
• Webserver supports HTTP.
Server
Web
server
My codes
HTTP
HTML
MySQL
Client
Operating System
Web
browser
TCP/IP
Internet
PHP
HTTP and TCP/IP
159.339
• Webserver supports HTTP.
• HTTP compliancy is implemented
using TCP/IP components.
Server
Web
server
My codes
HTTP
HTML
MySQL
Client
Operating System
Web
browser
TCP/IP
HTTP/1.1 200 OK
(document body)
Internet
PHP
Client-Server model
159.339
• How do two computers talk to each
other?
Client
Create a socket
Connect socket to server
Send/receive data
Server
Create a socket
Bind socket to address
Listen for connections
Accept a client connection
Send/receive data
Internet protocols
159.339
A bit of history...
In a network, standards are needed for data representation,
signaling, authentication, error detection etc
In ARPANET, the network itself handled communication protocols
using NCP (Network Control program). Highly incompatible with
other networks. Now obsolete.
1983. NCP replaced by TCP/IP (Transfer Control Protocol/
Internet Protocol). Here the hosts are responsible for protocols.
TCP/IP networking
159.339
• Internet Protocol (IP)
– Determines how a host is addressed on the
Internet
– Binds a software address to a hardware address
• Transfer Control Protocol (TCP)
– Determines how data is divided into packets and
delivered
• But these are not enough to allow the WWW
to exist as it is today
Hypertext/hypermedia
159.339
A hypertext document is a text file with control instructions to cross
reference with other documents, or perform some action - “branch or
perform on request” (Nelson 1970).
Hypermedia. Extends the concept of hypertext to include graphics, audio,
and video.
Key concept: hypertext/media entities are linked in a web like structure
159.339
Hypermedia over networks
• Early implementations (eg Apple’s Hypercard) worked fine on nonnetworked computers, but couldn’t be used to refer to documents
distributed over a network.
• TCP/IP says nothing about the structure of data sent from one
computer to another
• What is needed:
– A standardized mechanism to determine how hypertext/media is
encoded and transported
– A standardized mechanism for identifying resources on the Internet
World Wide Web (1990s)
159.339
• Tim Burners-Lee worked out how to use hypertext
over networks. Two key inventions
– HTTP:
– URL:
Hypertext Transfer Protocol
Uniform Resource Locator
• HTML (Hypertext Mark-up Language) was another
important standard
• The first web page is archived at:
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html
W3C
159.339
World Wide Web Consortium. Based at MIT, USA.
Consortium that produces “recommendations” for the WWW
Eg, there were some incompatible HTML versions from different
vendors. W3C aims to get everyone to agree to common standards.
Standards are crucial to effective internet programming.
Uniform Resource Locator
159.339
Standardized address name for resources (documents, images, …) on the
WWW.
a URL has two parts:
[protocol scheme] :// [target]
Eg:
http://www.imdb.com
ftp://astro.caltech.edu
ftp://ftp.cs.cmu.edu/user/ai/areas/fuzzy/systems/anfis
Hypertext Transfer Protocol
159.339
An application layer protocol in the internet protocol suite.
http is a request/response protocol between clients and servers.
Determines how client requests are structured
Determines how hypertext is sent from server to client
Clients: usually browsers
Web servers: software program that (usually) works as a daemon
listening to requests from clients and serving up the web documents.
159.339
Hypertext Transfer Protocol
• A “resource” could be:
–
–
–
–
–
An ASCII file (HTML, plain text,..)
An image file
Server-side application result (eg PHP output)
A database query result
A “service” offered by a server
Identifying resources
159.339
• Use a URL (Uniform Resource Locator)
– Specifies the location of a resource, together with the
means (http, ftp, …) of accessing it
• A URL is actually a type of a more general URI
(Uniform Resource Identifier)
• Another type of URI is a URN (Uniform
Resource Name)
– Identifies a resource namespace without specifying
where it is or how it is accessed
– A URN is similar to a person's name, while a URL is
like a street address
Example: The URN for "The Last Unicorn", identified by its book number
urn:isbn:0451450523
Internet protocol suite
159.339
OSI (Open Systems Interconnection) model
Application layer. Used by “network aware” programs to
communicate with other programs
Transport layer. Ensures data arrives at destination and
provides reliability checks
Network layer. Determines how nodes in a network are
defined. Handles routing of datagrams from source to
destination
Data link layer. Specifies how packets are transported over
the physical layer.
Ethernet cards implement both
Link and Physical Layers
Physical layer. The hardware that transports the data.
159.339
Layering: Physical Communication
data
application
transport
network
link
physical
application
transport
network
link
physical
network
link
physical
application
transport
network
link
physical
data
application
transport
network
link
physical
Examples
Application layer. HTTP, SMTP, FTP, Telnet, ssh, …
Transport layer. TCP
Network layer. IP
Data link layer. Ethernet, ISDN, WiFi
Physical layer. Wire, radio, fibre optic
159.339
Loading a web page
159.339
What happens when I ask a browser to load something like
http://www.massey.ac.nz/~nhreyes/index.html
?
Client-server model
Client
Create a socket
Connect socket to a server
Send request as HTTP encoded string
Receive http encoded response string
159.339
Server
Create socket
Bind socket to address
Listen for connections
Accept a connection
Receive string requesting a resource, eg
• request a web page
Send resource using protocol in URL
Important point
Client/server transactions take place by exchanging
request and response strings
Loading a web page
159.339
User
Client
(browser)
Web Server
Daemon
URL
Request string
html
source
Displayed
information
Response string
Sending the request
• Client makes connection to server
– If port not specified, default is port 80
• Request must specify a URL
– Universal Resource Location
• Structure of Request
– Request method + e-mail like message
159.339
159.339
Client request
Location of resource
Use this protocol
Request command
GET /~nhreyes/index.html HTTP/1.1
Host: www.massey.ac.nz:80
Resource is on this host (Internet address)
The response
SERVER-SIDE:
Server waits for request string and then sends back a response string
Response string format: a status line plus an e-mail like message.
The message comprises headers plus the document body
CLIENT-SIDE:
The browser extracts the response body and displays it to the users
159.339
Server response
159.339
Status line
Headers
HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34
GMTServer: Apache/1.3.27 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55
GMTEtag: "3f80f-1b6-3e1cb03b”
Accept-Ranges: bytesContent-Length: 438
Connection: close
Content-Type: text/html
Document body
Content-Length: 32
--frontier
This is the text body of the document
--frontier
MIME types
159.339
• Multipurpose Internet Mail Extensions
– Specifies the file format to follow
– E.g.
• text/html
• image/jpg
• application/pdf
• Your server-side application must specify the
correct MIME type it is delivering
HTTP characteristics
159.339
• Stateless Protocol
– Each transaction is independent and no
“state” information is retained
– Clients and server don’t remember
previous transactions
• HTTP/1.1 adds a persistence of sorts by
allowing multiple exchanges in one
transaction
Some Request Commands
159.339
• OPTIONS
– Request for communication options available for the Request-URI.
• GET
– Retrieve an entity requested in the Request-URI.
• HEAD
– Identical to GET but no message-body.
• POST
– Provide a block of data
• PUT
– Store the supplied Request-URI.
• DELETE
– Delete the resource identified by the Request-URI.
GET/POST
159.339
• Two very important HTTP constructs
• These provide a mechanism for the client to
send data to the server via HTTP
• GET method
– Data are encoded in the URL (URI)
• POST method
– Data are encoded in the headers
http://www.cs.tut.fi/~jkorpela/forms/methods.html
Some status-line examples
•
•
•
•
•
•
•
200 OK
404 Not Found
301 Moved Permanently
302 Moved Temporarily
303 See Other (HTTP 1.1 only)
500 Server Error
501 Not Implemented
159.339
GET Request
•
•
159.339
Use to request a specific URI
Additional Parameters specified via URL
– http://server/file?variable=val&variable2=val
– Most servers have a limit on the size of a url that can be processed
http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3
POST Request
POST /path/script.cgi HTTP/1.0
From:[email protected]
User-Agent:HTTPTool/1.0
Content-Type: application/x-www-form-urlencoded
Content-Length:32
home=Cosby&favorite+flavor=flies
http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3
159.339
Summary
•
•
•
•
•
•
159.339
Computer networking - client/server model
Concept of hypertext/hypermedia
Problems implementing hyper-text/media over networks
The WWW - key inventions: HTTP, URL, (HTML)
Client-server model in Internet programming
HTTP characteristics
159.339
Let’s see these web technologies in action.
Network Core
159.339
What’s in the network core?
Server
Web
server
My codes
HTTP
HTML
MySQL
Client
Operating System
Web
browser
TCP/IP
Internet
PHP
Trace route from Massey to MIT
Command: Tracert web.mit.edu
159.339
Demonstrations
159.339
1. Installing the Xitami webserver and configuring it’s port number and PHP
connection.
2. Configuring the webserver’s administrator’s password.
3. Configuring the server’s port number.
4. Deploying a CGI and an HTML in your own server.
5. Requesting for the HTML from the server, using a web browser as a client.
These demonstrations will show you how to set up the server and connect
to it using a web browser as a client. You will also see the different
network tools you can use to examine the network details.
Xitami Webserver
• free, fast and open source professional web server, written in
ANSI C
• Server supports HTTP/1.0, FTP, CGI/1.1, SSI protocols
• Security: basic authentication per directory, FTP access rights per
user and per directory
• Deployment: installs ready-to-run, portable to Windows, OS/2,
Unix, OpenVMS, fully portable web sites and web applications;
• Performance: internal multithreading engine, fast even on slower
systems
• Configuration: editable config files, or through a web-based
administration interface (WBA)
Documentation: http://legacy.imatix.com/html/xitami/
159.339
Webserver
159.339
This is a snapshot of the webserver we are going to use, it’s called Xitami.
Xgui32.exe
To install Xitami, follow the instructions at
xitami.docx and Xitami_cfg.docx (downloadable from our website)
Interact with your webserver using
PuTTY
159.339
Using a simple tool called PuTTY, examine the HTTP protocol in action
when a web client interacts with your webserver (Xitami, running in your
own machine).
PuTTY is a free implementation of Telnet and SSH for Windows and Unix
platforms, along with an xterm terminal emulator. It is written and
maintained primarily by Simon Tatham.
What is the IP address of your machine? ipconfig /all
Is your server running properly? What was the server’s response?
Which port number is open? netstat -anop TCP
http://surf11.com/entry/176/command-to-show-open-tcp-ports-windows
Server’s Configuration
159.339
Run the server’s gui, then select the Setup button.
Xigui32.exe
However, this will require authentication.
Using a text editor, edit the file named xitami.aut, from your xitami folder to
reflect the administrator’s password. Look for the Admin=- line, then supply
your desired password.
xitami.aut
[/admin]
Admin=# By default, admin
access is disabled
# Admin=LinPopTea
# Webmask=local
# <== when 'local',
remote access is not allowed
Setup
http://127.0.0.1:8080/admin
Invoke the administrator’s menu to inspect the webserver’s settings.
159.339
Server: console panel
159.339
Server: console panel
MESSAGES
1.
2.
3.
4.
5.
Create socket
Bind socket to address
Listen for connections
Accept a client connection
Send/receive data
Inspect how the webserver is preparing itself to welcome clients. This
shows how the server is using sockets for the connections.
159.339
Server: running and listening 159.339
Command: netstat -a
1.
2.
3.
4.
5.
Create socket
Bind socket to address
Listen for connections
Accept a client connection
Send/receive data
Actual result:
159.339
Client-Server Demo
Addresses
CLIENT
159.339
SERVER
IT046718
IT043068
IP Address: 130.123.249.23
IP Address: 130.123.249.203
Port Address: 8080
Sample web resource request:
http://it043068:8080/multiply/
You can connect to your server remotely. This is an example
of testing a server within a local network.
Nbstat (windows)
159.339
Displays protocol statistics and current TCP/IP connections
using NBT (NetBIOS over TCP/IP).
Look, there’s another name and address associated with a
computer: the NetBIOS and the MAC address.
NetBIOS an acronym for Network Basic Input/Output System. It provides
services related to the session layer of the OSI model allowing applications on
separate computers to communicate over a local area network. As strictly
an API, NetBIOS is not a networking protocol
Server’s Directory
Select multiply_post-remote.html
159.339
HTML containing a form & CGI
4
5
159.339
CGI’s response
159.339
Client-Server Interaction
159.339
Server
http://it043068:8080/multiply/
Web
server
My codes
HTTP
HTML
MySQL
Client
Operating System
Web
browser
TCP/IP
OS
Internet
PHP
159.339
Extras
(some other interesting tools)
whois
http://cqcounter.com/whois/
159.339
whois
159.339
References
CSS
http://www.w3.org/TR/2008/REC-CSS1-20080411/
Internet’s specifications are still evolving:
http://www.w3.org/TR/#tr_HTML
159.339
What’s next?
159.339
We shall be looking at all the details of prominent
internet programming languages and technology but we
shall study how to write HTML and CSS documents
first.
Next meeting, I shall provide a good background on the
nuts and bolts of the internet so that you may have
knowledge of the essential protocols that will be
interacting with our web server.
Editor
What editor can we use to assist us in writing PHP,
Javascript, HTML, CSS files, etc.?
phpDesigner Personal Edition
• a free editor for your web-development.
• rapid fast and full-featured PHP editor and PHP IDE with
built-in HTML, CSS and JavaScript editors and FTP/SFTP!
Link: http://www.mpsoftware.dk/
159.339
Validating HTML
Client
Web
browser
159.339
How to validate your HTML and CSS files?
We want to write HTML pages + CSS files
that are interoperable across many
platforms (OS + web browser combination)
Server
Web
server
http://www.w3.org/QA/Tools/
References
HTTP Protocol definition
http://www.w3.org/Protocols/rfc2616/rfc2616.html
Difference between GET and POST
http://www.cs.tut.fi/~jkorpela/forms/methods.html
159.339