信息推送

服務(wù)端主動(dòng)向客戶端推送消息，使客戶端能夠即時(shí)接收到信息。

場(chǎng)景

• 頁(yè)面接收到點(diǎn)贊，消息提醒
• 聊天功能
• 彈幕功能
• 實(shí)時(shí)更新數(shù)據(jù)功能

實(shí)現(xiàn)即時(shí)通訊方式

短輪詢

瀏覽器（客戶端）每隔一段時(shí)間向服務(wù)器發(fā)送http請(qǐng)求，服務(wù)器端在收到請(qǐng)求后，不論是否有數(shù)據(jù)更新，都直接進(jìn)行響應(yīng)。

本質(zhì)：客戶端通過不停的請(qǐng)求，使客戶端能模擬能實(shí)時(shí)能接收客戶端的數(shù)據(jù)變化

優(yōu)點(diǎn)：簡(jiǎn)單易懂，操作方便

缺點(diǎn)：如果每個(gè)客戶端不停的向服務(wù)器發(fā)送請(qǐng)求，使用人數(shù)增加，請(qǐng)求數(shù)量翻倍，造成服務(wù)器壓力大，反應(yīng)遲緩。不適合于大型項(xiàng)目或者使用人數(shù)太多。

var xhr = new XMLHttpRequest();
setInterval(function(){
    xhr.open('GET','/user');
    xhr.onreadystatechange = function(){

    };
    xhr.send();
},1000)

長(zhǎng)輪詢(comet)

服務(wù)端接收客戶端的請(qǐng)求之后不會(huì)立即反應(yīng)，先是將請(qǐng)求掛起，當(dāng)數(shù)據(jù)發(fā)生改變后，返回響應(yīng)。當(dāng)一定時(shí)間內(nèi)數(shù)據(jù)未變化，計(jì)時(shí)結(jié)束返回響應(yīng)并關(guān)閉連接。客戶端處理響應(yīng)后，向服務(wù)器再次發(fā)送新一輪長(zhǎng)輪詢。

優(yōu)點(diǎn)：比短輪詢減少了http請(qǐng)求

缺點(diǎn)：掛起也會(huì)浪費(fèi)資源

function ajax(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET','/user');
    xhr.onreadystatechange = function(){
        ajax();
    };
    xhr.send();
}

短輪詢與長(zhǎng)輪詢都

• 基于HTTP的，兩者本身存在著缺陷；輪詢需要更快的處理速度，長(zhǎng)輪詢要求處理并發(fā)的能力
• 服務(wù)器不會(huì)主動(dòng)推送信息，而是在客戶端發(fā)送ajax請(qǐng)求后進(jìn)行返回的響應(yīng)

長(zhǎng)連接(SSE)

SSE基于 HTTP 協(xié)議中的持久連接，作為 HTML5 出現(xiàn)的新功能，不用客戶端向服務(wù)器發(fā)請(qǐng)求，而是當(dāng)服務(wù)器數(shù)據(jù)發(fā)生改變，直接對(duì)客戶端響應(yīng)

?see 前后端原生實(shí)現(xiàn)?Web消息推送之SSE_魅Lemon的博客-CSDN博客

see vue3?vue3使用sse_sse vue_OneRepublicSu的博客-CSDN博客

see vue2?在vue2中使用SSE（服務(wù)器發(fā)送事件）_sse vue_如晴天似雨天~的博客-CSDN博客

WebSocket

WebSocket是Html5定義的一個(gè)新協(xié)議，可以實(shí)現(xiàn)服務(wù)器-客戶端全雙工通信；需要服務(wù)器和客戶端建立連接，當(dāng)連接開始，雙方處于平等狀態(tài)互發(fā)信息，不存在請(qǐng)求和相應(yīng)的關(guān)系。

websocket實(shí)現(xiàn)??

js實(shí)現(xiàn)WebSocket 連接_js websocket_給你六圓錢的博客-CSDN博客
webSocket 學(xué)習(xí)_小滿zs的博客-CSDN博客

http

• 全稱：超文本傳輸協(xié)議。
• 簡(jiǎn)介：服務(wù)器傳輸 超文本 到本地瀏覽器的傳輸協(xié)議
• 特點(diǎn)：應(yīng)用層協(xié)議，基于TCP/IP協(xié)議傳輸數(shù)據(jù)
• https：加密的http
• HTTP默認(rèn)的端口號(hào)為80, HTTPS的端口號(hào)為443。

http協(xié)議狀態(tài)碼

• 1xx? （信息）
  • 100 接受的請(qǐng)求正在處理，信息類狀態(tài)碼
• 2xx（成功） 請(qǐng)求成功處理
  • 200 服務(wù)器已成功處理了請(qǐng)求
