Developing the HTML pages for the client involves performing these steps:
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.
Create the button.html page that contains a button for the users to submit updates.
Create an HTML page called index.html.
Add the following content to the page:
<html> <head> <title>Comet Example: Counter with Hidden Frame</title> </head> <body> </body> </html>
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.
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"> </b> <p> </center> </body> </html>
This page displays the current count.
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.
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.