ylbtech-HTML5: HTML5 WebSocket
1.返回顶部
1、

HTML5 WebSocket

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

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

浏览器通过 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。

runoob_websocket.html 文件内容

<!DOCTYPE HTML>

<html>

   <head>

   <meta charset="utf-8">

   <title>菜鸟教程(runoob.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 浏览器打开前面创建的 runoob_websocket.html 文件。如果你的浏览器支持 WebSocket(), 点击"运行 WebSocket"，你就可以看到整个流程各个步骤弹出的窗口，流程 Gif 演示：

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

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

HTML5: HTML5 WebSocket的更多相关文章

  1. 认识HTML5的WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  2. HTML5之WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  3. HTML5 的WebSocket

    认识HTML5的WebSocket

  4. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  5. HTML5的Websocket（理论篇 I）

    HTML5的Websocket(理论篇 I) ** 先请来TA的邻居:** http:无状态.基于tcp请求/响应模式的应用层协议 (A:哎呀,上次你请我吃饭了么? B:我想想, 上次请你吃了么) t ...

  6. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(二)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用WCF构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.创建WCF服务 ...

  7. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用Socket构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.网页客户 ...

  8. html5利用websocket完成的推送功能（tomcat）

    html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...

  9. HTML5 and Websocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  10. 利用html5、websocket和opencv实现人脸检测

    最近学习人脸识别相关的东西,在MFC下使用OpenCV做了一个简单的应用.训练需要较多的数据,windows应用程序终究还是不方便,于是想着做成CS模式:检测识别都放在服务器端,视频获取和显示都放在网 ...

随机推荐

  1. Html代码查看器

    Html代码查看器 效果: 分析: 1.连接网络需要权限 <uses-permission android:name="android.permission.INTERNET" ...

  2. IIS的站点配置存储在applicationHost.config

    C:\Windows\System32\inetsrv\Config\applicationHost.config

  3. STL排序函数

    Qsort,Sort,Stable_sort,Partial_sort,List::sort 参考

  4. C#-Newtonsoft.Json遍历并修改JSON

    遍历 JObject:https://www.newtonsoft.com/json/help/html/JObjectProperties.htm 遍历 JArray: string json = ...

  5. centos7运行yum报如下提示：Run "yum repolist all" to see the repos you have

    centos7运行yum报如下提示: There are no enabled repos. Run "yum repolist all" to see the repos you ...

  6. HTTP面试题目

    转自:http://m.blog.csdn.net/zhangliangzi/article/details/51336564 1.说一下什么是Http协议? 对器客户端和 服务器端之间数据传输的格式 ...

  7. JVM运行时区域详解。

    我们知道的JVM内存区域有:堆和栈,这是一种泛的分法,也是按运行时区域的一种分法,堆是所有线程共享的一块区域,而栈是线程隔离的,每个线程互不共享. 线程不共享区域 每个线程的数据区域包括程序计数器.虚 ...

  8. Libgdx中TextButton的一些思考

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/caihongshijie6/article/details/37566183         由于有 ...

  9. RemoteDisconnected: Remote end closed connection without response

  10. python实现WordCount(第三次作业)

    0x00 注明 合作者:201631062315 201631062310 代码地址:https://gitee.com/c1e4r/word-count2 作业地址:https://edu.cnbl ...