推荐阅读
  • HTML5 浏览器支持

    HTML5 浏览器支持 你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。 HTML5 浏览器支持 现代的浏览器都支持 HTML5。 此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。 正因为如此,你可以 “教会” 浏览器处理 “未知” 的 HTML 元素。 甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的

  • HTML5 表单属性

    HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加了几个新属性. <form>新属性: autocomplete novalidate <input>新属性: autocomplete autofocus form

  • HTML5 Audio(音频)

    HTML5 Audio(音频) HTML5 提供了播放音频文件的标准。 互联网上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准。 今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。 浏览器支持 Internet Explorer

  • HTML5 Web Workers

    HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能。 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。 web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web wor

  • HTML5 新元素

    HTML5 新元素 HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。 为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。

  • HTML5 代码规范

    HTML(5) 代码规范 HTML 代码约定 很多 Web 开发人员对 HTML 的代码规范知之甚少。 在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML。 使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。 而针对于 HTML5 ,我们应该形成比较好的代码规范,以下提供了几种规范的建议。 使用正确的文档类型 文档类型声明位于HTML文档的第一行:

  • HTML5 SSE

    HTML5 服务器发送事件(Server-Sent Events) HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。 例子:Faceb

  • HTML5 表单元素

    HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <keygen> <output> 注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 <

  • HTML5 地理定位

    HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位用户的位置。 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Op

  • HTML5 语义元素

    HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <table>, and <im

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

 var Socket = new WebSocket(url, [protocol] ); 

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象:

属性 描述
Socket.readyState

只读属性 readyState 表示连接状态,可以是以下值:

  • 0 - 表示连接尚未建立。

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

  • 2 - 表示连接正在进行关闭。

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

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:

事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:

方法 描述
Socket.send()

使用连接发送数据

Socket.close()

关闭连接

WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

客户端的 HTML 和 JavaScript

目前大部分浏览器支持 WebSocket() 接口,你可以在以下浏览器中尝试实例: Chrome, Mozilla, Opera 和 Safari。

lvstudy_websocket.html 文件内容

 <!DOCTYPE HTML>

<html>

   <head>

   <meta charset="utf-8">

   <title>爱学习网教程(lvstudy.com)</title>

    

      <script type="text/javascript">

         function WebSocketTest()

         {

            if ("WebSocket" in window)

            {

               alert("您的浏览器支持 WebSocket!");

               // 打开一个 web socket

               var ws = new WebSocket("ws://localhost:9998/echo");

                

               ws.onopen = function()

               {

                  // Web Socket 已连接上,使用 send() 方法发送数据

                  ws.send("发送数据");

                  alert("数据发送中...");

               };

                

               ws.onmessage = function (evt) 

               { 

                  var received_msg = evt.data;

                  alert("数据已接收...");

               };

                

               ws.onclose = function()

               { 

                  // 关闭 websocket

                  alert("连接已关闭..."); 

               };

            }

            else

            {

               // 浏览器不支持 WebSocket

               alert("您的浏览器不支持 WebSocket!");

            }

         }

      </script>

        

   </head>

   <body>

      <div id="sse">

         <a href="javascript:WebSocketTest()">运行 WebSocket</a>

      </div>

   </body>

</html> 

安装 pywebsocket

在执行以上程序前,我们需要创建一个支持 WebSocket 的服务。从 pywebsocket 下载 mod_pywebsocket ,或者使用 git 命令下载:

 git clone https://github.com/google/pywebsocket.git 

mod_pywebsocket 需要 python 环境支持

mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展,安装步骤如下:
  • 解压下载的文件。

  • 进入 pywebsocket 目录。

  • 执行命令:

    $ python setup.py build
    
    $ sudo python setup.py install 
  • 查看文档说明:

    $ pydoc mod_pywebsocket 

开启服务

pywebsocket/mod_pywebsocket 目录下执行以下命令:

 $ sudo python standalone.py -p 9998 -w ../example/ 

以上命令会开启一个端口号为 9998 的服务,使用 -w 来设置处理程序 echo_wsh.py 所在的目录。

现在我们可以在 Chrome 浏览器打开前面创建的 lvstudy_websocket.html 文件。如果你的浏览器支持 WebSocket(), 点击"运行 WebSocket",你就可以看到整个流程各个步骤弹出的窗口,流程 Gif 演示:

在我们停止服务后,会弹出 "连接已关闭..."。

关于我们 免责声明 联系我们
Copyright © 2020 爱学习网 浙ICP备18049359号 网站地图 Google地图