文章目錄
- 簡介
- dart:html中的WebSockets
- 創建一個WebSocket
- WebSocket的狀態
- 發送訊息
- 處理WebSocket事件
- 總結
簡介
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 one rror => 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/
最通俗的解讀，最深刻的干貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！
歡迎關注我的公眾號:「程式那些事」,懂技術，更懂你！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/384192.html
標籤：其他