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

簡介

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/

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

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