【 ➰斗艳争妍の网络协议姐妹花‍‍️➰】http协议 VS websocket协议

http协议

http简介

http

http（hypertext transfer protocol），“超文本传输协议”。

超文本

包含有超链接和各种多媒体元素标记的文本。常见的超文本格式html（超文本标记语言）。

http协议

定义浏览器如何向web服务器发送请求，web服务器如何向浏览器进行响应。简言之，就是client端与server端进行数据传输的一种规则。

http工作原理

请求/响应模型

用户点击http://www.baidu.com/index.html后的流程：

分析链接
浏览器向dns请求分析www.baidu.com的ip
dns将分析出的112.80.248.75返回给浏览器
浏览器与服务器建立tcp连接
浏览器向服务器请求：GET /index.html
服务器向浏览器回复：index.html内容
释放tcp连接
浏览器解析html元素并显示

简言之：建链->请求->响应->断开

连接方式

非持久连接：浏览器每一个请求都创建一个新连接，当响应完毕后，连接就被释放。
持久连接：一个连接中，可以进行多次请求和响应。服务器在发送响应后，并不立即释放连接，可继续使用。

无状态性

http协议本身不会对发送过的请求和响应的通讯状态进行持久化处理。

同一客户端（浏览器）第二次访问同一个web服务器时，服务端无法知道这个客户端是否曾经访问过。

无状态性保证了http协议的简单性，从而能够快速处理大量的事务，提高了效率。

通常使用cookie或附带其他参数（token）用来区分来源。

发展历程

http/1.0

每个tcp连接只能发送一个请求。发送数据完毕，该连接就关闭，如果还要请求其他资源，就必须再新建一个连接。非标Connection:keep-alive

http/1.1

持久连接（persistent connection）：tcp连接默认不关闭，可以利用，无需声明Connection:keep-alive
管道机制（pipeline）：在同一个tcp连接里，客户端可以同时发送多个请求。这样就进一步改进了http协议的效率。
字段（Content-Length）：一个tcp连接现在可以传送多个回应，势必就要有一种机制，区分数据包是属于哪一个回应的。这就是Content-Length字段的作用，声明本次回应的数据长度。
分块传输编码

http报文结构（请求/响应报文结构）

请求报文和响应报文都是由以下4部分组成：

请求行/响应行
请求头/响应头
空行
.消息主体（请求体/响应体）

http报文请求方法

方法	含义
GET	请求读取
POST	请求添加
PUT	存储
DELETE	删除
HEAD	请求信息首部
TRACE	用于测试，要求服务器回收到请求
CONNECTION	用于代理服务器
OPTION	查询特定选项

http报文状态码

响应报文里的状态码:指明特定的请求是否被满足，如没有满足，给出原因。

状态码	含义	示例
1xx	通知信息	100：服务器正在处理客户端请求
2xx	成功	200：请求成功
3xx	重定向	301：重定向
4xx	客户端错误	403：禁止的页面；404：未找到
5xx	服务器错误	500：服务器内部错误

http协议短板

请求/响应模型

请求/响应模型：通信只能由客户端发起，服务端不能主动发送消息给客户端。

