聊一聊Web端的即时通讯
聊一聊Web端的即时通讯
Web端实现即时通讯的方法有哪些?
- | 短轮询 | 长轮询 | iframe流 | Flash Socket |
---|---|---|---|---|
轮询 | 客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。 | 客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求 | 页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求,服务器端就能源源不断地往客户端输入数据 | 页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信 |
优点 | 后端程序编写比较容易。 | 在无消息的情况下不会频繁的请求,耗费资源小 | 浏览器兼容好 | 实现真正的即时通信,而不是伪即时。消息即时到达,不发无用请求 |
缺点 | 浪费带宽和服务器资源。 | 服务器维护一个长连接会增加开销 | IE、Mozilla Firefox会显示加载没有完成,图标会不停旋转。服务器维护一个长连接会增加开销。 | 客户端必须安装Flash插件;非HTTP协议,无法自动穿越防火墙 |
实例 | 适于小型应用。 | WebQQ、Hi网页版、Facebook IM。 | Gmail聊天 | 网络互动游戏 |
iframe流
前端实现步骤:
- Iframe设置为不显示。
- src设为请求的数据地址。
- 定义个父级函数用户让iframe子页面调用传数据给父页面。
- 定义onload事件,服务器timeout后再次重新加载iframe。
后端输出内容:
当有新消息时服务端会向iframe中输入一段js代码.:
println("<script>父级函数('" + 数据 +"<br>')</script>”);
用于调用父级函数传数据。
Websocket VS SSE
websocket介绍
- WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
- 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
websocket 兼容性
websocket 相关应用
- 社交聊天
- 弹幕
- 多屏互动
- 多玩家游戏
- 协同编辑
- 股票基金实时报价
- 体育实况更新
- 视频会议/聊天
- 在线教育
- 智能家居等需要高实时的场景
- webpack-dev-server
- 等等...
主要的类库
- socket.io(https://github.com/socketio/s...
- ws(https://github.com/websockets...
以socket.io为例子
服务端
var app = require('koa')();
var server = require('http').createServer(app.callback());
var io = require('socket.io')(server);
io.on('connection', function(){
// listen to the event
socket.on('eventB', function(){ /* */ });
// emit an event to the socket
socket.emit('eventA', /* */);
});
server.listen(3000);
前端
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>var socket = new io()socket.on('eventA', function (res) {console.log('⽤户1接收到信息了了')})socket.emit('eventB', data)
</script>
自己实现的一个demo,算是简易版的你画我猜
地址在这(https://github.com/jamielhf/n...
SSE(Server-Sent Events)介绍
HTTP 协议无法做到服务器主动推送信息。但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming)。
也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。这时,客户端不会关闭连接,会一直等着服务器发过来的新的数据流,视频播放就是这样的例子。本质上,这种通信就是以流信息的方式,完成一次用时很长的下载。
SSE 兼容性
SSE 实现
客户端
if(typeof(EventSource)!=="undefined"){var source=new EventSource("http://localhost:3001/stream");// onopen onerrorsource.onmessage=function(event){document.getElementById("result").innerHTML+=event.data + "<br>";};}else{document.getElementById("result").innerHTML="抱歉,你的浏览器不支持 server-sent 事件...";}
服务端
var http = require("http");http.createServer(function (req, res) {var fileName = "." + req.url;if (fileName === "./stream") {res.writeHead(200, {"Content-Type":"text/event-stream","Cache-Control":"no-cache","Connection":"keep-alive","Access-Control-Allow-Origin": '*',});res.write("data: " + (new Date()) + "\n\n");interval = setInterval(function () {res.write("data: " + (new Date()) + "\n\n");}, 1000);req.connection.addListener("close", function () {clearInterval(interval);}, false);}
}).listen(3001, "127.0.0.1");
对比
Websocket | SSE(Server-Sent Events) | |
---|---|---|
通讯方式 | 基于TCP长连接通讯 | http |
优点 | 全双工通讯协议,性能开销小、安全性高,有一定可扩展性 | 实现简便,开发成本低,默认支持断线重连 |
缺点 | 传输数据需要进行二次解析,增加开发成本及难度 | 浏览器兼容问题,单向 |
原文地址
参考文章&资料
看完让你彻底搞懂Websocket原理
https://www.zhihu.com/questio...
Server-Sent Events 教程
聊一聊Web端的即时通讯相关推荐
- websocket 发送图片_基于WebSocket的web端IM即时通讯应用的开发
基于WebSocket的web端IM即时通讯应用的开发 功能列表: 1.Web端的IM即时通讯应用 2.支持上线.下线.实时在线提醒 3.单聊.群聊的建立 4.普通文字.表情.图片的传输(子定义富文本 ...
- Socket.IO介绍:支持WebSocket、用于WEB端的即时通讯的框架
一.基本介绍 WebSocket是HTML5的一种新通信协议,它实现了浏览器与服务器之间的双向通讯.而Socket.IO是一个完全由JavaScript实现.基于Node.js.支持WebSocket ...
- 分享一种Android端IM即时通讯智能心跳算法
对于IM或实时消息推送技术来说,客户端的心跳算法几乎是必备品,尤其当前复杂的移动网络环境下,网络心跳保活算法的优劣更是决定了您的APP即时数据收发的实时性和用户体验,非常地关键. 为什么TCP连接需要 ...
- 融云PC端javascript即时通讯简单案例
进入页面引入:二选一 <script src="http://cdn.ronghub.com/RongIMLib-2.1.3.min.js"></script&g ...
- 基于SpringBoot开发的Java web在线聊天系统,即时通讯通信系统,基于IDEA开发
目录 简介 主要实现的功能有: 主要功能截图 温馨提示 简介 今天发布的是一款由Springboot+MySQL+SSM实现的Java web在线聊天系统,适合大家在网上聊天,加好友等操作,极大的方便 ...
- android 即时通讯 xmpp,基于xmpp实现android端实现即时通讯
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 简单介绍一下asmack中常用到的方法属性 connection.getAccountManager().createA ...
- 基于环信接口,开发Web版的即时通讯
最近做项目时需要实现在线聊天的功能,所以借助环信的平台来快速开发 集成环信的主要步骤 1 注册开发者账号 2 服务器端的集成 3 客户端集成 环信WebIM的demo 点击下载 在运行demo的时候需 ...
- Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE
摘要 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯 方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server- ...
- 新手入门:史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
最新文章
- R语言构建文本分类模型并使用LIME进行模型解释实战:文本数据预处理、构建词袋模型、构建xgboost文本分类模型、基于文本训练数据以及模型构建LIME解释器解释多个测试语料的预测结果并可视化
- WAV文件中使用有符合整形数
- 结构控制Switch Case
- 本地数据源:使用firebird数据库
- mysql超级_Mysql 超级快速入门
- lambdas 排序_Java8 Lambdas:解释性能缺陷的排序
- Android Studio 插件
- 全球最大的市场在_我如何扩展全球最大的音乐工作室市场
- php查找二维数组值,根据二维数组某个字段的值查找数组
- CSS 标签左右分布的多种方法
- JS动态添加Html
- 基于深度学习的单视图三维重建算法学习路线
- Apache域名跳转----配置rewrite模块
- 中国十大基金公司排行榜
- 汉语拼音大全(竖排版)
- UE4中的玩家类UPlayer、ULocalPlayer 和 UNetConnection
- 爱春秋-在线挑战-综合渗透训练全部详解(更新中)
- C语言数组实现丢手绢问题(约瑟夫问题)
- 南大科院Java工程实训
- H323、H248(MGCP)、SIP三协议浅析