Messaging: communicating to and from scripts in HTML5 - HTML5 in Action - page 139

For everything to work, these files will need to be located in a directory where your web
server can find them. For Apache, this will likely be under /var/www/html, and for IIS,
this will be C:\Inetpub\WWWRoot; check the details in the documentation for your OS and
web server. Usually these folders have restricted access, so either create and edit the files in
your home directory and copy them across or run your editor with appropriate permissions.
Through the following steps we'll refer to this directory as the working directory .
We'll walk you through the build in eight steps:
• Step 1: Create a database in which to store chat messages.
• Step 2: Create a chat form.
• Step 3: Create a login form.
• Step 4: Implement a login process.
• Step 5: Send new chat messages to the server with AJAX.
• Step 6: Store new chat messages in the database.
• Step 7: Build an SSE stream at the server.
• Step 8: Connect to an SSE stream in the browser.
SSE on older browsers
Server-sent events are a rationalized version of the forever-frame hack discussed in ap-
pendix D . The required server-side code is similar, so the most obvious approach for fall-
back in older browsers is to use the forever frame if SSE isn't available. An alternative is
to use one of the prebuilt libraries, which implement a fallback transparently. One such lib-
rary is Remy Sharp's EventSource.js polyfill: https://github.com/remy/polyfills/blob/mas-
ter/EventSource.js .
Step 1: Create a database in which to store chat messages
Use your MySQL administration tool to create a database called ssechat (see appendix
C ) . Included in the code download is a chat.sql file, which, when run, will create two tables
in the database called sessions , to record who is logged in, and log , to record a log of
the chat messages. Get the file credentials.php from the source code download and edit it to
contain your database connection details. The example expects $user , $pass , and $db
to define strings for the username, password, and connection string, respectively. The $db
variable will look something like "mysql:host=localhost;dbname=ssechat" .