#mermaid-svg-JDV4G55HFng9ysn5 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-JDV4G55HFng9ysn5 .label text{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .node rect,#mermaid-svg-JDV4G55HFng9ysn5 .node circle,#mermaid-svg-JDV4G55HFng9ysn5 .node ellipse,#mermaid-svg-JDV4G55HFng9ysn5 .node polygon,#mermaid-svg-JDV4G55HFng9ysn5 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-JDV4G55HFng9ysn5 .node .label{text-align:center;fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .node.clickable{cursor:pointer}#mermaid-svg-JDV4G55HFng9ysn5 .arrowheadPath{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-JDV4G55HFng9ysn5 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-JDV4G55HFng9ysn5 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-JDV4G55HFng9ysn5 .edgeLabel rect{opacity:0.9}#mermaid-svg-JDV4G55HFng9ysn5 .edgeLabel span{color:#333}#mermaid-svg-JDV4G55HFng9ysn5 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-JDV4G55HFng9ysn5 .cluster text{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-JDV4G55HFng9ysn5 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-JDV4G55HFng9ysn5 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-JDV4G55HFng9ysn5 .actor-line{stroke:grey}#mermaid-svg-JDV4G55HFng9ysn5 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-JDV4G55HFng9ysn5 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-JDV4G55HFng9ysn5 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-JDV4G55HFng9ysn5 .sequenceNumber{fill:#fff}#mermaid-svg-JDV4G55HFng9ysn5 #sequencenumber{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-JDV4G55HFng9ysn5 .messageText{fill:#333;stroke:#333}#mermaid-svg-JDV4G55HFng9ysn5 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-JDV4G55HFng9ysn5 .labelText,#mermaid-svg-JDV4G55HFng9ysn5 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-JDV4G55HFng9ysn5 .loopText,#mermaid-svg-JDV4G55HFng9ysn5 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-JDV4G55HFng9ysn5 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-JDV4G55HFng9ysn5 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-JDV4G55HFng9ysn5 .noteText,#mermaid-svg-JDV4G55HFng9ysn5 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-JDV4G55HFng9ysn5 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-JDV4G55HFng9ysn5 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-JDV4G55HFng9ysn5 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-JDV4G55HFng9ysn5 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 .section{stroke:none;opacity:0.2}#mermaid-svg-JDV4G55HFng9ysn5 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-JDV4G55HFng9ysn5 .section2{fill:#fff400}#mermaid-svg-JDV4G55HFng9ysn5 .section1,#mermaid-svg-JDV4G55HFng9ysn5 .section3{fill:#fff;opacity:0.2}#mermaid-svg-JDV4G55HFng9ysn5 .sectionTitle0{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .sectionTitle1{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .sectionTitle2{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .sectionTitle3{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-JDV4G55HFng9ysn5 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 .grid path{stroke-width:0}#mermaid-svg-JDV4G55HFng9ysn5 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-JDV4G55HFng9ysn5 .task{stroke-width:2}#mermaid-svg-JDV4G55HFng9ysn5 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 .taskText:not([font-size]){font-size:11px}#mermaid-svg-JDV4G55HFng9ysn5 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-JDV4G55HFng9ysn5 .task.clickable{cursor:pointer}#mermaid-svg-JDV4G55HFng9ysn5 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-JDV4G55HFng9ysn5 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-JDV4G55HFng9ysn5 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-JDV4G55HFng9ysn5 .taskText0,#mermaid-svg-JDV4G55HFng9ysn5 .taskText1,#mermaid-svg-JDV4G55HFng9ysn5 .taskText2,#mermaid-svg-JDV4G55HFng9ysn5 .taskText3{fill:#fff}#mermaid-svg-JDV4G55HFng9ysn5 .task0,#mermaid-svg-JDV4G55HFng9ysn5 .task1,#mermaid-svg-JDV4G55HFng9ysn5 .task2,#mermaid-svg-JDV4G55HFng9ysn5 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-JDV4G55HFng9ysn5 .taskTextOutside0,#mermaid-svg-JDV4G55HFng9ysn5 .taskTextOutside2{fill:#000}#mermaid-svg-JDV4G55HFng9ysn5 .taskTextOutside1,#mermaid-svg-JDV4G55HFng9ysn5 .taskTextOutside3{fill:#000}#mermaid-svg-JDV4G55HFng9ysn5 .active0,#mermaid-svg-JDV4G55HFng9ysn5 .active1,#mermaid-svg-JDV4G55HFng9ysn5 .active2,#mermaid-svg-JDV4G55HFng9ysn5 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-JDV4G55HFng9ysn5 .activeText0,#mermaid-svg-JDV4G55HFng9ysn5 .activeText1,#mermaid-svg-JDV4G55HFng9ysn5 .activeText2,#mermaid-svg-JDV4G55HFng9ysn5 .activeText3{fill:#000 !important}#mermaid-svg-JDV4G55HFng9ysn5 .done0,#mermaid-svg-JDV4G55HFng9ysn5 .done1,#mermaid-svg-JDV4G55HFng9ysn5 .done2,#mermaid-svg-JDV4G55HFng9ysn5 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-JDV4G55HFng9ysn5 .doneText0,#mermaid-svg-JDV4G55HFng9ysn5 .doneText1,#mermaid-svg-JDV4G55HFng9ysn5 .doneText2,#mermaid-svg-JDV4G55HFng9ysn5 .doneText3{fill:#000 !important}#mermaid-svg-JDV4G55HFng9ysn5 .crit0,#mermaid-svg-JDV4G55HFng9ysn5 .crit1,#mermaid-svg-JDV4G55HFng9ysn5 .crit2,#mermaid-svg-JDV4G55HFng9ysn5 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-JDV4G55HFng9ysn5 .activeCrit0,#mermaid-svg-JDV4G55HFng9ysn5 .activeCrit1,#mermaid-svg-JDV4G55HFng9ysn5 .activeCrit2,#mermaid-svg-JDV4G55HFng9ysn5 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-JDV4G55HFng9ysn5 .doneCrit0,#mermaid-svg-JDV4G55HFng9ysn5 .doneCrit1,#mermaid-svg-JDV4G55HFng9ysn5 .doneCrit2,#mermaid-svg-JDV4G55HFng9ysn5 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-JDV4G55HFng9ysn5 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-JDV4G55HFng9ysn5 .milestoneText{font-style:italic}#mermaid-svg-JDV4G55HFng9ysn5 .doneCritText0,#mermaid-svg-JDV4G55HFng9ysn5 .doneCritText1,#mermaid-svg-JDV4G55HFng9ysn5 .doneCritText2,#mermaid-svg-JDV4G55HFng9ysn5 .doneCritText3{fill:#000 !important}#mermaid-svg-JDV4G55HFng9ysn5 .activeCritText0,#mermaid-svg-JDV4G55HFng9ysn5 .activeCritText1,#mermaid-svg-JDV4G55HFng9ysn5 .activeCritText2,#mermaid-svg-JDV4G55HFng9ysn5 .activeCritText3{fill:#000 !important}#mermaid-svg-JDV4G55HFng9ysn5 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-JDV4G55HFng9ysn5 g.classGroup text .title{font-weight:bolder}#mermaid-svg-JDV4G55HFng9ysn5 g.clickable{cursor:pointer}#mermaid-svg-JDV4G55HFng9ysn5 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-JDV4G55HFng9ysn5 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-JDV4G55HFng9ysn5 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-JDV4G55HFng9ysn5 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-JDV4G55HFng9ysn5 .dashed-line{stroke-dasharray:3}#mermaid-svg-JDV4G55HFng9ysn5 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 .commit-id,#mermaid-svg-JDV4G55HFng9ysn5 .commit-msg,#mermaid-svg-JDV4G55HFng9ysn5 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-JDV4G55HFng9ysn5 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-JDV4G55HFng9ysn5 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-JDV4G55HFng9ysn5 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-JDV4G55HFng9ysn5 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-JDV4G55HFng9ysn5 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-JDV4G55HFng9ysn5 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-JDV4G55HFng9ysn5 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-JDV4G55HFng9ysn5 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-JDV4G55HFng9ysn5 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-JDV4G55HFng9ysn5 .edgeLabel text{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-JDV4G55HFng9ysn5 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-JDV4G55HFng9ysn5 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-JDV4G55HFng9ysn5 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-JDV4G55HFng9ysn5 .note-edge{stroke-dasharray:5}#mermaid-svg-JDV4G55HFng9ysn5 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-JDV4G55HFng9ysn5 .error-icon{fill:#522}#mermaid-svg-JDV4G55HFng9ysn5 .error-text{fill:#522;stroke:#522}#mermaid-svg-JDV4G55HFng9ysn5 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-JDV4G55HFng9ysn5 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-JDV4G55HFng9ysn5 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-JDV4G55HFng9ysn5 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-JDV4G55HFng9ysn5 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-JDV4G55HFng9ysn5 .marker{fill:#333}#mermaid-svg-JDV4G55HFng9ysn5 .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-JDV4G55HFng9ysn5 {color: rgba(0, 0, 0, 0.75);font: ;}客户端服务器请求响应客户端服务器

轮巡polling技术

客户端以一定时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务端的同步。其实大量的定时请求都是无效的，因为服务端数据并没有更新，相应地也导致了大量的带宽等资源浪费。