• 3xx（重定向）要完成請(qǐng)求，需要進(jìn)一步操作
  • 301? ? 永久性重定向，表示資源已被分配了新的 URL
  • 302? ? 臨時(shí)性重定向，表示資源臨時(shí)被分配了新的 URL
  • 303? ? 表示資源存在另一個(gè)URL，用GET方法獲取資源
  • 304? ? (未修改)自從上次請(qǐng)求后，請(qǐng)求網(wǎng)頁(yè)未修改。服務(wù)器返回響應(yīng)，不返回網(wǎng)頁(yè)內(nèi)容
• 4xx? 客戶端錯(cuò)誤
  • 400? ? ? 服務(wù)器不理解請(qǐng)求的語(yǔ)法
  • 401? ? ? 請(qǐng)求需要有通過HTTP認(rèn)證的認(rèn)證信息
  • 403? ? ? 服務(wù)器拒絕請(qǐng)求
  • 404? ? ? 服務(wù)器找不到請(qǐng)求網(wǎng)頁(yè)
• 5xx 服務(wù)器錯(cuò)誤
  • 500? ? ? 服務(wù)器遇到錯(cuò)誤，無(wú)法完成請(qǐng)求
  • 503? ? ? 服務(wù)器處于停機(jī)維護(hù)或超負(fù)載，無(wú)法處理請(qǐng)求

三次握手四次揮手

三次握手的機(jī)制是為了保證能建立一個(gè)安全可靠的連接

看見一個(gè)特別好玩的例子，公安局長(zhǎng)王哥 和 陳某打電話

1. 公安局：你好！陳某，聽得到嗎？（一次會(huì)話）
2. 陳某：聽到了，王哥，你能聽到嗎 （二次會(huì)話）
3. 公安局：聽到了，你過來(lái)自首吧 （開始會(huì)話）（三次會(huì)話）

最開始時(shí)客戶端和服務(wù)器都處于CLOSED關(guān)閉狀態(tài)。主動(dòng)打開連接的為客戶端，被動(dòng)打開連接的是服務(wù)器。

TCP服務(wù)器進(jìn)程先創(chuàng)建傳輸控制塊TCB，時(shí)刻準(zhǔn)備接受客戶進(jìn)程的連接請(qǐng)求，服務(wù)器就進(jìn)入了LISTEN 監(jiān)聽狀態(tài)

• 第一次握手
  • 客戶端向服務(wù)端發(fā)送請(qǐng)求報(bào)文，報(bào)文首部中SYN=1，初始序列號(hào) seq=x。此時(shí)，TCP客戶端進(jìn)程進(jìn)入了?SYN-SENT 同步已發(fā)送狀態(tài)
  • 得出結(jié)論：客戶端的發(fā)送能力正常
• 第二次握手
  • 服務(wù)器收到請(qǐng)求報(bào)文后，如果同意連接，則會(huì)向客戶端發(fā)出確認(rèn)報(bào)文。確認(rèn)報(bào)文中應(yīng)該 ACK=1，SYN=1，確認(rèn)號(hào)是ack=x+1，序列號(hào) seq=y，此時(shí)，TCP服務(wù)器進(jìn)程進(jìn)入了?SYN-RCVD 同步收到狀態(tài)
  • 得出結(jié)論：證明服務(wù)器端的接收能力、發(fā)送能力正常
• 第三次握手
  • 客戶端收到報(bào)文，向服務(wù)端進(jìn)行確認(rèn)，確認(rèn)報(bào)文的ACK=1，ack=y+1，序列號(hào)seq=x+1，此時(shí)，TCP連接建立，客戶端進(jìn)入ESTABLISHED已建立連接狀態(tài)
  • 得出結(jié)論：證明客戶端的接收能力正常

為什么會(huì)需要三次握手的猜測(cè)？

• 當(dāng)客戶端向服務(wù)器發(fā)送請(qǐng)求報(bào)文，由于網(wǎng)絡(luò)等原因滯留，未能即時(shí)發(fā)送到服務(wù)，然后客戶端繼續(xù)向服務(wù)端發(fā)送請(qǐng)求，后于服務(wù)器成功建立了連接。當(dāng)連接釋放后，之前的請(qǐng)求到達(dá)了服務(wù)器，這個(gè)請(qǐng)求已失效了，但服務(wù)器誤以為客戶端的新請(qǐng)求，又進(jìn)行了連接，造成了資源浪費(fèi)和不必要的錯(cuò)誤。
• 采用三次握手，失效的報(bào)文發(fā)送到服務(wù)器，服務(wù)器再返回給客戶端，客戶端就能確定是否還要繼續(xù)建立連接。

四次揮手

1. 張三：好的，那我先走了
2. 李四：好的，那你走吧
3. 李四：那我也走了？
4. 張三：好的，你走吧

?

數(shù)據(jù)傳輸完畢后，雙方都可釋放連接。最開始的時(shí)候，客戶端和服務(wù)器都是處于ESTABLISHED狀態(tài)，然后客戶端主動(dòng)關(guān)閉，服務(wù)器被動(dòng)關(guān)閉。

