久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長(zhǎng)資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      十分鐘快速了解websocket!!

      十分鐘快速了解websocket!!

      什么是WebSocket

      定義

      Websocket是一個(gè)持久化的網(wǎng)絡(luò)通信協(xié)議,可以在單個(gè) TCP 連接上進(jìn)行全雙工通訊,沒(méi)有了RequestResponse的概念,兩者地位完全平等,連接一旦建立,客戶(hù)端和服務(wù)端之間實(shí)時(shí)可以進(jìn)行雙向數(shù)據(jù)傳輸

      關(guān)聯(lián)和區(qū)別

      • HTTP
      1. HTTP是非持久的協(xié)議,客戶(hù)端想知道服務(wù)端的處理進(jìn)度只能通過(guò)不停地使用 Ajax進(jìn)行輪詢(xún)或者采用 long poll 的方式來(lái),但是前者對(duì)服務(wù)器壓力大,后者則會(huì)因?yàn)橐恢钡却齊esponse造成阻塞 十分鐘快速了解websocket??!
      2. 雖然http1.1默認(rèn)開(kāi)啟了keep-alive長(zhǎng)連接保持了這個(gè)TCP通道使得在一個(gè)HTTP連接中,可以發(fā)送多個(gè)Request,接收多個(gè)Response,但是一個(gè)request只能有一個(gè)response。而且這個(gè)response也是被動(dòng)的,不能主動(dòng)發(fā)起。
      3. websocket雖然是獨(dú)立于HTTP的一種協(xié)議,但是websocket必須依賴(lài) HTTP 協(xié)議進(jìn)行一次握手(在握手階段是一樣的),握手成功后,數(shù)據(jù)就直接從 TCP通道傳輸,與 HTTP 無(wú)關(guān)了,可以用一張圖理解兩者有交集,但是并不是全部。 十分鐘快速了解websocket!!
      • socket
      1. socket也被稱(chēng)為套接字,與HTTP和WebSocket不一樣,socket不是協(xié)議,它是在程序?qū)用嫔蠈?duì)傳輸層協(xié)議(可以主要理解為T(mén)CP/IP)的接口封裝??梢岳斫鉃橐粋€(gè)能夠提供端對(duì)端的通信的調(diào)用接口(API)
      2. 對(duì)于程序員而言,其需要在 A 端創(chuàng)建一個(gè) socket 實(shí)例,并為這個(gè)實(shí)例提供其所要連接的 B 端的 IP 地址和端口號(hào),而在 B 端創(chuàng)建另一個(gè) socket 實(shí)例,并且綁定本地端口號(hào)來(lái)進(jìn)行監(jiān)聽(tīng)。當(dāng) A 和 B 建立連接后,雙方就建立了一個(gè)端對(duì)端的 TCP 連接,從而可以進(jìn)行雙向通信。WebSocekt借鑒了 socket 的思想,為 client 和 server 之間提供了類(lèi)似的雙向通信機(jī)制

      應(yīng)用場(chǎng)景

      WebSocket可以做彈幕、消息訂閱、多玩家游戲、協(xié)同編輯、股票基金實(shí)時(shí)報(bào)價(jià)、視頻會(huì)議、在線(xiàn)教育、聊天室等應(yīng)用實(shí)時(shí)監(jiān)聽(tīng)服務(wù)端變化

      Websocket握手

      • Websocket握手請(qǐng)求報(bào)文:
      GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com

      下面是與傳統(tǒng) HTTP 報(bào)文不同的地方:

      Upgrade: websocket Connection: Upgrade

      表示發(fā)起的是 WebSocket 協(xié)議

      Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13

      Sec-WebSocket-Key 是由瀏覽器隨機(jī)生成的,驗(yàn)證是否可以進(jìn)行Websocket通信,防止惡意或者無(wú)意的連接。

      Sec_WebSocket-Protocol 是用戶(hù)自定義的字符串,用來(lái)標(biāo)識(shí)服務(wù)所需要的協(xié)議

      Sec-WebSocket-Version 表示支持的 WebSocket 版本。

      • 服務(wù)器響應(yīng):
      HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat

      101 響應(yīng)碼 表示要轉(zhuǎn)換協(xié)議。

      Connection: Upgrade 表示升級(jí)新協(xié)議請(qǐng)求。

      Upgrade: websocket 表示升級(jí)為 WebSocket 協(xié)議。

      Sec-WebSocket-Accept 是經(jīng)過(guò)服務(wù)器確認(rèn),并且加密過(guò)后的 Sec-WebSocket-Key。用來(lái)證明客戶(hù)端和服務(wù)器之間能進(jìn)行通信了。

      Sec-WebSocket-Protocol 表示最終使用的協(xié)議。

      至此,客戶(hù)端和服務(wù)器握手成功建立了Websocket連接,HTTP已經(jīng)完成它所有工作了,接下來(lái)就是完全按照Websocket協(xié)議進(jìn)行通信了。

      關(guān)于Websocket

      WebSocket心跳

      可能會(huì)有一些未知情況導(dǎo)致SOCKET斷開(kāi),而客戶(hù)端和服務(wù)端卻不知道,需要客戶(hù)端定時(shí)發(fā)送一個(gè)心跳 Ping 讓服務(wù)端知道自己在線(xiàn),而服務(wù)端也要回復(fù)一個(gè)心跳 Pong告訴客戶(hù)端自己可用,否則視為斷開(kāi)

      WebSocket狀態(tài)

      WebSocket 對(duì)象中的readyState屬性有四種狀態(tài):

      • 0: 表示正在連接
      • 1: 表示連接成功,可以通信了
      • 2: 表示連接正在關(guān)閉
      • 3: 表示連接已經(jīng)關(guān)閉,或者打開(kāi)連接失敗

      WebSocket實(shí)踐

      服務(wù)端接收發(fā)送消息

      WebSocket的服務(wù)端部分,本文會(huì)以Node.js搭建

      安裝express和負(fù)責(zé)處理WebSocket協(xié)議的ws

      npm install express ws

      安裝成功后的package.json:

      接著在根目錄創(chuàng)建server.js文件:

      //引入express 和 ws const express = require('express'); const SocketServer = require('ws').Server; //指定開(kāi)啟的端口號(hào) const PORT = 3000; // 創(chuàng)建express,綁定監(jiān)聽(tīng)3000端口,且設(shè)定開(kāi)啟后在consol中提示 const server = express().listen(PORT, () => console.log(`Listening on ${PORT}`)); // 將express交給SocketServer開(kāi)啟WebSocket的服務(wù) const wss = new SocketServer({ server }); //當(dāng) WebSocket 從外部連接時(shí)執(zhí)行 wss.on('connection', (ws) => {   //連接時(shí)執(zhí)行此 console 提示   console.log('Client connected');   // 對(duì)message設(shè)置監(jiān)聽(tīng),接收從客戶(hù)端發(fā)送的消息   ws.on('message', (data) => {     //data為客戶(hù)端發(fā)送的消息,將消息原封不動(dòng)返回回去     ws.send(data);   });   // 當(dāng)WebSocket的連接關(guān)閉時(shí)執(zhí)行   ws.on('close', () => {     console.log('Close connected');   }); });

      執(zhí)行node server.js啟動(dòng)服務(wù),端口打開(kāi)后會(huì)執(zhí)行監(jiān)聽(tīng)時(shí)間打印提示,說(shuō)明服務(wù)啟動(dòng)成功

      在開(kāi)啟WebSocket后,服務(wù)端會(huì)在message中監(jiān)聽(tīng),接收參數(shù)data捕獲客戶(hù)端發(fā)送的消息,然后使用send發(fā)送消息

      客戶(hù)端接收發(fā)送消息

      分別在根目錄創(chuàng)建index.html和index.js文件

      • index.html
      <html>   <body>     <script src="./index.js"></script>   </body> </html>
      • index.js
      // 使用WebSocket的地址向服務(wù)端開(kāi)啟連接 let ws = new WebSocket('ws://localhost:3000'); // 開(kāi)啟后的動(dòng)作,指定在連接后執(zhí)行的事件 ws.onopen = () => {   console.log('open connection'); }; // 接收服務(wù)端發(fā)送的消息 ws.onmessage = (event) => {   console.log(event); }; // 指定在關(guān)閉后執(zhí)行的事件 ws.onclose = () => {   console.log('close connection'); };

      上面的url就是本機(jī)node開(kāi)啟的服務(wù)地址,分別指定連接(onopen),關(guān)閉(onclose)和消息接收(onmessage)的執(zhí)行事件,訪(fǎng)問(wèn)html,打印ws信息

      打印了open connection說(shuō)明連接成功,客戶(hù)端會(huì)使用onmessage處理接收

      其中event參數(shù)包含這次溝通的詳細(xì)信息,從服務(wù)端回傳的消息會(huì)在event的data屬性中。

      手動(dòng)在控制臺(tái)調(diào)用send發(fā)送消息,打印event回傳信息:

      服務(wù)端定時(shí)發(fā)送

      上面是從客戶(hù)端發(fā)送消息,服務(wù)端回傳。我們也可以通過(guò)setInterval讓服務(wù)端在固定時(shí)間發(fā)送消息給客戶(hù)端:

      server.js修改如下:

      //當(dāng)WebSocket從外部連接時(shí)執(zhí)行 wss.on('connection', (ws) => {   //連接時(shí)執(zhí)行此 console 提示   console.log('Client connected'); +  //固定發(fā)送最新消息給客戶(hù)端 +  const sendNowTime = setInterval(() => { +    ws.send(String(new Date())); +  }, 1000); -  //對(duì)message設(shè)置監(jiān)聽(tīng),接收從客戶(hù)端發(fā)送的消息 -  ws.on('message', (data) => { -    //data為客戶(hù)端發(fā)送的消息,將消息原封不動(dòng)返回回去 -    ws.send(data); -  });   //當(dāng) WebSocket的連接關(guān)閉時(shí)執(zhí)行   ws.on('close', () => {     console.log('Close connected');   }); });

      客戶(hù)端連接后就會(huì)定時(shí)接收,直至我們關(guān)閉websocket服務(wù)

      多人聊天

      如果多個(gè)客戶(hù)端連接按照上面的方式只會(huì)返回各自發(fā)送的消息,先注釋服務(wù)端定時(shí)發(fā)送,開(kāi)啟兩個(gè)窗口模擬:

      如果我們要讓客戶(hù)端間消息共享,也同時(shí)接收到服務(wù)端回傳的消息呢?

      我們可以使用clients找出當(dāng)前所有連接中的客戶(hù)端 ,并通過(guò)回傳消息發(fā)送到每一個(gè)客戶(hù)端 中:

      修改server.js如下:

      ... //當(dāng)WebSocket從外部連接時(shí)執(zhí)行 wss.on('connection', (ws) => {   //連接時(shí)執(zhí)行此 console 提示   console.log('Client connected'); -  //固定發(fā)送最新消息給客戶(hù)端 -  const sendNowTime = setInterval(() => { -    ws.send(String(new Date())); - }, 1000); +  //對(duì)message設(shè)置監(jiān)聽(tīng),接收從客戶(hù)端發(fā)送的消息 +   ws.on('message', (data) => { +    //取得所有連接中的 客戶(hù)端 +    let clients = wss.clients; +    //循環(huán),發(fā)送消息至每個(gè)客戶(hù)端 +    clients.forEach((client) => { +      client.send(data); +    }); +   });   //當(dāng)WebSocket的連接關(guān)閉時(shí)執(zhí)行   ws.on('close', () => {     console.log('Close connected');   }); });

      這樣一來(lái),不論在哪個(gè)客戶(hù)端發(fā)送消息,服務(wù)端都能將消息回傳到每個(gè)客戶(hù)端 : 十分鐘快速了解websocket?。? title= 可以觀(guān)察下連接信息: 十分鐘快速了解websocket?。? title=

      總結(jié)

      紙上得來(lái)終覺(jué)淺,絕知此事要躬行,希望大家可以把理論配合上面的實(shí)例進(jìn)行消化,搭好服務(wù)端也可以直接使用測(cè)試工具好好玩耍一波

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)