#mermaid-svg-0V3lOQ9pYfDATlN9 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .label text{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .node rect,#mermaid-svg-0V3lOQ9pYfDATlN9 .node circle,#mermaid-svg-0V3lOQ9pYfDATlN9 .node ellipse,#mermaid-svg-0V3lOQ9pYfDATlN9 .node polygon,#mermaid-svg-0V3lOQ9pYfDATlN9 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-0V3lOQ9pYfDATlN9 .node .label{text-align:center;fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .node.clickable{cursor:pointer}#mermaid-svg-0V3lOQ9pYfDATlN9 .arrowheadPath{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-0V3lOQ9pYfDATlN9 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-0V3lOQ9pYfDATlN9 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-0V3lOQ9pYfDATlN9 .edgeLabel rect{opacity:0.9}#mermaid-svg-0V3lOQ9pYfDATlN9 .edgeLabel span{color:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-0V3lOQ9pYfDATlN9 .cluster text{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-0V3lOQ9pYfDATlN9 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-0V3lOQ9pYfDATlN9 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-0V3lOQ9pYfDATlN9 .actor-line{stroke:grey}#mermaid-svg-0V3lOQ9pYfDATlN9 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .sequenceNumber{fill:#fff}#mermaid-svg-0V3lOQ9pYfDATlN9 #sequencenumber{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .messageText{fill:#333;stroke:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-0V3lOQ9pYfDATlN9 .labelText,#mermaid-svg-0V3lOQ9pYfDATlN9 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-0V3lOQ9pYfDATlN9 .loopText,#mermaid-svg-0V3lOQ9pYfDATlN9 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-0V3lOQ9pYfDATlN9 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-0V3lOQ9pYfDATlN9 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-0V3lOQ9pYfDATlN9 .noteText,#mermaid-svg-0V3lOQ9pYfDATlN9 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-0V3lOQ9pYfDATlN9 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-0V3lOQ9pYfDATlN9 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-0V3lOQ9pYfDATlN9 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-0V3lOQ9pYfDATlN9 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 .section{stroke:none;opacity:0.2}#mermaid-svg-0V3lOQ9pYfDATlN9 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-0V3lOQ9pYfDATlN9 .section2{fill:#fff400}#mermaid-svg-0V3lOQ9pYfDATlN9 .section1,#mermaid-svg-0V3lOQ9pYfDATlN9 .section3{fill:#fff;opacity:0.2}#mermaid-svg-0V3lOQ9pYfDATlN9 .sectionTitle0{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .sectionTitle1{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .sectionTitle2{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .sectionTitle3{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-0V3lOQ9pYfDATlN9 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 .grid path{stroke-width:0}#mermaid-svg-0V3lOQ9pYfDATlN9 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-0V3lOQ9pYfDATlN9 .task{stroke-width:2}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskText:not([font-size]){font-size:11px}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-0V3lOQ9pYfDATlN9 .task.clickable{cursor:pointer}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskText0,#mermaid-svg-0V3lOQ9pYfDATlN9 .taskText1,#mermaid-svg-0V3lOQ9pYfDATlN9 .taskText2,#mermaid-svg-0V3lOQ9pYfDATlN9 .taskText3{fill:#fff}#mermaid-svg-0V3lOQ9pYfDATlN9 .task0,#mermaid-svg-0V3lOQ9pYfDATlN9 .task1,#mermaid-svg-0V3lOQ9pYfDATlN9 .task2,#mermaid-svg-0V3lOQ9pYfDATlN9 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskTextOutside0,#mermaid-svg-0V3lOQ9pYfDATlN9 .taskTextOutside2{fill:#000}#mermaid-svg-0V3lOQ9pYfDATlN9 .taskTextOutside1,#mermaid-svg-0V3lOQ9pYfDATlN9 .taskTextOutside3{fill:#000}#mermaid-svg-0V3lOQ9pYfDATlN9 .active0,#mermaid-svg-0V3lOQ9pYfDATlN9 .active1,#mermaid-svg-0V3lOQ9pYfDATlN9 .active2,#mermaid-svg-0V3lOQ9pYfDATlN9 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-0V3lOQ9pYfDATlN9 .activeText0,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeText1,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeText2,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeText3{fill:#000 !important}#mermaid-svg-0V3lOQ9pYfDATlN9 .done0,#mermaid-svg-0V3lOQ9pYfDATlN9 .done1,#mermaid-svg-0V3lOQ9pYfDATlN9 .done2,#mermaid-svg-0V3lOQ9pYfDATlN9 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-0V3lOQ9pYfDATlN9 .doneText0,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneText1,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneText2,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneText3{fill:#000 !important}#mermaid-svg-0V3lOQ9pYfDATlN9 .crit0,#mermaid-svg-0V3lOQ9pYfDATlN9 .crit1,#mermaid-svg-0V3lOQ9pYfDATlN9 .crit2,#mermaid-svg-0V3lOQ9pYfDATlN9 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-0V3lOQ9pYfDATlN9 .activeCrit0,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeCrit1,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeCrit2,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-0V3lOQ9pYfDATlN9 .doneCrit0,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneCrit1,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneCrit2,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-0V3lOQ9pYfDATlN9 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-0V3lOQ9pYfDATlN9 .milestoneText{font-style:italic}#mermaid-svg-0V3lOQ9pYfDATlN9 .doneCritText0,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneCritText1,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneCritText2,#mermaid-svg-0V3lOQ9pYfDATlN9 .doneCritText3{fill:#000 !important}#mermaid-svg-0V3lOQ9pYfDATlN9 .activeCritText0,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeCritText1,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeCritText2,#mermaid-svg-0V3lOQ9pYfDATlN9 .activeCritText3{fill:#000 !important}#mermaid-svg-0V3lOQ9pYfDATlN9 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-0V3lOQ9pYfDATlN9 g.classGroup text .title{font-weight:bolder}#mermaid-svg-0V3lOQ9pYfDATlN9 g.clickable{cursor:pointer}#mermaid-svg-0V3lOQ9pYfDATlN9 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-0V3lOQ9pYfDATlN9 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-0V3lOQ9pYfDATlN9 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-0V3lOQ9pYfDATlN9 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-0V3lOQ9pYfDATlN9 .dashed-line{stroke-dasharray:3}#mermaid-svg-0V3lOQ9pYfDATlN9 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 .commit-id,#mermaid-svg-0V3lOQ9pYfDATlN9 .commit-msg,#mermaid-svg-0V3lOQ9pYfDATlN9 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-0V3lOQ9pYfDATlN9 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-0V3lOQ9pYfDATlN9 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-0V3lOQ9pYfDATlN9 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-0V3lOQ9pYfDATlN9 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-0V3lOQ9pYfDATlN9 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-0V3lOQ9pYfDATlN9 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-0V3lOQ9pYfDATlN9 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-0V3lOQ9pYfDATlN9 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-0V3lOQ9pYfDATlN9 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-0V3lOQ9pYfDATlN9 .edgeLabel text{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0V3lOQ9pYfDATlN9 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-0V3lOQ9pYfDATlN9 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-0V3lOQ9pYfDATlN9 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-0V3lOQ9pYfDATlN9 .note-edge{stroke-dasharray:5}#mermaid-svg-0V3lOQ9pYfDATlN9 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-0V3lOQ9pYfDATlN9 .error-icon{fill:#522}#mermaid-svg-0V3lOQ9pYfDATlN9 .error-text{fill:#522;stroke:#522}#mermaid-svg-0V3lOQ9pYfDATlN9 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-0V3lOQ9pYfDATlN9 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-0V3lOQ9pYfDATlN9 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-0V3lOQ9pYfDATlN9 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-0V3lOQ9pYfDATlN9 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-0V3lOQ9pYfDATlN9 .marker{fill:#333}#mermaid-svg-0V3lOQ9pYfDATlN9 .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-0V3lOQ9pYfDATlN9 {color: rgba(0, 0, 0, 0.75);font: ;}客户端服务端Connection OpenReturn data.Connection CloseintervalConnection OpenReturn data.Connection CloseintervalConnection OpenReturn data.Connection Close客户端服务端

