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 的版本以完成前后端的適配。