开发资讯设计沙龙

主页 > 新体验 > 开发资讯 > 网站开发

H5开发（四）：HTML5 服务器推送事件、WebSockets 教程、画布、音频和视频

adinnet/2017-08-30 15:44/网站开发

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 文本字节数。

属性

描述

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

上一篇：网站建设之页面底部如何设计？页脚放哪些内容？下一篇：什么是响应式网站？企业做响应式网站有哪些好处？