即時通訊技術介紹

更新 發佈閱讀 2 分鐘

※客戶端和部落格網站之間的互動行為:

raw-image
  • 客戶端的請求:客戶端使用GET方法,向後端發送請求,目的是希望獲取特定文章的內容,這裡可以視為客戶端的行動或意圖。
  • 後端的處理:後端接收到請求後,根據請求中指定的ID,從資料庫中檢索出符合條件的文章。這裡展示了後端的角色,即根據客戶端的需求進行數據操作。
  • 回應到客戶端:後端找到文章後,將內容打包回傳到前端,然後由前端呈現給客戶端。這部分是客戶端接收到結果並消耗內容的過程。

※ 做一個聊天室的初步構想:

  • 發 Http Request 向後端查詢有沒有新訊息?
  • 當對方發新訊息給我,我收不到?
  • 再發一次 Http Request?

※ HTTP Short Polling(短輪詢):

raw-image

1.短的輪詢的即時通訊模型:不斷地來回詢問

  • 圖中顯示,客戶端會每隔固定的時間就發出HTTP請求(request),向伺服器查詢是否有新訊息。
  • 伺服器接收到請求後,回應當時可用的訊息(如果有)。
  • 若沒有新訊息,客戶端會等待一段時間後再次發送請求。

2.互動性特徵:

  • 在即時通訊中,這種方式提供了基礎的互動,但它不像WebSocket或長輪詢那樣真正實現“即時”。
  • 短輪詢的效果是在一定頻率內模擬即時訊息的感覺,但可能會導致延遲或頻繁的網路流量。

※ 解決HTTP Short Polling(短輪詢)的缺點:HTTP Long Polling(長輪詢)

  • 客戶端發送請求(Request)到伺服器,並保持連線直到伺服器有更新。
  • 伺服器在有新訊息時回應(Response),而不是一次就結束連線。
  • 回應後,客戶端再次發送下一次請求,重複這個過程。
raw-image

※ 解決HTTP Long Polling(長的輪詢)的缺點:Websocket

  • 雙向通訊:圖中的箭頭清楚地表現出 WebSocket 的特徵——客戶端與伺服器之間的連線建立後,雙方都可以主動向對方發訊息。
  • 持久連線:與 HTTP 短輪詢或長輪詢不同,WebSocket 在初次連線建立後,連線會一直保持,從而大幅降低重複建立連線的開銷。
  • 即時性:透過 WebSocket,伺服器可以在有新訊息時立即推送給客戶端,而不需要等待客戶端發請求,達到更高效的即時通訊效果。
  • 應用場景:這樣的機制非常適合應用於即時聊天、遊戲同步、股票行情更新等需要高速互動的場景。
raw-image

※ 簡單說明:

  • 以前學會的 Http 是寄信給對方。單向傳遞訊息,每次都需要獨立建立連線並等待回覆。
  • 可以把 WebSocket 想像成是打電話,當電話接通以後,雙方都可以主動向對方說話。
留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
26會員
171內容數
全端網頁開發專業知識分享
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
看更多
你可能也想看
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
一、什麼是Web Service?   簡單說就是「服務」的概念,人與人間、電腦與電腦間都是一樣的,一個是人與人的一來一回交流,媒介是語言中文,另一個則是個人電腦與伺服器的交流,媒介是HTTP/Internet,那麼有了媒介,就會有共同格式才能做
Thumbnail
一、什麼是Web Service?   簡單說就是「服務」的概念,人與人間、電腦與電腦間都是一樣的,一個是人與人的一來一回交流,媒介是語言中文,另一個則是個人電腦與伺服器的交流,媒介是HTTP/Internet,那麼有了媒介,就會有共同格式才能做
Thumbnail
代理模式通過封裝原始對象來實現對該對象的控制和管理,同時不改變原始對象的行為或客戶端與該對象互動的方式,以此介入或增強對該對象的訪問和操作。
Thumbnail
代理模式通過封裝原始對象來實現對該對象的控制和管理,同時不改變原始對象的行為或客戶端與該對象互動的方式,以此介入或增強對該對象的訪問和操作。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News