简介

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/

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

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