简介

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/

最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！

欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！