常见的Web实时消息交互方式和SignalR

发布时间:2017-09-03 13:33:19
常见的Web实时消息交互方式和SignalR

1. Web消息交互技术

1.1 常见技术

1.2 WebSocket介绍

1.3 WebSocket示例 2. Signal

2.1 SignalR是什么

2.2 默认传输方式

2.3 指定传输方式

2.4 自动管理传输方式

2.5 通信模型

2.6 SignalR示例(永久连接和Hubs(略))

(1)安装Nuget包

(2)增加SignalR服务

(3)增加Startup启动类

(3)前端js配置

(4)实际效果

(5).Net Client实现 3. 总结 4. 参考资料

前言

最近因为项目中涉及到了实时数据的传输,特地去了解了一下当前Web应用中常见的实时交互手段,当然一开始也不仅限于Web客户端。从c#自带的Socket类,到Html5中的WebSocket,再到Asp .Net利器SignalR,总算将这块知识点及应用入门了,当然今天的主要内容还是Web端的消息交互技术(Ajax,Comet,WebSocket等),这些技术难度有中有低,应用场所也有不同,最后我们要根据项目情况来选择恰当的技术。接下来便简单介绍一下

1. Web消息交互技术 1.1 常见技术 应用技术 说明 优缺点 轮询(polling) 这应该是最常见的一种实现数据交互的方式,开发人员控制客户端以一定时间间隔中向服务器发送Ajax查询请求大,但是也因此,当服务器端内容并没有显著变化时,这种连接方式将带来很多无效的请求,造成服务器资源损耗。适合并发量小,实时性要求低的应用模型,更像是定时任务。 优点:实现最为简单,配置简单,出错几率小

缺点:每次都是一次完整的http请求,易延迟,有效请求命中率少,并发较大时,服务器资源损耗大 长轮询(long polling) 长轮询是对轮询的改进,客户端通过请求连接到服务器,并保持一段时间的连接状态,直到消息更新或超时才返回Response并中止连接,可以有效减少无效请求的次数。属于Comet实现 优点:有效减少无效连接,实时性较高

缺点:客户端和服务器端保持连接造成资源浪费,服务器端信息更新频繁时,long polling并不比polling高效,并且当数据量很大时,会造成连续的polls不断产生,性能上反而更糟糕 iframe流 iframe流方式是在页面中插入一个隐藏的iframe,利用其src属性在服务器和客户端之间创建一条长链接,服务器向iframe传输数据(通常是HTML,内有负责插入信息的javascript),来实时更新页面。属于Comet实现 优点:实时性高,浏览器兼容度好

缺点:客户端和服务器端保持长连接造成资源浪费 WebSocket WebSocket是HTML5提供的一种在单个 TCP 连接上进行全双工通讯的协议,目前chrome、Firefox、Opera、Safari等主流版本均支持,Internet Explorer从10开始支持。另外因为WebSocket 提供浏览器一个原生的 socket实现,所以直接解決了 Comet 架构很容易出错的问题,而在整個架构的复杂度上也比传统的实现简单得多。 优点:服务器与客户端之间交换的数据包档头很小,节约带宽。全双工通信,服务器可以主动传送数据给客户端。

缺点:旧版浏览器不支持

Tips:浏览器和客户端之间想要进行WebSocket通信的话,从一开始的握手阶段,就要从HTTP协议升级为WebSocket协议,这是服务器根据WebSocket发送的请求包决定的。关于WebSocket的具体介绍(规范和语法和状态转换)可以参考使用 HTML5 WebSocket 构建实时 Web 应用.

1.2 WebSocket介绍

WebSocket本质上是一个基于TCP的持久化协议,相对于HTTP这种非持久的协议来说,它能够更好的节省服务器资源和带宽,并且真正实现实时通信。以下是它与传统技术的性能对比图(Websocket.org提供)

常见的Web实时消息交互方式和SignalR


常见的Web实时消息交互方式和SignalR


我们可以看到相比于传统技术,在流量和负载逐渐增大时,WebSocket的性能表现是远远超过它们的。
上文提到WebSocket在实际运用时是在握手阶段从http请求升级上来的,让我们来看一个Websocket请求的例子——这里借用下维基百科的内容

1.客户端到服务器端 GET / HTTP/1.1 Upgrade: websocket Connection: Upgrade Host: example.com Origin: null Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ== Sec-WebSocket-Version: 13 2.服务器端到客户端 HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s= Sec-WebSocket-Origin: null Sec-WebSocket-Location: ws://example.com/

注意“1.”中的UpGrade:websocket和Connection: Upgrade这两个核心属性表示本次是一个特殊的http请求,目的就是要将浏览器端和服务器端的通讯协议从HTTP协议—升级—>WebSocket协议,其他属性都是客户端向服务器端提供的握手信息。
Sec-WebSocket-Version: 13代表这是13版修订协议,Sec-WebSocket-Key是随机生成的,服务器端会把Sec-WebSocket-Key加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密,之后进行BASE-64编码,将结果做为Sec-WebSocket-Accept头的值,返回给客户端,表明服务器端同意创建Websocket请求。

1.3 WebSocket示例

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:荆州SEO http://jingzhou.raoyu.net