B/S(Web)实时通讯解决方案分享


Posted in Javascript onApril 06, 2017

B/S的实时通讯实现起来比较麻烦,因为http协议是无状态的,导致一些实时消息通知和聊天等功能比较难以实现,本文主要简述几种自己之前常用的几种方式。

1、传统的HTTP协议是无状态的

传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如 浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据,多个用户进行实时的交流也比较困难,比如聊天系统。

B/S(Web)实时通讯解决方案分享

2、目前比较流量的实时通讯方式

轮询

条件:任何Web端

客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。

长轮询

条件:任何Web端

客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。

Flash socket

条件:需要安装Flash插件

在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信,JavaScript在收到服务器端传送的信息后控制页面的显示。

Web Socket

条件:支持H5 Web socket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。

3、B/S 实时通讯轮询方式

3.1传统轮询

客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。

缺点:耗费资源,耗费流量 。根据用户窗口数量,请求次数成倍的增加。

B/S(Web)实时通讯解决方案分享

3.2 传统长轮询

客户端向服务器发送Ajax请求,服务器接到请求后hold住链接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。

由于浏览器同时只能有一定数量的链接同时hold,所有这种方式如果窗口打开多个,就会导致后面打开的窗口一直等待前面hold的链接。

B/S(Web)实时通讯解决方案分享

3.3传统长轮询+ActiveMq

ActiveMq的方式相比传统的查询数据库有一定的优势,这样减少了多次查询数据库的问题,效率也会有所提升。但是这种方式每个用户的每个窗口都会有个订阅和链接,这样导致ActiveMq服务器的链接数会随着用户的增加而增加,最后导致链接数沾满。

B/S(Web)实时通讯解决方案分享

4、ASP.NETSignalR

很明显轮询的方式并不是最好的解决方式,当然web socket是一种很好的实现方式,但是编程起来比较麻烦,由于lz是做.net开发,所以选择了ASP.NET SignalR。而且SignalR会兼容各种浏览器,如果浏览器支持web socket,则用web socket方式,如果不支持则用长轮询的方式实现。

ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。即你有信息了再来通知我,而不是我傻乎乎的每次跑来问你。

4.2 SignalR+数据库

这种方式解决了用户多个窗口不能收到消息的问题,而且数据库的刷新频率只会有一个线程刷新,并不会随着用户的增加而增加,从而大大的减小了数据库的刷新频率。

B/S(Web)实时通讯解决方案分享

4.3SignalR+ActiveMq(最终解决方式)

这种方式既解决了链接数的问题,也同时解决了用户多个窗口不能收到消息的问题,而且用了ActiveMq也不用去实时刷新数据库。

B/S(Web)实时通讯解决方案分享

结语

以上是lz在开发中应用的多种B/S实时通信的解决方案,望对各位有所帮助,本文原创,欢迎拍砖和推荐。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 #Javascript
ES6中的箭头函数实例详解
Apr 06 #Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 #Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 #Javascript
javascript中this用法实例详解
Apr 06 #Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 #Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 #Javascript
You might like
php目录管理函数小结
2008/09/10 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python利用线程实现多任务
2020/09/18 Python
python math模块的基本使用教程
2021/01/16 Python
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
类如何去实现接口
2013/12/19 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
优秀团队获奖感言
2014/02/19 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
技术合作协议书范本
2014/04/18 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
检讨书范文2000字
2015/01/28 职场文书
大学生求职意向书
2015/05/11 职场文书
校园安全主题班会
2015/08/12 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书