长轮询机制

http长轮询机制是指服务端收到请求后如果有数据，则立即响应请求；如果没有数据，就会停留一段时间，这段时间内，如果服务端请求的数据到了（数据查询完成等），就立刻响应；如果这段时间过后，还没有数据到达，则以空数据的形式响应http请求；若客户端收到的数据为空，会再次发送同样的http请求到服务端。

#mermaid-svg-RkDQRgKCbrCFoN2k .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .label text{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .node rect,#mermaid-svg-RkDQRgKCbrCFoN2k .node circle,#mermaid-svg-RkDQRgKCbrCFoN2k .node ellipse,#mermaid-svg-RkDQRgKCbrCFoN2k .node polygon,#mermaid-svg-RkDQRgKCbrCFoN2k .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-RkDQRgKCbrCFoN2k .node .label{text-align:center;fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .node.clickable{cursor:pointer}#mermaid-svg-RkDQRgKCbrCFoN2k .arrowheadPath{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-RkDQRgKCbrCFoN2k .flowchart-link{stroke:#333;fill:none}#mermaid-svg-RkDQRgKCbrCFoN2k .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-RkDQRgKCbrCFoN2k .edgeLabel rect{opacity:0.9}#mermaid-svg-RkDQRgKCbrCFoN2k .edgeLabel span{color:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-RkDQRgKCbrCFoN2k .cluster text{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-RkDQRgKCbrCFoN2k .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-RkDQRgKCbrCFoN2k text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-RkDQRgKCbrCFoN2k .actor-line{stroke:grey}#mermaid-svg-RkDQRgKCbrCFoN2k .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-RkDQRgKCbrCFoN2k #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .sequenceNumber{fill:#fff}#mermaid-svg-RkDQRgKCbrCFoN2k #sequencenumber{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k #crosshead path{fill:#333;stroke:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .messageText{fill:#333;stroke:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-RkDQRgKCbrCFoN2k .labelText,#mermaid-svg-RkDQRgKCbrCFoN2k .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-RkDQRgKCbrCFoN2k .loopText,#mermaid-svg-RkDQRgKCbrCFoN2k .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-RkDQRgKCbrCFoN2k .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-RkDQRgKCbrCFoN2k .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-RkDQRgKCbrCFoN2k .noteText,#mermaid-svg-RkDQRgKCbrCFoN2k .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-RkDQRgKCbrCFoN2k .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-RkDQRgKCbrCFoN2k .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-RkDQRgKCbrCFoN2k .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-RkDQRgKCbrCFoN2k .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k .section{stroke:none;opacity:0.2}#mermaid-svg-RkDQRgKCbrCFoN2k .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-RkDQRgKCbrCFoN2k .section2{fill:#fff400}#mermaid-svg-RkDQRgKCbrCFoN2k .section1,#mermaid-svg-RkDQRgKCbrCFoN2k .section3{fill:#fff;opacity:0.2}#mermaid-svg-RkDQRgKCbrCFoN2k .sectionTitle0{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .sectionTitle1{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .sectionTitle2{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .sectionTitle3{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-RkDQRgKCbrCFoN2k .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k .grid path{stroke-width:0}#mermaid-svg-RkDQRgKCbrCFoN2k .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-RkDQRgKCbrCFoN2k .task{stroke-width:2}#mermaid-svg-RkDQRgKCbrCFoN2k .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k .taskText:not([font-size]){font-size:11px}#mermaid-svg-RkDQRgKCbrCFoN2k .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-RkDQRgKCbrCFoN2k .task.clickable{cursor:pointer}#mermaid-svg-RkDQRgKCbrCFoN2k .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-RkDQRgKCbrCFoN2k .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-RkDQRgKCbrCFoN2k .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-RkDQRgKCbrCFoN2k .taskText0,#mermaid-svg-RkDQRgKCbrCFoN2k .taskText1,#mermaid-svg-RkDQRgKCbrCFoN2k .taskText2,#mermaid-svg-RkDQRgKCbrCFoN2k .taskText3{fill:#fff}#mermaid-svg-RkDQRgKCbrCFoN2k .task0,#mermaid-svg-RkDQRgKCbrCFoN2k .task1,#mermaid-svg-RkDQRgKCbrCFoN2k .task2,#mermaid-svg-RkDQRgKCbrCFoN2k .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-RkDQRgKCbrCFoN2k .taskTextOutside0,#mermaid-svg-RkDQRgKCbrCFoN2k .taskTextOutside2{fill:#000}#mermaid-svg-RkDQRgKCbrCFoN2k .taskTextOutside1,#mermaid-svg-RkDQRgKCbrCFoN2k .taskTextOutside3{fill:#000}#mermaid-svg-RkDQRgKCbrCFoN2k .active0,#mermaid-svg-RkDQRgKCbrCFoN2k .active1,#mermaid-svg-RkDQRgKCbrCFoN2k .active2,#mermaid-svg-RkDQRgKCbrCFoN2k .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-RkDQRgKCbrCFoN2k .activeText0,#mermaid-svg-RkDQRgKCbrCFoN2k .activeText1,#mermaid-svg-RkDQRgKCbrCFoN2k .activeText2,#mermaid-svg-RkDQRgKCbrCFoN2k .activeText3{fill:#000 !important}#mermaid-svg-RkDQRgKCbrCFoN2k .done0,#mermaid-svg-RkDQRgKCbrCFoN2k .done1,#mermaid-svg-RkDQRgKCbrCFoN2k .done2,#mermaid-svg-RkDQRgKCbrCFoN2k .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-RkDQRgKCbrCFoN2k .doneText0,#mermaid-svg-RkDQRgKCbrCFoN2k .doneText1,#mermaid-svg-RkDQRgKCbrCFoN2k .doneText2,#mermaid-svg-RkDQRgKCbrCFoN2k .doneText3{fill:#000 !important}#mermaid-svg-RkDQRgKCbrCFoN2k .crit0,#mermaid-svg-RkDQRgKCbrCFoN2k .crit1,#mermaid-svg-RkDQRgKCbrCFoN2k .crit2,#mermaid-svg-RkDQRgKCbrCFoN2k .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-RkDQRgKCbrCFoN2k .activeCrit0,#mermaid-svg-RkDQRgKCbrCFoN2k .activeCrit1,#mermaid-svg-RkDQRgKCbrCFoN2k .activeCrit2,#mermaid-svg-RkDQRgKCbrCFoN2k .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-RkDQRgKCbrCFoN2k .doneCrit0,#mermaid-svg-RkDQRgKCbrCFoN2k .doneCrit1,#mermaid-svg-RkDQRgKCbrCFoN2k .doneCrit2,#mermaid-svg-RkDQRgKCbrCFoN2k .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-RkDQRgKCbrCFoN2k .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-RkDQRgKCbrCFoN2k .milestoneText{font-style:italic}#mermaid-svg-RkDQRgKCbrCFoN2k .doneCritText0,#mermaid-svg-RkDQRgKCbrCFoN2k .doneCritText1,#mermaid-svg-RkDQRgKCbrCFoN2k .doneCritText2,#mermaid-svg-RkDQRgKCbrCFoN2k .doneCritText3{fill:#000 !important}#mermaid-svg-RkDQRgKCbrCFoN2k .activeCritText0,#mermaid-svg-RkDQRgKCbrCFoN2k .activeCritText1,#mermaid-svg-RkDQRgKCbrCFoN2k .activeCritText2,#mermaid-svg-RkDQRgKCbrCFoN2k .activeCritText3{fill:#000 !important}#mermaid-svg-RkDQRgKCbrCFoN2k .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-RkDQRgKCbrCFoN2k g.classGroup text .title{font-weight:bolder}#mermaid-svg-RkDQRgKCbrCFoN2k g.clickable{cursor:pointer}#mermaid-svg-RkDQRgKCbrCFoN2k g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-RkDQRgKCbrCFoN2k g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-RkDQRgKCbrCFoN2k .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-RkDQRgKCbrCFoN2k .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-RkDQRgKCbrCFoN2k .dashed-line{stroke-dasharray:3}#mermaid-svg-RkDQRgKCbrCFoN2k #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k .commit-id,#mermaid-svg-RkDQRgKCbrCFoN2k .commit-msg,#mermaid-svg-RkDQRgKCbrCFoN2k .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-RkDQRgKCbrCFoN2k g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-RkDQRgKCbrCFoN2k g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-RkDQRgKCbrCFoN2k g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-RkDQRgKCbrCFoN2k .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-RkDQRgKCbrCFoN2k .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-RkDQRgKCbrCFoN2k .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-RkDQRgKCbrCFoN2k .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-RkDQRgKCbrCFoN2k .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-RkDQRgKCbrCFoN2k .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-RkDQRgKCbrCFoN2k .edgeLabel text{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-RkDQRgKCbrCFoN2k .node circle.state-start{fill:black;stroke:black}#mermaid-svg-RkDQRgKCbrCFoN2k .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-RkDQRgKCbrCFoN2k #statediagram-barbEnd{fill:#9370db}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-state .divider{stroke:#9370db}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-RkDQRgKCbrCFoN2k .note-edge{stroke-dasharray:5}#mermaid-svg-RkDQRgKCbrCFoN2k .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-RkDQRgKCbrCFoN2k .error-icon{fill:#522}#mermaid-svg-RkDQRgKCbrCFoN2k .error-text{fill:#522;stroke:#522}#mermaid-svg-RkDQRgKCbrCFoN2k .edge-thickness-normal{stroke-width:2px}#mermaid-svg-RkDQRgKCbrCFoN2k .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-RkDQRgKCbrCFoN2k .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-RkDQRgKCbrCFoN2k .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-RkDQRgKCbrCFoN2k .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-RkDQRgKCbrCFoN2k .marker{fill:#333}#mermaid-svg-RkDQRgKCbrCFoN2k .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-RkDQRgKCbrCFoN2k {color: rgba(0, 0, 0, 0.75);font: ;}客户端服务端Connection openwaiting(event trigger)Return data.Connection close.Connection openwaiting(event trigger)Return data.Connection close.客户端服务端

