【转】HTML5 WebSocket

原文地址：http://www.runoob.com/html/html5-websocket.html

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

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

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

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

以下 API 用于创建 WebSocket 对象。

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

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

例如 网页的 一部分 需要 实时更新数据 如果用ajax 请求的话 需要 不断的建立http连接请求 给服务器造成压力的同时也不能保证数据的实时性（拉方式） 
而WebSocket 则可以 实现真正的实时性，建立连接后服务器可以不断的发送数据给客户端。（推方式）

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 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

 

小例子

        function soket() {
            if (!("WebSocket" in window))
            {
                alert("抱歉你的浏览器不支持WebSocket");
                return;
            }
            var webSocket = new WebSocket("ws://XX.XX.XX:1111/websoket?x=12");

            webSocket.onopen = function () {
                //Web Socket 已经连接上，使用send() 方法发送数据                
                //webSocket.send("asdfasdf");
            };

            webSocket.onmessage = function (event) {
                //alert("接收的数据是：" + evt.data);
            };

            webSocket.onclose = function () {
                //关闭websocket
                //alert("连接已关闭");
            }
            webSocket.onerror = function () {
                //alert("通信错误")
                try {
                    webSocket.close();
                } catch (e) {
                    console.log(e);
                }
            };

            window.onbeforeunload = function () {
                webSocket.close();
                webSocket = null;
            };
        };
        soket();

 补充知识：onbeforeunload 事件

在即将离开当前页面(刷新或关闭)时执行

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

<body onbeforeunload="return myFunction()">

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。

（可以用在以下元素：body, window，frameset）

posted @ 2018-07-19 14:44  花影疏帘  阅读(95)  评论(0)    收藏  举报