dart系列之:实时通讯,在浏览器中使用WebSockets

简介: 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是一种非常方便和实时的客户端和服务器端的通信方式,大家可以多尝试使用。

相关文章
|
7月前
|
XML API 网络安全
【安卓】在安卓中使用HTTP协议的最佳实践
【安卓】在安卓中使用HTTP协议的最佳实践
160 4
|
8月前
|
存储 缓存 开发框架
Flutter的网络请求:使用Dart进行HTTP请求的技术详解
【4月更文挑战第26天】了解Flutter网络请求,本文详述使用Dart进行HTTP请求
|
XML JSON 数据格式
XmlRPC协议详解(一款不支持原生异步请求的协议)
XmlRPC是一种基于XML(eXtensible Markup Language)的远程过程调用协议。它使用简单的文本格式进行通信,将请求和响应数据封装在XML中,广泛应用于Web服务和分布式系统中。
325 0
|
Web App开发 网络协议 前端开发
【从零学习python 】86. 深入了解HTTP协议及其在浏览器和服务器通信中的作用
【从零学习python 】86. 深入了解HTTP协议及其在浏览器和服务器通信中的作用
134 0
|
编解码 移动开发 C++
初识http协议,简单实现浏览器和服务器通信
初识http协议,简单实现浏览器和服务器通信
899 0
|
Dart JavaScript Shell
在 Flutter 中发出 HTTP 请求的最佳库(2022 年
本文将向您介绍最好的开源软件包列表,这些软件包可以帮助我们在 Flutter 应用程序中发出 HTTP 请求。事不宜迟,让我们探索重要的事情。 Http Pub likes: 3910+ GitHub stars: 735+ License: BSD-3-Clause Written in: Dart Links: Pub page | GitHub repo | Official docs
1666 0
|
Web App开发 Android开发 iOS开发
哪些浏览器提供WebRTC支持?
哪些浏览器提供WebRTC支持?
|
Web App开发 缓存 前端开发
JavaScript扩展知识点 01、前后端交互与HTTP协议
JavaScript扩展知识点 01、前后端交互与HTTP协议
JavaScript扩展知识点 01、前后端交互与HTTP协议
|
Web App开发 网络协议 安全
前端通讯协议大比拼:WebSockets和HTTP
在实时应用程序中,毋庸置疑,需要在信息可用时立即从服务器获取信息。而且,从根本上说,经典的 HTTP 请求/响应模式无法胜任这项工作。因为服务器将保持沉默,无论是否有新数据,除非或直到消费者请求更新。
235 0
前端通讯协议大比拼:WebSockets和HTTP
网络编程中服务器端与浏览器的交互的问题
网络编程中服务器端与浏览器的交互的问题
111 0
网络编程中服务器端与浏览器的交互的问题