主页 > 洞察 > 开发资讯 > 网站开发
  • 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表示连接的状态。有以下取值:

    1. 0 表示连接尚未建立。

    2. 1 表示连接已建立,可以进行通信。

    3. 2 表示连接正在进行关闭握手。

    4. 3 表示连接已经关闭或者连接不能打开。

    Socket.bufferedAmount

    只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

    WebSocket 事件

    下面是 WebSocket 对象相关的事件。假定我们已经创建了上述的 Socket 对象:

    事件事件处理程序描述
    openSocket.onopen建立 socket 连接时触发这个事件。
    messageSocket.onmessage客户端从服务器接收数据时触发。
    errorSocket.onerror连接发生错误时触发。
    closeSocket.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 扩展,然后按照如下步骤安装。

    1. 解压缩和解压下载的文件

    2. 进入 pywebsocket-x.x.x/src/ 目录。

    3. 执行 $python setup.py build

    4. 执行 $sudo python setup.py install

    5. 然后通过 $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 标签中支持哪种视频格式。但是更常用的视频格式是:

    1. Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。

    2. 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



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