简介

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/

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

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