Web 全棧推拉能手 Socket-IO 庫
Web 前端與後臺的通信
-
短輪詢:通過不斷髮送 http 請求達到即時通信的目的
-
長輪詢:訪問無資源並不會立刻返回,保持較長時間的通訊,直到獲得數據或超時返回。
-
WebSocket:基於 TCP 協議,兼容 HTTP 協議的基礎上,做協議升級,在 HTML5 中提供 client 和 server 進行全雙工通信。
Socket.IO
Socket.IO 是一個封裝了 Websocket、基於 Node 的 JavaScript 框架,包含 client 的 JavaScript 和 server 的 Node。其屏蔽了所有底層細節,讓頂層調用非常簡單。
Socket.IO 的協議
Socket.IO 的協議基於 engine.io 的版本,目前最新版本是 4。GO 的 socket.io 庫是 github.com/graarh/golang-socketio,僅支持 EIO=3 的協議版本。
準備全棧 Socket.IO 庫
前端 (React typescript):
-
"socket.io-client": "2.3.0"
-
"@types/socket.io-client": "^1.4.33"
後端 (golang)
go get github.com/graarh/golang-socketio
go get github.com/graarh/golang-socketio/transport
使用 Socket.IO
後端
創建對象
server := gosocketio.NewServer(transport.GetDefaultWebsocketTransport())
Server 類型實現了 http.Handler 接口,可以無縫銜接各 web 框架,例如: http.Handle ("/socket.io",server)。
響應事件
//預設
server.on(gosocketio.OnConnection,func(c *gosocketio.Channel){})
server.on(gosocketio.OnDisConnection,func(c *gosocketio.Channel){})
server.on(gosocketio.OnError,func(c *gosocketio.Channel){})
//自定義事件
server.On("send", func(c *gosocketio.Channel, msg Message) string {})
推送數據
//回覆消息
c.Emit("event","message")
//廣播消息
c.BroadcastTo("room","event","message")
server.BroadcastTo("room","event","message")
Channel 的 BroadcastTo 函數在內部實現上調用了 Server 的 BroadcastTo 函數。
這裏涉及到房間的概念,房間是對訪問者的歸類,用於局部分類廣播消息,加入房間方法爲 c.Join ("roomName")。
前端 (React typescript)
創建對象
import * as io from 'socket.io-client';
let socket:SocketIOClient.Socket
socket = io.connect("ws://", { transports: ['websocket'] })
響應事件
socket.on("events", (data: any) => {})
發送消息
socket.emit("events","message")
總結
Socket.IO 不僅支持 WebSocket,還支持許多種輪詢機制以及其他實時通信方式,並封裝了通用的接口。這些方式包含 Adobe Flash Socket、Ajax 長輪詢、Ajax multipart streaming 、持久 Iframe、JSONP 輪詢等。換句話說,當 Socket.IO 檢測到當前環境不支持 WebSocket 時,能夠自動地選擇最佳的方式來實現網絡的實時通信。
PS: 目前編者還未找到支持 Engine.IO 版本 4 協議的 GO 語言庫,所以只能降低客戶端 socket.io-client 的版本以完成前後端的適配。
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/0Hglh4c1tmISZ9erwQ6bRw