长轮询是对定时轮询的改进和提高，目的是为了降低无效的网络传输。

当服务端没有数据更新时，连接会保持一个时间周期，直到数据或者状态改变，或者时间周期到了，通过这个机制来减少无效的客户端与服务端的交互。

然而这种机制存在一个问题：当客户端以固定频率向服务器发起请求时，服务器的数据有可能还没更新，这样就会带来很多无效的网络传输。同时可能延时一个时间周期的情况。

流技术 http streaming

客户端发送获取数据更新请求到服务端时，服务端将保持该请求的响应数据流一直打开，只要有数据更新就实时地发送给客户端。

#mermaid-svg-pRZ6AGwpVi6lLtet .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .label text{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .node rect,#mermaid-svg-pRZ6AGwpVi6lLtet .node circle,#mermaid-svg-pRZ6AGwpVi6lLtet .node ellipse,#mermaid-svg-pRZ6AGwpVi6lLtet .node polygon,#mermaid-svg-pRZ6AGwpVi6lLtet .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-pRZ6AGwpVi6lLtet .node .label{text-align:center;fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .node.clickable{cursor:pointer}#mermaid-svg-pRZ6AGwpVi6lLtet .arrowheadPath{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-pRZ6AGwpVi6lLtet .flowchart-link{stroke:#333;fill:none}#mermaid-svg-pRZ6AGwpVi6lLtet .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-pRZ6AGwpVi6lLtet .edgeLabel rect{opacity:0.9}#mermaid-svg-pRZ6AGwpVi6lLtet .edgeLabel span{color:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-pRZ6AGwpVi6lLtet .cluster text{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-pRZ6AGwpVi6lLtet .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-pRZ6AGwpVi6lLtet text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-pRZ6AGwpVi6lLtet .actor-line{stroke:grey}#mermaid-svg-pRZ6AGwpVi6lLtet .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-pRZ6AGwpVi6lLtet #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .sequenceNumber{fill:#fff}#mermaid-svg-pRZ6AGwpVi6lLtet #sequencenumber{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet #crosshead path{fill:#333;stroke:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .messageText{fill:#333;stroke:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-pRZ6AGwpVi6lLtet .labelText,#mermaid-svg-pRZ6AGwpVi6lLtet .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-pRZ6AGwpVi6lLtet .loopText,#mermaid-svg-pRZ6AGwpVi6lLtet .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-pRZ6AGwpVi6lLtet .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-pRZ6AGwpVi6lLtet .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-pRZ6AGwpVi6lLtet .noteText,#mermaid-svg-pRZ6AGwpVi6lLtet .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-pRZ6AGwpVi6lLtet .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-pRZ6AGwpVi6lLtet .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-pRZ6AGwpVi6lLtet .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-pRZ6AGwpVi6lLtet .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet .section{stroke:none;opacity:0.2}#mermaid-svg-pRZ6AGwpVi6lLtet .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-pRZ6AGwpVi6lLtet .section2{fill:#fff400}#mermaid-svg-pRZ6AGwpVi6lLtet .section1,#mermaid-svg-pRZ6AGwpVi6lLtet .section3{fill:#fff;opacity:0.2}#mermaid-svg-pRZ6AGwpVi6lLtet .sectionTitle0{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .sectionTitle1{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .sectionTitle2{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .sectionTitle3{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-pRZ6AGwpVi6lLtet .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet .grid path{stroke-width:0}#mermaid-svg-pRZ6AGwpVi6lLtet .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-pRZ6AGwpVi6lLtet .task{stroke-width:2}#mermaid-svg-pRZ6AGwpVi6lLtet .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet .taskText:not([font-size]){font-size:11px}#mermaid-svg-pRZ6AGwpVi6lLtet .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-pRZ6AGwpVi6lLtet .task.clickable{cursor:pointer}#mermaid-svg-pRZ6AGwpVi6lLtet .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-pRZ6AGwpVi6lLtet .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-pRZ6AGwpVi6lLtet .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-pRZ6AGwpVi6lLtet .taskText0,#mermaid-svg-pRZ6AGwpVi6lLtet .taskText1,#mermaid-svg-pRZ6AGwpVi6lLtet .taskText2,#mermaid-svg-pRZ6AGwpVi6lLtet .taskText3{fill:#fff}#mermaid-svg-pRZ6AGwpVi6lLtet .task0,#mermaid-svg-pRZ6AGwpVi6lLtet .task1,#mermaid-svg-pRZ6AGwpVi6lLtet .task2,#mermaid-svg-pRZ6AGwpVi6lLtet .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-pRZ6AGwpVi6lLtet .taskTextOutside0,#mermaid-svg-pRZ6AGwpVi6lLtet .taskTextOutside2{fill:#000}#mermaid-svg-pRZ6AGwpVi6lLtet .taskTextOutside1,#mermaid-svg-pRZ6AGwpVi6lLtet .taskTextOutside3{fill:#000}#mermaid-svg-pRZ6AGwpVi6lLtet .active0,#mermaid-svg-pRZ6AGwpVi6lLtet .active1,#mermaid-svg-pRZ6AGwpVi6lLtet .active2,#mermaid-svg-pRZ6AGwpVi6lLtet .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-pRZ6AGwpVi6lLtet .activeText0,#mermaid-svg-pRZ6AGwpVi6lLtet .activeText1,#mermaid-svg-pRZ6AGwpVi6lLtet .activeText2,#mermaid-svg-pRZ6AGwpVi6lLtet .activeText3{fill:#000 !important}#mermaid-svg-pRZ6AGwpVi6lLtet .done0,#mermaid-svg-pRZ6AGwpVi6lLtet .done1,#mermaid-svg-pRZ6AGwpVi6lLtet .done2,#mermaid-svg-pRZ6AGwpVi6lLtet .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-pRZ6AGwpVi6lLtet .doneText0,#mermaid-svg-pRZ6AGwpVi6lLtet .doneText1,#mermaid-svg-pRZ6AGwpVi6lLtet .doneText2,#mermaid-svg-pRZ6AGwpVi6lLtet .doneText3{fill:#000 !important}#mermaid-svg-pRZ6AGwpVi6lLtet .crit0,#mermaid-svg-pRZ6AGwpVi6lLtet .crit1,#mermaid-svg-pRZ6AGwpVi6lLtet .crit2,#mermaid-svg-pRZ6AGwpVi6lLtet .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-pRZ6AGwpVi6lLtet .activeCrit0,#mermaid-svg-pRZ6AGwpVi6lLtet .activeCrit1,#mermaid-svg-pRZ6AGwpVi6lLtet .activeCrit2,#mermaid-svg-pRZ6AGwpVi6lLtet .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-pRZ6AGwpVi6lLtet .doneCrit0,#mermaid-svg-pRZ6AGwpVi6lLtet .doneCrit1,#mermaid-svg-pRZ6AGwpVi6lLtet .doneCrit2,#mermaid-svg-pRZ6AGwpVi6lLtet .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-pRZ6AGwpVi6lLtet .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-pRZ6AGwpVi6lLtet .milestoneText{font-style:italic}#mermaid-svg-pRZ6AGwpVi6lLtet .doneCritText0,#mermaid-svg-pRZ6AGwpVi6lLtet .doneCritText1,#mermaid-svg-pRZ6AGwpVi6lLtet .doneCritText2,#mermaid-svg-pRZ6AGwpVi6lLtet .doneCritText3{fill:#000 !important}#mermaid-svg-pRZ6AGwpVi6lLtet .activeCritText0,#mermaid-svg-pRZ6AGwpVi6lLtet .activeCritText1,#mermaid-svg-pRZ6AGwpVi6lLtet .activeCritText2,#mermaid-svg-pRZ6AGwpVi6lLtet .activeCritText3{fill:#000 !important}#mermaid-svg-pRZ6AGwpVi6lLtet .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-pRZ6AGwpVi6lLtet g.classGroup text .title{font-weight:bolder}#mermaid-svg-pRZ6AGwpVi6lLtet g.clickable{cursor:pointer}#mermaid-svg-pRZ6AGwpVi6lLtet g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-pRZ6AGwpVi6lLtet g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-pRZ6AGwpVi6lLtet .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-pRZ6AGwpVi6lLtet .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-pRZ6AGwpVi6lLtet .dashed-line{stroke-dasharray:3}#mermaid-svg-pRZ6AGwpVi6lLtet #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet .commit-id,#mermaid-svg-pRZ6AGwpVi6lLtet .commit-msg,#mermaid-svg-pRZ6AGwpVi6lLtet .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-pRZ6AGwpVi6lLtet g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-pRZ6AGwpVi6lLtet g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-pRZ6AGwpVi6lLtet g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-pRZ6AGwpVi6lLtet .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-pRZ6AGwpVi6lLtet .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-pRZ6AGwpVi6lLtet .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-pRZ6AGwpVi6lLtet .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-pRZ6AGwpVi6lLtet .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-pRZ6AGwpVi6lLtet .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-pRZ6AGwpVi6lLtet .edgeLabel text{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-pRZ6AGwpVi6lLtet .node circle.state-start{fill:black;stroke:black}#mermaid-svg-pRZ6AGwpVi6lLtet .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-pRZ6AGwpVi6lLtet #statediagram-barbEnd{fill:#9370db}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-state .divider{stroke:#9370db}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-pRZ6AGwpVi6lLtet .note-edge{stroke-dasharray:5}#mermaid-svg-pRZ6AGwpVi6lLtet .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-pRZ6AGwpVi6lLtet .error-icon{fill:#522}#mermaid-svg-pRZ6AGwpVi6lLtet .error-text{fill:#522;stroke:#522}#mermaid-svg-pRZ6AGwpVi6lLtet .edge-thickness-normal{stroke-width:2px}#mermaid-svg-pRZ6AGwpVi6lLtet .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-pRZ6AGwpVi6lLtet .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-pRZ6AGwpVi6lLtet .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-pRZ6AGwpVi6lLtet .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-pRZ6AGwpVi6lLtet .marker{fill:#333}#mermaid-svg-pRZ6AGwpVi6lLtet .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-pRZ6AGwpVi6lLtet {color: rgba(0, 0, 0, 0.75);font: ;}客户端服务端Connection OpenReturn dataevent（trigger）Return dataevent（trigger）Return dataevent（trigger）Return data.Connectio closeclose event（trigger） or timeoutConnection Close客户端服务端

