Nadia follows a hypertext link labeled "Dirk's Updates" expecting to see a list of Dirk's status update messages which will be refreshed in near-realtime based on updates made by Dirk. The link is an XHTML link encoded as <a href="http://example.com/PublicUpdates?user=dirk">Dirk's Updates</a>
As in other examples, the browser opens a network connection to port 80 on the server at "example.com" and obtains the result of making a "GET" request as specified by the HTTP protocol. The server's response message consists of several headers, and an HTML document containing some HTML, and Javascript instructions. The browser reads the sequence of octets making up this representation, and executes the Javascript instructions, resulting in a new network request to a Websocket server, as shown below:
var ws2 = new WebSocket("ws://example.com:9998/PublicUpdates?user=dirk") ;
The link to this feed points to a Websocket server. Nadia's browser analyzes the URI and determines that its scheme is "ws". The browser will open a network connection to port 9998 on the server and perform a Websocket handshake on the resource, requesting that the server begin sending update messages over the network connection to the client.
The server sends one or more response messages to the browser, according to the Websocket protocol. These messages trigger DOM events within the browser which result in rendering of a representation of the resource, as shown below:
ws2.onmessage = function( event ){ c = document.getElementById("updates") ; c.innerHTML = event.data ; } ;
Each time the ws2.onmessage event is triggered, an update will be made to the client-local representation of the resource which was originally delivered in response to Nadia clicking on the link to retrieve "Dirk's updates".
Dirk follows a hypertext link labeled 'Directions to Nadia's house'. The link to the textual directions is an HTML link encoded as <a href="http://example.com/directionsTo?lat=40.23&long=43.20">Directions to Nadia's</a>. Nadia's browser analyzes the URI and determines that its scheme is "http". The browser configuration determines how it locates the identified information, which might be via a cache of prior retrieval actions, by contacting an intermediary (such as a proxy server), or by direct access to the server identified by a portion of the URI. In this example, the browser opens a network connection to port 80 on the server at "example.com" and sends a "GET" message as specified by the HTTP protocol, requesting a representation of the resource.
The server sends a response message to the browser, once again according to the HTTP protocol. The message consists of several headers and a textual representation. The browser reads the headers, learns from the "Content-Type" field that the Internet media type of the representation is "text/html", reads the sequence of octets that make up the representation data. In that sequence of bytes, it determines that the server is requesting (via the use of a Javascript API call) the current location latitude and longitude of the browser. The user-agent prompts Dirk to ask him if the browser may use his current location to calculate directions to Nadia's house, and then displays the results of this combination of the server-generated response and the results of the client's interpretation of the server's request to provide its location.
function showMap(position) {
// Show a map centered at (position.coords.latitude, position.coords.longitude).
}
// One-shot position request.
navigator.geolocation.getCurrentPosition(showMap);
Response message is not simply to be rendered by the client "as-is"
Rendering of the representation will be highly influenced by the client (results of running the Javascript API to get current location might include, for example, asking the user for permission)
There is a difference between exposing a client resource via a Javascript API and exposing that same resource in a more "traditional" manner (via an HTTP server).
Dirk follows a hypertext link labeled 'Directions from Dirk's to Nadia's'. The link to these directions is created via a Javascript call to create an HTML link encoded as <a href="http://example.com/directionsTo?lat=40.23&long=43.20&from_lat=40.24&from_long=43.21">Directions to Nadia's (Link)</a>. Dirk's browser displays the URI allowing Dirk to copy it into his email program and send email to his wife, Elina. Elina receives the email, and clicks on the link, causing her browser to open.