Oracle GlassFish Server 3.0.1 Application Development Guide

Creating the Client Pages

Developing the HTML pages for the client involves performing these steps:

  1. Create a welcome HTML page, called index.html, that contains: one hidden frame for connecting to the servlet through an HTTP GET; one IFrame that embeds the count.html page, which contains the updated content; and one IFrame that embeds the button.html page, which is used for posting updates using HTTP POST.

  2. Create the count.html page that contains an HTML element that displays the current count and the JavaScript for updating the HTML element with the new count.

  3. Create the button.html page that contains a button for the users to submit updates.

ProcedureTo Create a HTML Welcome Page That Contains IFrames for Receiving and Sending Updates

  1. Create an HTML page called index.html.

  2. Add the following content to the page:

    <html>
    	<head>
    		<title>Comet Example: Counter with Hidden Frame</title>
    	</head>
    	<body>
      </body>
    </html>
  3. Add IFrames for connecting to the server and receiving and sending updates to index.html in between the body tags:

    <frameset>
    	<iframe name="hidden" src="hidden_comet" 
    		frameborder="0" height="0" width="100%"></iframe>
    	<iframe name="counter" src="count.html" 
    		frameborder="0" height="100%" width="100%"></iframe>
    <iframe name="button" src="button.html" frameborder="0" height="30%" widget="100%"></iframe>
    </frameset>

    The first frame, which is hidden, points to the servlet by referencing its context path. The second frame displays the content from count.html, which displays the current count. The second frame displays the content from button.html, which contains the submit button for incrementing the counter.

ProcedureTo Create a HTML Page That Updates and Displays the Content

  1. Create an HTML page called count.html and add the following content to it:

    <html>
    	<head>
    	</head>
    		<body>
    			<center>
    				<h3>Comet Example: Counter with Hidden Frame</h3>
    				<p>
    				<b id="count">&nbsp;</b>
    				<p>
    			</center>
    		</body>
    </html>

    This page displays the current count.

  2. Add JavaScript code that updates the count in the page. Add the following lines in between the head tags of count.html:

    <script type='text/javascript'>
    	function updateCount(c) {
    		document.getElementById('count').innerHTML = c;
    		parent.hidden.location.href = "hidden_comet";
    	};
    </script>

    The JavaScript takes the updated count it receives from the servlet and updates the count element in the page. The last line in the updateCount() function invokes the servlet's doGet method again to reestablish the connection.

    • For HTTP-Streaming:

      Add the same code as for long-polling, except for the following line:

      parent.hidden.location.href = “hidden_comet”

      This line invokes the doGet method of CometServlet again, which would reestablish the connection. In the case of HTTP-Streaming, you want the connection to remain open. Therefore, you don't include this line of code.

ProcedureTo Create the HTML Page That Allows Submitting Updates

  1. Create an HTML page called button.html and add the following content to it:

    <html>
    	<head>
    	</head>
    		<body>
    			<center>
    				<form method="post" action="hidden_comet">
    					<input type="submit" value="Click">
    				</form>
    			</center>
    		</body>
    </html>

    This page displays a form with a button that allows a user to update the count on the server. The servlet will then broadcast the updated count to all clients.