这种机制在用户体验上有一点问题，需要针对不同浏览器设计不同的方案来改进用户体验；另外这种机制在高并发的情况下，对服务端是硬件资源是一个很大的考验。

总结一下，以上几种方案，都不是真正的实时，只是在用ajax的方法来模拟实时效果。每一次http请求或应答都带着完成的头信息，反复发送无效查询请求耗费了大量的带宽和硬件资源，方案也不是很理想。

websocket协议

工作流程

客户端发起http请求

发起请求（Header里附加“upgrade:websocket”），然后等待服务端响应。

服务端响应http

服务端响应后建立tcp通道。

通过tcp互传数据

双向传输数据，客户端与服务端都可以发起请求。

持续到关闭

这个连接会持续存在，直到客户端或者服务端的一方主动关闭连接

#mermaid-svg-N0KgHjJrXV0zdFJD .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .label text{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .node rect,#mermaid-svg-N0KgHjJrXV0zdFJD .node circle,#mermaid-svg-N0KgHjJrXV0zdFJD .node ellipse,#mermaid-svg-N0KgHjJrXV0zdFJD .node polygon,#mermaid-svg-N0KgHjJrXV0zdFJD .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-N0KgHjJrXV0zdFJD .node .label{text-align:center;fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .node.clickable{cursor:pointer}#mermaid-svg-N0KgHjJrXV0zdFJD .arrowheadPath{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-N0KgHjJrXV0zdFJD .flowchart-link{stroke:#333;fill:none}#mermaid-svg-N0KgHjJrXV0zdFJD .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-N0KgHjJrXV0zdFJD .edgeLabel rect{opacity:0.9}#mermaid-svg-N0KgHjJrXV0zdFJD .edgeLabel span{color:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-N0KgHjJrXV0zdFJD .cluster text{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-N0KgHjJrXV0zdFJD .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-N0KgHjJrXV0zdFJD text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-N0KgHjJrXV0zdFJD .actor-line{stroke:grey}#mermaid-svg-N0KgHjJrXV0zdFJD .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-N0KgHjJrXV0zdFJD #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .sequenceNumber{fill:#fff}#mermaid-svg-N0KgHjJrXV0zdFJD #sequencenumber{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD #crosshead path{fill:#333;stroke:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .messageText{fill:#333;stroke:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-N0KgHjJrXV0zdFJD .labelText,#mermaid-svg-N0KgHjJrXV0zdFJD .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-N0KgHjJrXV0zdFJD .loopText,#mermaid-svg-N0KgHjJrXV0zdFJD .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-N0KgHjJrXV0zdFJD .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-N0KgHjJrXV0zdFJD .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-N0KgHjJrXV0zdFJD .noteText,#mermaid-svg-N0KgHjJrXV0zdFJD .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-N0KgHjJrXV0zdFJD .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-N0KgHjJrXV0zdFJD .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-N0KgHjJrXV0zdFJD .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-N0KgHjJrXV0zdFJD .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD .section{stroke:none;opacity:0.2}#mermaid-svg-N0KgHjJrXV0zdFJD .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-N0KgHjJrXV0zdFJD .section2{fill:#fff400}#mermaid-svg-N0KgHjJrXV0zdFJD .section1,#mermaid-svg-N0KgHjJrXV0zdFJD .section3{fill:#fff;opacity:0.2}#mermaid-svg-N0KgHjJrXV0zdFJD .sectionTitle0{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .sectionTitle1{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .sectionTitle2{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .sectionTitle3{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-N0KgHjJrXV0zdFJD .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD .grid path{stroke-width:0}#mermaid-svg-N0KgHjJrXV0zdFJD .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-N0KgHjJrXV0zdFJD .task{stroke-width:2}#mermaid-svg-N0KgHjJrXV0zdFJD .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD .taskText:not([font-size]){font-size:11px}#mermaid-svg-N0KgHjJrXV0zdFJD .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-N0KgHjJrXV0zdFJD .task.clickable{cursor:pointer}#mermaid-svg-N0KgHjJrXV0zdFJD .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-N0KgHjJrXV0zdFJD .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-N0KgHjJrXV0zdFJD .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-N0KgHjJrXV0zdFJD .taskText0,#mermaid-svg-N0KgHjJrXV0zdFJD .taskText1,#mermaid-svg-N0KgHjJrXV0zdFJD .taskText2,#mermaid-svg-N0KgHjJrXV0zdFJD .taskText3{fill:#fff}#mermaid-svg-N0KgHjJrXV0zdFJD .task0,#mermaid-svg-N0KgHjJrXV0zdFJD .task1,#mermaid-svg-N0KgHjJrXV0zdFJD .task2,#mermaid-svg-N0KgHjJrXV0zdFJD .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-N0KgHjJrXV0zdFJD .taskTextOutside0,#mermaid-svg-N0KgHjJrXV0zdFJD .taskTextOutside2{fill:#000}#mermaid-svg-N0KgHjJrXV0zdFJD .taskTextOutside1,#mermaid-svg-N0KgHjJrXV0zdFJD .taskTextOutside3{fill:#000}#mermaid-svg-N0KgHjJrXV0zdFJD .active0,#mermaid-svg-N0KgHjJrXV0zdFJD .active1,#mermaid-svg-N0KgHjJrXV0zdFJD .active2,#mermaid-svg-N0KgHjJrXV0zdFJD .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-N0KgHjJrXV0zdFJD .activeText0,#mermaid-svg-N0KgHjJrXV0zdFJD .activeText1,#mermaid-svg-N0KgHjJrXV0zdFJD .activeText2,#mermaid-svg-N0KgHjJrXV0zdFJD .activeText3{fill:#000 !important}#mermaid-svg-N0KgHjJrXV0zdFJD .done0,#mermaid-svg-N0KgHjJrXV0zdFJD .done1,#mermaid-svg-N0KgHjJrXV0zdFJD .done2,#mermaid-svg-N0KgHjJrXV0zdFJD .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-N0KgHjJrXV0zdFJD .doneText0,#mermaid-svg-N0KgHjJrXV0zdFJD .doneText1,#mermaid-svg-N0KgHjJrXV0zdFJD .doneText2,#mermaid-svg-N0KgHjJrXV0zdFJD .doneText3{fill:#000 !important}#mermaid-svg-N0KgHjJrXV0zdFJD .crit0,#mermaid-svg-N0KgHjJrXV0zdFJD .crit1,#mermaid-svg-N0KgHjJrXV0zdFJD .crit2,#mermaid-svg-N0KgHjJrXV0zdFJD .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-N0KgHjJrXV0zdFJD .activeCrit0,#mermaid-svg-N0KgHjJrXV0zdFJD .activeCrit1,#mermaid-svg-N0KgHjJrXV0zdFJD .activeCrit2,#mermaid-svg-N0KgHjJrXV0zdFJD .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-N0KgHjJrXV0zdFJD .doneCrit0,#mermaid-svg-N0KgHjJrXV0zdFJD .doneCrit1,#mermaid-svg-N0KgHjJrXV0zdFJD .doneCrit2,#mermaid-svg-N0KgHjJrXV0zdFJD .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-N0KgHjJrXV0zdFJD .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-N0KgHjJrXV0zdFJD .milestoneText{font-style:italic}#mermaid-svg-N0KgHjJrXV0zdFJD .doneCritText0,#mermaid-svg-N0KgHjJrXV0zdFJD .doneCritText1,#mermaid-svg-N0KgHjJrXV0zdFJD .doneCritText2,#mermaid-svg-N0KgHjJrXV0zdFJD .doneCritText3{fill:#000 !important}#mermaid-svg-N0KgHjJrXV0zdFJD .activeCritText0,#mermaid-svg-N0KgHjJrXV0zdFJD .activeCritText1,#mermaid-svg-N0KgHjJrXV0zdFJD .activeCritText2,#mermaid-svg-N0KgHjJrXV0zdFJD .activeCritText3{fill:#000 !important}#mermaid-svg-N0KgHjJrXV0zdFJD .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-N0KgHjJrXV0zdFJD g.classGroup text .title{font-weight:bolder}#mermaid-svg-N0KgHjJrXV0zdFJD g.clickable{cursor:pointer}#mermaid-svg-N0KgHjJrXV0zdFJD g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-N0KgHjJrXV0zdFJD g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-N0KgHjJrXV0zdFJD .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-N0KgHjJrXV0zdFJD .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-N0KgHjJrXV0zdFJD .dashed-line{stroke-dasharray:3}#mermaid-svg-N0KgHjJrXV0zdFJD #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD .commit-id,#mermaid-svg-N0KgHjJrXV0zdFJD .commit-msg,#mermaid-svg-N0KgHjJrXV0zdFJD .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-N0KgHjJrXV0zdFJD g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-N0KgHjJrXV0zdFJD g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-N0KgHjJrXV0zdFJD g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-N0KgHjJrXV0zdFJD .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-N0KgHjJrXV0zdFJD .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-N0KgHjJrXV0zdFJD .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-N0KgHjJrXV0zdFJD .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-N0KgHjJrXV0zdFJD .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-N0KgHjJrXV0zdFJD .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-N0KgHjJrXV0zdFJD .edgeLabel text{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-N0KgHjJrXV0zdFJD .node circle.state-start{fill:black;stroke:black}#mermaid-svg-N0KgHjJrXV0zdFJD .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-N0KgHjJrXV0zdFJD #statediagram-barbEnd{fill:#9370db}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-state .divider{stroke:#9370db}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-N0KgHjJrXV0zdFJD .note-edge{stroke-dasharray:5}#mermaid-svg-N0KgHjJrXV0zdFJD .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-N0KgHjJrXV0zdFJD .error-icon{fill:#522}#mermaid-svg-N0KgHjJrXV0zdFJD .error-text{fill:#522;stroke:#522}#mermaid-svg-N0KgHjJrXV0zdFJD .edge-thickness-normal{stroke-width:2px}#mermaid-svg-N0KgHjJrXV0zdFJD .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-N0KgHjJrXV0zdFJD .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-N0KgHjJrXV0zdFJD .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-N0KgHjJrXV0zdFJD .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-N0KgHjJrXV0zdFJD .marker{fill:#333}#mermaid-svg-N0KgHjJrXV0zdFJD .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-N0KgHjJrXV0zdFJD {color: rgba(0, 0, 0, 0.75);font: ;}客户端服务端Opening HandshakeHandshake RequestHandshake ResponseData Transfer(双向都可发起)Data FrameData FrameCloseing Handshake(双向都可发起)Closing Handshake RequestClosing Handshake Response客户端服务端

