【 ➰斗艳争妍の网络协议姐妹花️➰】http协议 VS websocket协议
生活随笔
收集整理的這篇文章主要介紹了
【 ➰斗艳争妍の网络协议姐妹花️➰】http协议 VS websocket协议
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
http協議
http簡介
- http
http（hypertext transfer protocol），“超文本傳輸協議”。
- 超文本
包含有超鏈接和各種多媒體元素標記的文本。常見的超文本格式html（超文本標記語言）。
- http協議
定義瀏覽器如何向web服務器發送請求，web服務器如何向瀏覽器進行響應。簡言之，就是client端與server端進行數據傳輸的一種規則。
http工作原理
- 請求/響應模型
用戶點擊http://www.baidu.com/index.html后的流程：
簡言之：建鏈->請求->響應->斷開
- 連接方式
- 無狀態性
http協議本身不會對發送過的請求和響應的通訊狀態進行持久化處理。
同一客戶端（瀏覽器）第二次訪問同一個web服務器時，服務端無法知道這個客戶端是否曾經訪問過。
無狀態性保證了http協議的簡單性，從而能夠快速處理大量的事務，提高了效率。
通常使用cookie或附帶其他參數（token）用來區分來源。
發展歷程
- http/1.0
每個tcp連接只能發送一個請求。發送數據完畢，該連接就關閉，如果還要請求其他資源，就必須再新建一個連接。非標Connection:keep-alive
- http/1.1
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沒有關系了；
總結
以上是生活随笔為你收集整理的【 ➰斗艳争妍の网络协议姐妹花️➰】http协议 VS websocket协议的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 看了50+竞品分析，我总结出5个常见问题
- 下一篇： 【⛸️拒绝手滑，我们都是稳准狠⛸️】C+