Socket.IO使用範例
BRICKS TOOLS avatar
作者:BRICKS TOOLS
一週前已更新

Socket.IO 是一種用於實時、雙向、事件驅動的通訊的技術。它是建立在 WebSocket 基礎之上的一個更高層次的抽象,同時提供了後備選項,如長輪詢(long polling),以支援更廣泛的瀏覽器和環境。這使得 Socket.IO 更加靈活和強大,特別是在需要考慮到兼容性和穩健性的情境中。在這篇文章中,我們將介紹如何快速設置一個基於 Socket.IO 的實時通訊應用。這包括了在伺服器端和客戶端建立 Socket.IO 連接的步驟,以及如何通過事件來接收和發送訊息的示例。

您可以直接使用以下範例快速了解 WebSocket 的設定並進行測試:

範例 Application : Socket.IO - Basic

在使用前請先參考WebSocket使用方式,詳見 WebSocket 使用範例


前置作業 - 架設Socket.IO Server 的測試環境

在學習如何使用 Socket.IO 的功能之前,我們需要可以進行通訊測試的對向伺服器,若您自行會建立測試伺服器,可以直接與您的伺服器進行通訊測試。 但若您手上沒有可以立即測試的環境,可以透過以下的教學建立自己的測試伺服器

設定連結 Socket.IO 伺服器

  1. 在 Application 中新增一個 Generator,類別為 WebSocket。

  2. 設定 Connection Information

    1. 設定 URL 為上述測試的 Server url

    2. Init 設定為 Yes:當應用程式執行時,會自動與伺服器開啟連線。

    3. Message Type 依伺服器的通訊需求進行設定,若使用上述測試伺服器則選擇 Text

    4. 在 Outlets 區域,分別新增 Message 及 Ready State 的 Data 資料
      (點選後直接按 Create New 即可快速新增)

  3. 設定 Use Socket.IO

    1. Enable Socket.IO > 設定為 Yes,即代表使用 Socket IO 的通訊方式。

    2. Socket IO Version > 依伺服器選擇 Socket IO 的版本。

    3. Event Name > 用於監聽訂閱 Event 事件的名稱(範例中輸入設定為message)。

設定上述項目後即可與 SocketIO 伺服器進行溝通,使用方式與 WebSoket 的範例內容相同。

注意事項:

  • 但在Socket.IO的URL需將https修改為wss
    例如: wss://xxxx-xxx-xxx-xxx-xx.ngrok-free.app
    URL入:wss://xxxx-xxx-xxx-xxx-xx.grok-free.app

    Path的位置保持空白


BRICKS 測試接收訊息

為了能方便的觀察訊息接收狀況,我們設計一個可顯示連結狀態及訊息的畫面。

  1. 建立一個 Text Brick,取名為 Msg ,並將其 Text 內容連結至 (Data) Message

  2. 建立一個 Text Brick,取名為 Ready State,並將其 Text 內容連結至 (Data) Ready State

  3. 開啟實體裝置上的 BRICKS Foundation 畫面進行測試。
    當APP開啟時,會自動與伺服器進行連線,若連線成功,(Text) Ready State 中會顯示 OPEN .

  4. 在測試伺服器端發送測試訊息,例如:Hello this is a test
    即可在實體裝置畫面中的 (Text) Msg 中看到測訊訊息。

BRICKS 發送訊息

對外發送訊息會需要透過 Action 的行為進行,在各種 Brick元件或 Data內容異動時,都可透過 Events 進行 Action 的觸發。

在此我們簡單透過按下( On Press ) 文字方塊 的事件進行 Action 的觸發。

  1. 在 Canvas 中建立一個 Text Brick,並在 Text 欄位中填入 "Sent Hello"

  2. 在 Text 中 Events 區域點擊 On Press 進行設定。

    1. New Action > Generator : WebSocket

    2. Selection Action > WEB SOCKET SEND
      即可新增一個 SEND行為

    3. Select Action Property > Value > " Hi I'm BRICKS "
      在此填入想傳送給 Server 的訊息,亦可點擊左方鎖鍊圖安與 Data 進行串接,從變數取得要對外發送的訊息。

    4. Save 儲存後離開設定畫面

  3. 在 Preview 中點擊 "Sent Hello" 的 Text Brick,即可在測試伺服器上看到 "Hi I'm BRICKS" 的訊息。


是否回答了您的問題?