基本概念

websocket是HTML5开始提供的一种在单个tcp连接上进行的全双工的通讯协议；
websocket api被w3c定为标准
基于tcp的应用层协议
建立连接时会使用http协议
在websocket api中，客户端与服务端只需要一个握手动作，就能在客户端与服务端之间建立一个快速通道，两者之间就可以进行数据的相互传送（可以由双向主动发起）

层次划分	协议
应用层	HTTP,websocket,DNS,FTP,TELNET,SMTP
传输层	TCP,UDP
网络层	IP,ICMP
链路层	ARP,RARP

特点

与http协议有良好的兼容性。默认端口也是80和443，并且握手阶段采用http协议。因此握手时不容易被屏蔽，能通过各种http代理服务器；
可以发送文本，也可以发送二进制数据；
没有同源限制，客户端可以与任意服务端通信；
数据格式比较轻量，性能开销小，通信效率高；

编程接口

建立连接和断开连接
发送数据和接收数据
处理错误

应用场景

即时通信聊天
多玩家游戏
在线协同画图、文档、编辑
实时数据流的拉取和推送
体育、游戏、股票

差异比较

websocket、http、tcp

websocket与http属于应用层协议，它们都是通过tcp协议传输数据的；
websocket是全双工通信协议，http是单向的；
对于websocket来说，它必须依赖http协议来完成一次握手，握手成功后，数据就直接从tcp通道来传输了，后面的流程就和http没有关系了；
即时通信聊天
多玩家游戏
在线协同画图、文档、编辑
实时数据流的拉取和推送
体育、游戏、股票

PK一波，差异比较

websocket、http、tcp

websocket与http属于应用层协议，它们都是通过tcp协议传输数据的；
websocket是全双工通信协议，http是单向的；
对于websocket来说，它必须依赖http协议来完成一次握手，握手成功后，数据就直接从tcp通道来传输了，后面的流程就和http没有关系了；