首頁

WebSocket 百科

前端達人

WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議。WebSocket通信協(xié)議于2011年被IETF定為標準RFC 6455,并由RFC7936補充規(guī)范。WebSocket API也被W3C定為標準。
WebSocket使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單,允許服務端主動向客戶端推送數(shù)據(jù)。在WebSocket API中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創(chuàng)建持久性的連接,并進行雙向數(shù)據(jù)傳輸。
中文名
WebSocket
外文名
WebSocket
解    釋
基于TCP的全雙工通信協(xié)議
優(yōu)    點
服務器可以主動傳送數(shù)據(jù)給客戶端
功    能
實現(xiàn)了瀏覽器與服務器全雙工通信

背景

 語音
很多網(wǎng)站為了實現(xiàn)推送技術,所用的技術都是輪詢。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對服務器發(fā)出HTTP請求,然后由服務器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點,即瀏覽器需要不斷的向服務器發(fā)出請求,然而HTTP請求可能包含較長的頭部,其中真正有效的數(shù)據(jù)可能只是很小的一部分,顯然這樣會浪費很多的帶寬等資源。
而比較新的技術去做輪詢的效果是Comet。這種技術雖然可以雙向通信,但依然需要反復發(fā)出請求。而且在Comet中,普遍采用的長鏈接,也會消耗服務器資源。
在這種情況下,HTML5定義了WebSocket協(xié)議,能更好的節(jié)省服務器資源和帶寬,并且能夠更實時地進行通訊。

優(yōu)點

 語音
  • 較少的控制開銷。在連接創(chuàng)建后,服務器和客戶端之間交換數(shù)據(jù)時,用于協(xié)議控制的數(shù)據(jù)包頭部相對較小。在不包含擴展的情況下,對于服務器到客戶端的內(nèi)容,此頭部大小只有2至10字節(jié)(和數(shù)據(jù)包長度有關);對于客戶端到服務器的內(nèi)容,此頭部還需要加上額外的4字節(jié)的掩碼。相對于HTTP請求每次都要攜帶完整的頭部,此項開銷顯著減少了。
  • 更強的實時性。由于協(xié)議是全雙工的,所以服務器可以隨時主動給客戶端下發(fā)數(shù)據(jù)。相對于HTTP請求需要等待客戶端發(fā)起請求服務端才能響應,延遲明顯更少;即使是和Comet等類似的長輪詢比較,其也能在短時間內(nèi)更多次地傳遞數(shù)據(jù)。
  • 保持連接狀態(tài)。與HTTP不同的是,Websocket需要先創(chuàng)建連接,這就使得其成為一種有狀態(tài)的協(xié)議,之后通信時可以省略部分狀態(tài)信息。而HTTP請求可能需要在每個請求都攜帶狀態(tài)信息(如身份認證等)。
  • 更好的二進制支持。Websocket定義了二進制幀,相對HTTP,可以更輕松地處理二進制內(nèi)容。
  • 可以支持擴展。Websocket定義了擴展,用戶可以擴展協(xié)議、實現(xiàn)部分自定義的子協(xié)議。如部分瀏覽器支持壓縮等。
  • 更好的壓縮效果。相對于HTTP壓縮,Websocket在適當?shù)臄U展支持下,可以沿用之前內(nèi)容的上下文,在傳遞類似的數(shù)據(jù)時,可以顯著地提高壓縮率。

握手協(xié)議

 語音
WebSocket 是獨立的、創(chuàng)建在 TCP 上的協(xié)議。
Websocket 通過HTTP/1.1 協(xié)議的101狀態(tài)碼進行握手。
為了創(chuàng)建Websocket連接,需要通過瀏覽器發(fā)出請求,之后服務器進行回應,這個過程通常稱為“握手”(handshaking)。


藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


3D動效設計小集

seo達人



 

原文地址:站酷
作者:FY印跡

 

轉載請注明:學UI網(wǎng)》3D動效設計小集

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務



這些不同類型的菜單圖標和用法,我做了個總結分析!

seo達人


1.漢堡菜單

圖片

關鍵詞:橫條、多個菜單選項

這個圖標的樣式簡潔易懂,通常位于網(wǎng)頁和App的上下角,用來告知用戶這個按鈕之外還有更多內(nèi)容可以探索。

當產(chǎn)品有多個菜單選項時,考慮使用漢堡圖標來顯示,但盡可能避免在桌面視圖中使用。

 

2.垂直三點式菜單

圖片

關鍵詞:垂直、內(nèi)嵌菜單

通常位于屏幕或窗口的右上角或頂部,是用于打開帶有附加選項的圖標,打開的內(nèi)容往往是一個較小的內(nèi)嵌菜單而不是整個全新的頁面。

 

3.水平三點式菜單

圖片

關鍵詞:水平、內(nèi)嵌菜單、web

水平三點式菜單同樣常位于屏幕或窗口的右上角,用于打開菜單或顯示相關項的操作。

因為圖標樣式是水平的,所以更容易在web上或者在表格等水平方向中使用。

 

4.九宮格菜單 

圖片

關鍵詞:子分類、子功能

九宮格菜單通常用于打開同一產(chǎn)品中包含不同子產(chǎn)品或子功能,可以在它們之間快速切換,此圖標常位于產(chǎn)品主頁的右上角。

 

5.過濾式菜單

圖片

關鍵詞:過濾、排序

過濾式菜單由三行不同長度的線段水平疊放而成,是最廣泛使用的過濾符號。可以將過濾式菜單與“排序方式”選項結合使用,或者與全局過濾器結合使用。

 

6.漢堡菜單變體

圖片

關鍵詞:樣式特殊、時尚感更強

作為漢堡圖標的替代品,與顯示列表菜單的目的相同嗎,但是這些樣式我們平常見的可能會比較少,更常用在充滿現(xiàn)代感、時尚感和藝術感的網(wǎng)站上。

圖片

 

最后

不同的樣式可能代表著截然不同的設計目的,常思考這些小而精的細節(jié),是保證產(chǎn)品體驗提升的關鍵。

 

參考:uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac

 

原文地址:Clip設計夾(公眾號)

作者:Clippp

轉載請注明:學UI網(wǎng)》這些不同類型的菜單圖標和用法,我做了個總結分析!

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務



日歷

鏈接

個人資料

藍藍設計的小編 http://m.yvirxh.cn

存檔