Javascript学习笔记16 Comet WebSockets

刺骨的言语ヽ痛彻心扉 2022-05-26 05:42 159阅读 0赞

## 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][https_blog.csdn.net_zjw_python_article_details_79362058]

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

var socket = new WebSocket("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表示已经关闭连接