WebSocket 是用於在網路上進行雙向通訊的技術,允許客戶端和伺服器之間建立持續的連線,以實現低延遲、高效率的即時通訊。在本篇文章中會教您如何快速設定 WebSocket 的連線方式,以及進行接收、發送訊息的範例。
您可以直接使用以下範例快速了解 WebSocket 的設定並進行測試:
範例 Application : WebSocket - Basic
若使用 SocketIo 協定,請詳見 SocketIO 使用範例
前置作業 - WebSocket Server 的測試環境
在學習如何使用 WebSocket 功能之前,我們需要可以進行通訊測試的對向伺服器,若您自行會建立測試伺服器,可以直接與您的伺服器進行通訊測試。 但若您手上沒有可以立即測試的環境,線上有不少可以免費的測試伺服器,可用 WebSocket Server Test 等的關鍵字進行搜尋。
以下為建議的第三方測試伺服器 :
進入後即可複製測試伺服器的 Server url 供稍後的測試使用
設定連結 WebSocket 伺服器
在 Application 中新增一個 Generator,類別為 WebSocket。
設定 WebSocket 元件
設定 URL 為上述測試的 Server url
Init 設定為 Yes:當應用程式執行時,會自動與伺服器開啟連線。
Message Type 依伺服器的通訊需求進行設定,若使用上述測試伺服器則選擇 Text
在 Outlets 區域,分別新增 Message 及 Ready State 的 Data 資料
(點選後直接按 Create New 即可快速新增)
目前已設定完成 WebSocket 的基礎設定,從Server 端傳來的訊息會自動的接入 Message 的 Data 中。
因為瀏覽器資安規範,在 Preview 模式或 Web Foundation 底下使用 WebSocket 時,僅能使用 wss:// 的加密通訊方式,無法使用 ws:// 的非加密模式。
但在 App 環境 (BRICKS Foundation) 上使用則無上述問題。
BRICKS 測試接收訊息
為了能方便的觀察訊息接收狀況,我們設計一個可顯示連結狀態及訊息的畫面。
建立一個 Text Brick,取名為 Msg,並將其 Text 內容連結至 (Data) Message
建立一個 Text Brick,取名為 Ready State,並將其 Text 內容連結至 (Data) Ready State
開啟 Application 的 Preview 畫面進行測試。
當 Preview 開啟時,會自動與伺服器進行連線,若連線成功,(Text) Ready State 中會顯示 OPEN .在測試伺服器端發送測試訊息,例如 Hello BRICKS !
即可在 Preview 畫面中的 (Text) Msg 中看到測訊訊息。
BRICKS 發送訊息
對外發送訊息會需要透過 Action 的行為進行,在各種 Brick元件或 Data內容異動時,都可透過 Events 進行 Action 的觸發。
在此我們簡單透過按下( On Press ) 文字方塊 的事件進行 Action 的觸發。
在 Canvas 中建立一個 Text Brick,並在 Text 欄位中填入 "Sent Hello"
在 Text 中 Events 區域點擊 On Press 進行設定。
New Action > Generator : WebSocket
Selection Action > WEB SOCKET SEND
即可新增一個 SEND行為Select Action Property > Value > " Hey I"m BRICKS "
在此填入想傳送給 Server 的訊息,亦可點擊左方鎖鍊圖安與 Data 進行串接,從變數取得要對外發送的訊息。Save 儲存後離開設定畫面
在 Preview 中點擊 "Sent Hello" 的 Text Brick,即可在測試伺服器上看到 "I'm BRICKS" 的訊息。
注意事項:
因為瀏覽器資安規範,在 Preview 模式或 Web Foundation 底下使用 WebSocket 時,僅能使用 wss:// 的加密通訊方式,無法使用 ws:// 的非加密模式。
但在 App 環境 (BRICKS Foundation) 上使用則無上述問題。若 WebSocket 網址中有 Path 的話,設定時主網址的最未端與 Path 的最前端不用放 "/"
例如 wss://mytest.server/path/to/funciton
URL:wss://mytest.server
Path:path/to/funciton