一次揮手 客戶端發(fā)出連接釋放報(bào)文，并且停止發(fā)送數(shù)據(jù)。釋放數(shù)據(jù)報(bào)文首部，F(xiàn)IN=1，其序列號(hào)為seq=u（等于前面已經(jīng)傳送過來(lái)的數(shù)據(jù)的最后一個(gè)字節(jié)的序號(hào)加1），此時(shí)，客戶端進(jìn)入FIN-WAIT-1（終止等待1）狀態(tài)

第二次揮手 服務(wù)器端接收到連接釋放報(bào)文后，發(fā)出確認(rèn)報(bào)文，ACK=1，ack=u+1，并且?guī)献约旱男蛄刑?hào)seq=v，此時(shí)，服務(wù)端就進(jìn)入了CLOSE-WAIT 關(guān)閉等待狀態(tài)

第三次揮手 客戶端接收到服務(wù)器端的確認(rèn)請(qǐng)求后，客戶端就會(huì)進(jìn)入FIN-WAIT-2（終止等待2）狀態(tài)，等待服務(wù)器發(fā)送連接釋放報(bào)文，服務(wù)器將最后的數(shù)據(jù)發(fā)送完畢后，就向客戶端發(fā)送連接釋放報(bào)文，服務(wù)器就進(jìn)入了LAST-ACK（最后確認(rèn)）狀態(tài)，等待客戶端的確認(rèn)。

第四次揮手 客戶端收到服務(wù)器的連接釋放報(bào)文后，必須發(fā)出確認(rèn)，ACK=1，ack=w+1，而自己的序列號(hào)是seq=u+1，此時(shí)，客戶端就進(jìn)入了TIME-WAIT（時(shí)間等待）狀態(tài)，但此時(shí)TCP連接還未終止，必須要經(jīng)過2MSL后（最長(zhǎng)報(bào)文壽命），當(dāng)客戶端撤銷相應(yīng)的TCB后，客戶端才會(huì)進(jìn)入CLOSED關(guān)閉狀態(tài)，服務(wù)器端接收到確認(rèn)報(bào)文后，會(huì)立即進(jìn)入CLOSED關(guān)閉狀態(tài)，到這里TCP連接就斷開了，四次揮手完成

為什么客戶端要等待2MSL？
主要原因是為了保證客戶端發(fā)送那個(gè)的第一個(gè)ACK報(bào)文能到到服務(wù)器，因?yàn)檫@個(gè)ACK報(bào)文可能丟失，并且2MSL是任何報(bào)文在網(wǎng)絡(luò)上存在的最長(zhǎng)時(shí)間，超過這個(gè)時(shí)間報(bào)文將被丟棄，這樣新的連接中不會(huì)出現(xiàn)舊連接的請(qǐng)求報(bào)文。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-604890.html

?輸入地址點(diǎn)擊回車鍵，瀏覽器干了什么

• 輸入地址并確認(rèn)后，瀏覽器對(duì)域名進(jìn)行解析。
• 如果瀏覽器有域名對(duì)應(yīng)的DNS相關(guān)信息的緩存
  • 有的話可以拿到服務(wù)端的IP地址，
  • 如果沒有的話，會(huì)去本地的host文件查看是否進(jìn)行了配置，
    • 如果host文件沒有配置相關(guān)的信息，會(huì)發(fā)起DNS的請(qǐng)求用來(lái)獲取對(duì)應(yīng)的服務(wù)器的IP地址。應(yīng)用端會(huì)構(gòu)造DNS的請(qǐng)求報(bào)文，應(yīng)用層會(huì)調(diào)用傳輸層的UDP的相關(guān)協(xié)議進(jìn)行數(shù)據(jù)傳輸，會(huì)在DNS的基礎(chǔ)上加上UDP的請(qǐng)求頭然后傳輸信息至網(wǎng)絡(luò)層，網(wǎng)絡(luò)層會(huì)在UDP的請(qǐng)求報(bào)文基礎(chǔ)上加上IP的請(qǐng)求頭然后到數(shù)據(jù)鏈路層，數(shù)據(jù)鏈路層會(huì)實(shí)現(xiàn)二層尋址，會(huì)加上自己的mac信息和通過網(wǎng)絡(luò)層的ARP協(xié)議里拿到的下一步基地的mac信息一起通過物理層一起傳輸出去，通常傳到路由器，然后路由器這個(gè)三層設(shè)備最終會(huì)通過運(yùn)營(yíng)商的路線傳輸?shù)较乱粋€(gè)路由器地址，達(dá)到服務(wù)器后信息通過相同步驟進(jìn)行層層解析HTTP的請(qǐng)求報(bào)文，然后構(gòu)造HTTP響應(yīng)報(bào)文沿著相同的步驟傳輸至客戶端。用戶輸入U(xiǎn)RL回車之后，瀏覽器到底做了什么？_回車之后瀏覽器做了什么_小牙同學(xué)的博客-CSDN博客

到了這里，關(guān)于前端實(shí)現(xiàn)消息推送、即時(shí)通信、SSE、WebSocket、http簡(jiǎn)介的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！