HTML5 服务器推送事件
传统的 Web 应用程序生成发送到 Web 服务器端的事件。比如，点击一个链接会从服务器请求一个新页面。
这种从 Web 浏览器到 Web 服务器的时间类型可以称作客服端事件。
随着 HTML5 的出现，<a rel="nofollow" href="http://www.whatwg.org/" "="" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration: none;">WHATWG Web Applications 1.0 引入了一个从 Web 服务器到 Web 浏览器的事件流，被称作服务器推送事件（SSE）。使用 SSE 可以不停的将 DOM 事件推送到用户的浏览器中。
这个事件流方法会打开一个到服务器的持久连接，新消息可用时发送数据到客户端，从而不再需要持续的轮询。
SSE Web 应用程序
要在 Web 应用程序中使用服务器推送事件，我们需要给文档添加一个 <eventsource>元素。
<eventsource> 元素的 src 属性应该指向一个 URL，这个 URL 应该提供一个 HTTP 持久连接用于发送包含事件的数据流。
这个 URL 将会指向一个持续发送事件数据的 PHP，PERL 或者任意 Python 脚本。下面是一个简单的期望获得服务器时间的 Web 应用程序示例。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id="sse">
<eventsource src="/cgi-bin/ticker.cgi" />
</div>
<div id="ticker">
<TIME>
</div>
</body>
</html>
SSE 服务器端脚本
服务器端脚本应该发送 Content-type 头指定类型为 text/event-stream，如下所示：
print "Content-Type: text/event-stream\n\n";
设置 Content-type 之后，服务器端脚本将发送一个后面紧跟事件名称的 Event: 标签。下面的示例将会发送一个以换行符结束的 Server-Time 作为事件名称。
print "Event: server-time\n";
更后一步是使用 Data: 标签发送事件数据，紧随其后的是以换行符结束的整数字符串值，如下所示：
$time = localtime();
print "Data: $time\n";
下面是用 perl 编写的完整 ticker.cgi：
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}处理服务器推送事件
让我们修改一下我们的 Web 应用程序来处理服务器推送时间。下面是更终示例：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
document.getElementsByTagName("eventsource")[0].
addEventListener("server-time", eventHandler, false);
function eventHandler(event)
{
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id="sse">
<eventsource src="/cgi-bin/ticker.cgi" />
</div>
<div id="ticker" name="ticker">
[TIME]
</div>
</body>
</html>HTML5 WebSockets 教程
Web Sockets 是用于 Web 应用程序的新一代双向通信技术，运行在单一套接字之上，它通过 JavaScript 接口暴漏在 HTML5 兼容的浏览器中。
一旦取得 Web 服务器上的 Web Socket 连接之后，就可以通过调用 send() 方法从浏览器发送数据到服务器上，通过onmessage 事件处理程序从服务器接收数据到浏览器中。
下面是创建一个新的 WebSocket 对象的 API。
var Socket = new WebSocket(url, [protocal] );
第一个参数 url 用于指定要连接的 URL。第二个属性 - 端口是可选的，如果提供，就会指定一个服务器必须支持连接成功的子协议。
WebSocket 属性
下面是 WebSocket 对象的属性。假定我们已经创建了上述的 Socket 对象：
| 属性 | 描述 |
|---|
| Socket.readyState | 只读属性readyState表示连接的状态。有以下取值： 0 表示连接尚未建立。 1 表示连接已建立，可以进行通信。 2 表示连接正在进行关闭握手。 3 表示连接已经关闭或者连接不能打开。
|
| Socket.bufferedAmount | 只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。 |
WebSocket 事件
下面是 WebSocket 对象相关的事件。假定我们已经创建了上述的 Socket 对象：
| 事件 | 事件处理程序 | 描述 |
|---|
| open | Socket.onopen | 建立 socket 连接时触发这个事件。 |
| message | Socket.onmessage | 客户端从服务器接收数据时触发。 |
| error | Socket.onerror | 连接发生错误时触发。 |
| close | Socket.onclose | 连接被关闭时触发。 |
WebSocket 方法
下面是 WebSocket 对象相关的方法。假定我们已经创建了上述的 Socket 对象：
| 方法 | 描述 |
|---|
| Socket.send() | send(data) 方法使用连接传输数据。 |
| Socket.close() | close() 方法用于终止任何现有连接。 |
WebSocket 示例
一个 WebSocket 就是客户端和服务端之间的标准双向 TCP 套接字。套接字以 HTTP 连接开始，在 HTTP 握手之后“升级”为 TCP 套接字。握手之后，任意一端都可以发送数据。
客户端 HTML 和 JavaScript 代码
编写这篇教程时，只有少数几个浏览器支持 WebSocket() 接口。你可以使用更新版的 Chrome，Mozilla，Opera 和 Safari 尝试下面这个例子。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("WebSocket is supported by your Browser!");
// Let us open a web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function()
{
// websocket is closed.
alert("Connection is closed...");
};
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>安装 pywebsocket
在测试上面的客户端程序之前，需要一个支持 WebSocket 的服务器。可以从 <a rel="nofollow" href="http://code.google.com/p/pywebsocket/" "="" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration: none;">pywebsocket 下载 mod_pywebsocket-x.x.x.tar.gz，它只在为 Apache HTTP 服务器提供 WebSocket 扩展，然后按照如下步骤安装。
解压缩和解压下载的文件
进入 pywebsocket-x.x.x/src/ 目录。
执行 $python setup.py build
执行 $sudo python setup.py install
然后通过 $pydoc mod_pywebsocket 读取文档
这将会把他安装到我们的 python 环境中。
启动服务器
进入 __pywebsocket-x.x.x/src/mod_pywebsocket__ 文件夹并运行如下命令：
$sudo python standalone.py -p 9998 -w ../example/
这会启动监听 9998 端口的服务器，然后使用通过 -w 选项指定的处理程序目录，也就是 echo_wsh.py 所在目录。
现在使用 Chrome 浏览器打开起初创建的 html 文件。如果浏览器支持 WebSocket()，那么会得到一个指示浏览器支持 WebSocket 的消息框，当我们点击 “Run WebSocket” 时会得到服务器脚本发出的 Goodbye 信息。
HTML5 画布
HTML5 <canvas> 元素为我们使用 JavaScript 绘制图形提供了一种简单而又强大的方式。它可以用来绘制图表，制作摄影作品或者做一些简单（以及复杂）的动画。
这里有一个简单的 <canvas> 元素，除了所有核心的 HTML5 属性，比如 id，name 和 class 等等之外，它只有两个特定的属性 width 和 height。
<canvas id="mycanvas" width="100" height="100"></canvas>
使用 _getElementById()__ 方法很容易找到这个 <canvas> 元素，如下所示：
var canvas = document.getElementById("mycanvas");我们来看一个在 HTML5 文档中使用 <canvas> 元素的简单示例。
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>便于学习上述概念 - 请使用更新版的 Safari 或者 Opera 进行ExplorerCanvas 让 IE 浏览器支持 Canvas。只需按照如下方式引入这个脚本即可：
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
HTML5 Canvas 示例
本教程涵盖下列 HTML5 <canvas> 元素相关的示例。
| 示例 | 描述 |
|---|
| 绘制路径 | 学习如何在 HTML5 <canvas> 元素中使用路径创建形状。 |
| 绘制贝塞尔曲线 | 学习如何使用 HTML5 <canvas> 元素绘制贝塞尔曲线。、 |
| 使用图像 | 学习如何在 HTML5 <canvas> 元素中使用图像。 |
| 样式和颜色 | 学习如何使用 HTML5 <canvas> 元素应用样式和颜色。 |
| 图案和投影 | 学习如何绘制不同的图案和阴影。 |
| 画布平移 | 这个方法用于移动画布和它原点到网格上的不同点。 |
| 画布缩放 | 这个方法用于增大或者减小画布网格中的单位。 |
| 画布合成 | 这个方法用于从画布上屏蔽某些区域或者清除某一部分。 |
| <a rel="nofollow" href="http://www.tutorialspoint.com/html5/canvas_animation.htm" "="" title="Canvas Animation" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration: none;">Canvas 动画 | 学习如何使用 HTML5 画布和 JavaScript 创建基本的动画。 |
HTML5 音频和视频
HTML5 特性，包括原生音频和视频支持而无需 Flash。
HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源，包含 controls 属性让用户可以播放和暂停媒体。
嵌入视频
下面是在 Web 页面中嵌入视频文件更简单的形式：
<video src="foo.mp4" width="300" height="200" controls>
Your browser does not support the <video> element.
</video>
目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是更常用的视频格式是：
Ogg：带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
mpeg4：带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。
我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素，浏览器会使用第一个认可的格式：
<!DOCTYPE HTML>
<html>
<body>
<video width="300" height="200" controls autoplay>
<source src="/html5/foo.ogg" type="video/ogg" />
<source src="/html5/foo.mp4" type="video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>
便于学习上述概念 - 请使用更新版的 Safari 或 Opera 进行在线练习。
Audio 属性规范
HTML5 audio 标签可以使用多个属性来控制外观，感受以及各种控制功能：
| 属性 | 描述 |
|---|
| autoplay | 如果指定这个布尔值属性，只要没停止加载数据，音频就会立刻自动开始播放。 |
| autobuffer | 如果指定这个布尔值属性，即使没有设置自动播放，音频也会自动开始缓冲。 |
| controls | 如果指定这个属性，表示允许用户控制音频播放，包括音量控制，快进以及暂停/恢复播放。 |
| loop | 如果指定这个布尔值属性，表示允许音频播放结束后自动回放。 |
| preload | 这个属性指定加载页面时加载音频并准备就绪。如果指定自动播放则忽略。 |
| src | 要嵌入的音频 URL。可选，可以在音频块里面使用 <source> 元素指定要嵌入的音频来替代。 |
处理媒体事件
HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能：
| 事件 | 描述 |
|---|
| abort | 播放中止时生成这个事件。 |
| canplay | 足够的数据可用并且媒体可以播放时生成这个事件。 |
| ended | 播放完成时生成这个事件。 |
| error | 发生错误时生成这个事件。 |
| loadeddata | 媒体第一帧载入完成时生成这个事件。 |
| loadstart | 开始加载媒体时生成这个事件。 |
| pause | 播放暂停时生成这个事件。 |
| play | 播放开始或者恢复时生成这个事件。 |
| progress | 定期通知媒体下载进度时生成这个事件。 |
| ratechange | 播放速度改变时生成这个事件。 |
| seeked | 快进操作完成时生成这个事件。 |
| seeking | 快进操作开始时生成这个事件。 |
| suspend | 媒体加载被暂停时生成这个事件。 |
| volumechange | 音频音量变化时生成这个事件。 |
| waiting | 请求操作（比如播放）被延迟，等待另一个操作完成（比如快进）时生成这个事件。 |
下面是一个允许播放给定视频的示例：
<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<html>
<body>
<form>
<video width="300" height="200" src="/html5/foo.mp4">
Your browser does not support the <video> element.
</video>
<input type="button" onclick="PlayVideo();" value="Play"/>
</form>
</body>
</html>便于学习上述概念 - 请使用更新版的 Safari 或 Opera 进行<a rel="nofollow" href="http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-51.htm" "="" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration: none;">在线练习。
配置服务器媒体类型
大多数服务器默认都没使用正确的 MIME 类型提供 Ogg 或 mp4 媒体，因此我们可能需要添加适当的配置。
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
