HTML and CSS Reference
In-Depth Information
Enabling two-way communications between server and client with WebSockets
The obvious drawback with server-sent events is that they only facilitate one-way com-
munication—messages can only be sent from the server to the client, not vice versa. If
you need two-way communication, HTML5 provides WebSockets—bare-bones network-
ing between clients and servers, without the overhead associated with HTTP. WebSockets
are great for passing small amounts of data quickly, which is critical in applications like
online multiplayer games and time-sensitive financial systems.
In chapter 4 , you'll learn how to use all three of these new messaging technologies as you
build a simple chat application and a multiuser planning board, using server-sent events
and WebSockets via Node.js, and then allow them to communicate with each other through
cross-document messaging.
1.3.5. Document editing
Earlier in this chapter, we talked about the new forms features in HTML5. Web forms are a
great means of capturing simple plain-text user input, but they don't allow the user to edit
HTML content. Sure, you could load HTML source code in a <textarea> element and
allow the user to edit that, but wouldn't it be great if you could allow the user to edit the
content using a series of rich-text editing controls?
HTML5 defines two new attributes that allow you to enable rich-text editing in your HTML
documents. The first, contenteditable , can be set on any HTML element in your
page to make that element editable. The second, designMode , can be set on the HTML
document itself to make the entire document editable.
These attributes are supported by all modern browsers and were first introduced by Mi-
crosoft in IE 5.5.
When an element or document is editable, you can manipulate its content using the API
method document.execCommand , part of the Editing DOM API in HTML5. This
method accepts a wide selection of commands that will be applied to the current selection
or block, such as Bold, Italic, CreateLink, and many others. An example of the type of ed-
itor you can create with this functionality is shown in figure 1.12 ; even better, you'll learn
how to use these new features as you build that rich-text editor in chapter 3 .
Search WWH ::

Custom Search