dart系列之:實時通訊,在瀏覽器中使用WebSockets

flydean發表於2021-12-17
Dart瀏覽器Web

簡介

web客戶端和伺服器端通訊有兩種方式，一種是使用HTTP請求，從伺服器端請求資料。這種請求的缺點就是隻能客戶端拉取伺服器端的資料，只能進行輪詢。

另外一種方式是使用WebSocket，在客戶端和伺服器端之間建立通道，這樣伺服器就可以直接向客戶端推送訊息，避免了客戶端頻繁的拉取伺服器端的資料，造成伺服器端的壓力。

dart:html包中就包含了WebSockets的相關操作，一起來看看吧。

dart:html中的WebSockets

WebSocket使用的是ws和wss作為URI的標記符。其中ws表示的是websocket，而wss表示的是WebSocket Secure。

WebSocket可以分為客戶端和伺服器端兩部分。dart:html中提供的WebSocket物件中包含的是客戶端的邏輯。

我們先看下WebSocket類的定義：

@SupportedBrowser(SupportedBrowser.CHROME)
@SupportedBrowser(SupportedBrowser.FIREFOX)
@SupportedBrowser(SupportedBrowser.IE, '10')
@SupportedBrowser(SupportedBrowser.SAFARI)
@Unstable()
@Native("WebSocket")
class WebSocket extends EventTarget

可以看到它繼承自EventTarget，並且支援chrome、firfox、IE10和Safari這幾種瀏覽器。

建立一個WebSocket

WebSocket有兩種建立方式，第一種是帶protocal，一種是不帶protocal:

  factory WebSocket(String url, [Object? protocols]) {
    if (protocols != null) {
      return WebSocket._create_1(url, protocols);
    }
    return WebSocket._create_2(url);
  }

這裡的protocols指的是在webSocket協議框架之下的子協議，它表示的是訊息的格式，比如使用soap或者wamp。

子協議是在WebSocket協議基礎上發展出來的協議，主要用於具體的場景的處理，它是是在WebSocket協議之上，建立的更加嚴格的規範。

我們看一個最簡單的建立WebSocket的程式碼：

 var webSocket = new WebSocket('ws://127.0.0.1:1337/ws');

以上如果伺服器存在的話，就會成功建立一個WebSocket的連線。

WebSocket的狀態

WebSocket有四個狀態，分別是closed, closing, connecting和open,都是以static來定義的，可以直接引用：

  static const int CLOSED = 3;

  static const int CLOSING = 2;

  static const int CONNECTING = 0;

  static const int OPEN = 1;

傳送訊息

dart中的WebSocket定義了5中傳送訊息的方法：

  void send(data) native;

  void sendBlob(Blob data) native;

  void sendByteBuffer(ByteBuffer data) native;

  void sendString(String data) native;

  void sendTypedData(TypedData data) native;

WebSocket支援傳送[Blob], [ByteBuffer], [String] 或者 [TypedData] 這四種資料型別。

如果直接使用send(data)，則會根據data的具體型別選擇不同的傳送方法。

所以我們可以這樣來傳送資料：

 if (webSocket != null && webSocket.readyState == WebSocket.OPEN) {
        webSocket.send(data);
      } else {
        print('webSocket連線異常!');
      }

處理WebSocket事件

dart中的WebSocket客戶端可以處理WebSocket中的各種事件，webSocket中定義了4種事件，如下所示：

  Stream<CloseEvent> get onClose => closeEvent.forTarget(this);

  Stream<Event> get onError => errorEvent.forTarget(this);

  Stream<MessageEvent> get onMessage => messageEvent.forTarget(this);

  Stream<Event> get onOpen => openEvent.forTarget(this);

onOpen處理的是建立連線事件，onClose處理的是關閉連線事件，onMessage處理的是接收訊息事件，onError處理的是異常處理事件。

舉個訊息處理的例子：

 webSocket.onMessage.listen((MessageEvent e) {
        receivedData(e.data);
      });

總結

WebSocket是一種非常方便和實時的客戶端和伺服器端的通訊方式，大家可以多嘗試使用。

本文已收錄於 http://www.flydean.com/22-dart-websockets/

最通俗的解讀，最深刻的乾貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！

歡迎關注我的公眾號:「程式那些事」,懂技術，更懂你！

相關文章