dart系列之:实时通讯,在浏览器中使用WebSockets
文章目录
- 简介
- 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 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/
最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!
欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!
dart系列之:实时通讯,在浏览器中使用WebSockets相关推荐
- 骥远自动化PROFINET转CANopen网关与台达变流器实时通讯在风电中的运用
1 摘要 风能作为一种清洁的可再生能源,越来越受到世界各国的重视,我国风能资源丰富,近几年国家政策也大力扶持风电产业.在风电领域中,变流器的应用非常广泛,提供CANopen接口,用户客通过这些接口方便 ...
- vue系列之----项目在ie浏览器中空白
具体现象 使用vue-cli脚手架搭建的项目,[npm run dev]运行,在chrome下正常显示,ie下显示空白. 问题原因 IE9-IE11 不兼容ES6语法,promise语法 问题解决 1 ...
- AV1编码器的优化及其在流媒体和实时通讯中的应用
点击上方"LiveVideoStack"关注我们 ▲扫描图中二维码或点击阅读原文▲ 了解音视频技术大会更多信息 编者按:AV1视频压缩格式是由开放多媒体联盟 (AOMedia)开 ...
- 可以在浏览器中在线编辑office文件的扩展程序汇总
2017年chrome插件推荐八期:可以在浏览器中在线编辑office文件的扩展程序汇总 Chrome插件推荐 2018-02-28 11:37 微软的Office应用软件是目前办公软件中使用 ...
- dart系列之:浏览器中的舞者,用dart发送HTTP请求
文章目录 简介 发送GET请求 发送post请求 更加通用的操作 总结 简介 dart:html包为dart提供了构建浏览器客户端的一些必须的组件,之前我们提到了HTML和DOM的操作,除了这些之外, ...
- 用TensorFlow.js在浏览器中进行实时语义分割 | MixLab算法系列
语义分割是监测和描绘图像中每个感兴趣对象的问题 当前,有几种方法可以解决此问题并输出结果 如下图示: 语义分割示例 这种分割是对图像中的每个像素进行预测,也称为密集预测. 十分重要且要注意的是,同一类 ...
- video标签支持获取rtsp流么_Flask教程(二十二)在浏览器中播放rtsp实时流
软硬件环境 windows 10 64bit anaconda3 with python 3.7 pycharm 2020.1.2 flask 1.1.2 opencv 4.4.0 前言 当下,网络摄 ...
- dart系列之:dart语言中的特殊操作符
dart系列之:dart语言中的特殊操作符 文章目录 简介 普通操作符 类型测试操作符 条件运算符 级联符号 类中的自定义操作符 总结 简介 有运算就有操作符,dart中除了普通的算术运算的操作符之外 ...
- 行业分析| OA系统中的实时通讯
前言 当前实时通讯市场中有QQ.MSN.网络电话以及视频会议等,同时也有各个互联网巨头推出的基于自身平台的实时通讯工具,比如,百度hi,淘宝旺旺等,相对而言其与纯粹的实时通讯工具不同,基于自身平台的实 ...
最新文章
- Oracle weblogic线程Thread status分类和总结
- 洛谷:P1901 发射站
- JavaEE Servlet 并发问题
- 深度学习(二十七)可视化理解卷积神经网络(反池化 pooling unpooling)
- PHP用CURL伪造IP和来源
- 【hadoop】1.简介
- [Java] 蓝桥杯ADV-176 算法提高 陶陶摘苹果
- C# WCF快速开发框架 | 原创作品
- 工作笔记——海康威视网络摄像头接入华为云VIS服务
- FLUENT算例 —— Turbulent Pipe Flow (LES) 圆管湍流流动(大涡模拟)
- python function terminated un_python僵尸进程产生的原因
- Vue 中英文切换设置
- python用表格中的数据画柱状图_[python]统计excel表格某列中每项出现的次数并画柱状图...
- 5个球放入3个箱子_排列组合问题,把5个相同的球放到三个相同的盒子里,要求每个盒子都有球,则不同的放球方法是多少?...
- 美容院的会员等级怎么设置?
- c#创建word 表格垂直居中
- MATLAB前馈神经网络newff
- 享誉全球的 Java 经典著作《Java核心技术》
- 根据文件模板实现预览、生成word、pdf、excel(后端-项目)
- 在麦加总督的支持赞助下,朝觐博览会定于2023年1月举行