网站地图
  • 网站首页
  • 推荐模板
  • 免费建站
  • 菜鸟站长
  • 建站素材
  • 免费源码
  • 源码入门
  • HTML5WebSocket-WebSocket属性-WebSocket事件

    发布时间: 2022-03-27 16:05首页:a5源码 > 免费建站 > HTML入门 > 阅读()

    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, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可同意的子协议。

    WebSocket 属性

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

    属性描述Socket.readyState

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

    • 0 - 表示连接尚未打造。

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

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

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

    Socket.bufferedAmount

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

    WebSocket 事件

    以下是 WebSocket 对象的有关事件。假定大家用了以上代码创建了 Socket 对象:

    事件事件处置程序描述openSocket.onopen连接打造时触发messageSocket.onmessage推广客户端接收伏务端数据时触发errorSocket.onerror通信发生错误时触发closeSocket.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。

    runoob_websocket.html 文件内容

    <!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>新手课程</title><script type="text/javascript"> function WebSocketTest {if { alert;// 打开一个 web socket var ws = new WebSocket; ws.onopen = function {// Web Socket 已连接上,用 send 办法发送数据ws.send;alert; }; ws.onmessage = function { var received_msg = evt.data;alert; }; ws.onclose = function { // 关闭 websocketalert;};}else{ // 浏览器不支持 WebSocket alert;} }</script> </head> <body> <p id="sse"> <a href="javascript:WebSocketTest">运行 WebSocket</a></p> </body></html>

    安装 pywebsocket

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

    git clone https://github.com/谷歌archive/pywebsocket<p>mod_pywebsocket需要 python 环境支持</p>mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展,安装教程如下:</p><ul><li><p>解压下载的文件。</p></li><li><p>进入 <b>pywebsocket</b> 目录。</p></li><li><p>实行命令:</p><pre>$ 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 浏览器打开前面创建的 runoob_websocket.html 文件。假如你的浏览器支持 WebSocket, 点击"运行 WebSocket",你就可以看到整个步骤各个步骤弹出的窗口,步骤Gif 演示:

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

    特别声明:文章内容仅供参考,不造成任何投资建议。投资者据此操作,风险自担。

    网站首页 - 推荐模板 - 免费建站 - 菜鸟站长 - 建站素材 - 免费源码 - 源码入门

    未经本站书面特别授权,请勿转载或建立镜像

    Copyright © 2002-2021 a5源码 (http://www.sdsfygt.com) 网站地图 TAG标签