Javascript学习笔记16 Comet WebSockets

Comet

Ajax是一种从页面向服务器请求数据的技术，而Comet是一种服务器向页面推送数据的技术。有两种实现Comet的方式：长轮询和HTTP流

短轮询指浏览器向服务器发送一个请求，询问是否有数据更新，服务里立刻返回响应。一段时间后浏览器又发起一个到服务器的新请求。

长轮询指浏览器向服务器发送一个请求，服务一直保持连接打开，直到有数据可发送，发送完数据后，浏览器关闭连接，随即又发起一个到服务器的新请求。（使用XHR对象和setTimeout()实现）

HTTP流不同于轮询，浏览器向服务器发送一个请求后，服务器一直保持连接打开，其周期性地向浏览器发送数据，整个生命周期只使用一个HTTP连接。（通过侦听readystatechange事件，检测readyState值是否为3，利用XHR对象取得最新的数据）

SSE

SSE（Server-Sent Events，服务器发送事件）是围绕只读Comet交互推出的API，其能用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须为text/event-stream。SSE支持短轮询、长轮询、HTTP流。

SSE API
要预定新的事件流，首先要创建一个EventSource对象，并传入一个入口点。

var source = new EventSource("myevents.php");

传入的URL必须和创建对象的页面同源（相同的URL模式、域和端口）
EventSource对象具有readyState属性，0表示正连接到服务器，1表示打开了连接，2表示关闭了连接
EventSource对象还具有3个事件，open（建立连接时触发），message（从服务器接收到新的事件时触发），error（无法连接时触发）

服务器发送的数据都以字符串形式保存在event.data中

source.onmessage = function(evnet）{
    var data = event.data;
};

EventSource对象会保持与服务器的活动连接，如果连接断开，还会重新连接。可以调用close()方法强制断开连接

服务器发送的响应数据格式为纯文本，最简单的每个数据项的都带有前缀data

data：foo

data：bar

data：foo
data：bar

每次事件传输的数据以空行分隔，连续多行数据算一次传输的数据，用换行符（”\n”）分隔。例如第一次事件event.data的值为”foo”，第二次事件event.data为”bar”，第三次事件event.data值为”foo\nbar”

通过id前缀可以给特定事件指定一个ID，ID行位于data行前或行后都可以。设置了ID后，EventSource对象会跟踪上一次触发的事件。如果连接断开，会向服务器发送一个包含名为Last-Event-ID的特殊HTTP头部请求，以便服务器知道下一次该触发哪个事件，确保数据不会遗漏。

data:foo
id:1

Web Sockets

在一个单独的持久连接上提供全双工、双向通信。建立起连接后会将HTTP协议升级为Web Sockets协议。未加密的连接不再是http://，而是ws://，而加密的https://则变为了wss://。
HTTP学习笔记https://blog.csdn.net/zjw_python/article/details/79362058

创建WebSocket
首先需要实例一个WebSocket对象，并传入要连接的URL

var socket = new WebSocke("ws://www.example.com/server.php");  //必须传入绝对URL

发送和接受数据
WebSocekts只能通过连接发送纯文本数据，因此对于复杂的数据结构，必须要先序列化

socket.send("hello world");

var message={
    time:new Date(),
    text:"Hello world"
};

socket.send(JSON.stringify(message));

当服务器向客户端发来消息时，WebSocket对象就会触发message事件，数据就保存在event.data属性中

socekt.message = function(event){
    var data = event.data;
};

关闭连接

socekt.close();

事件
除了messgae事件，WebSocket对象还具有以下事件：

open：成功建立连接时触发
error：发生错误时触发
close：连接关闭时触发，该事件的event对象具有wasClean（是否明确关闭），code（服务器发送的状态码）和reason（服务器发回的消息）属性，可以获取是否成功关闭连接的信息

属性
WebSocket对象具有readyState属性，表示当前的连接状态，0表示正在建立连接，1表示已经建立连接，2表示正在关闭连接，3表示已经关闭连接