聊一聊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为例子

服务端

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 onerror source.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端的即时通讯的更多相关文章

  1. Socket.IO介绍:支持WebSocket、用于WEB端的即时通讯的框架

    一.基本介绍 WebSocket是HTML5的一种新通信协议,它实现了浏览器与服务器之间的双向通讯.而Socket.IO是一个完全由JavaScript实现.基于Node.js.支持WebSocket ...

  2. Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...

  3. 新手入门:史上最全Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  4. Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  5. web 端即时通讯

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...

  6. Web端即时通讯基础知识补课:一文搞懂跨域的所有问题!

    本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...

  7. web端及时通讯原理

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  8. Comet技术详解:基于HTTP长连接的Web端实时通信技术

    前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...

  9. 新一代开源即时通讯应用源码定制 运营级IM聊天源码

    公司介绍:我们是专业的IM服务提供商!哇呼Chat是一款包含android客户端/ios客户端/pc客户端/WEB客户端的即时通讯系统.本系统完全自主研发,服务器端源码直接部署在客户主机.非任何第三方 ...

随机推荐

  1. C#控制台窗口禁用关闭按钮

    1 public class Program 2 { 3 #region 禁用控制台黑窗口的关闭按钮 part1 4 5 private const int MF_BYCOMMAND = 0x0000 ...

  2. PHP高并发商城秒杀

    1.什么是秒杀 秒杀活动是一些购物平台推出的集中人气的活动,一般商品数量很少,价格很便宜,限定开始购买的时间,会在以秒为单位的时间内被购买一空.比如原价千元甚至万元的商品以一元的价格出售,但数量只有一 ...

  3. 5. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 接口以及场景压测

    目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...

  4. 禁用 Windows 共享服务,释放 445 端口

    禁用 Windows 共享服务,释放 445 端口 转载自:https://blog.csdn.net/liu857279611/article/details/71786068   在 Window ...

  5. 『现学现忘』Docker基础 — 27、Docker镜像的commit操作

    目录 1.commit命令作用 2.commit命令说明 3.示例演示 1.commit命令作用 在运行的容器中,并在镜像的基础上做了一些修改,我们希望保存起来,封装成一个新的镜像,方便我们以后使用, ...

  6. 移动IP通信过程

    看了点资料,沿着自己的思路来整理一下计算机网络部分移动IP通信遇到的问题以及是怎样解决的.如有错误,欢迎纠正! 遇到问题,然后解决问题. 沿着这样一个思路我们可以看看移动IP通信和传统的网络通信有什么 ...

  7. CentOS Stream 8 安装 Zabbix6.0 -- LNMP环境(nginx-1.20,mariadb-10.6,php-7.4)

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 zabbix6.0 LTS版本出来了,前段时间刚安装了5.4,今天打算在虚拟机上安装6.0测试,安装6.0的要求php版本不低于7.2,mariad ...

  8. 6月20日 Django中ORM介绍和字段、字段参数、相关操作

    一.Django中ORM介绍和字段及字段参数 二.Django ORM 常用字段和参数 三.Django ORM执行原生SQL.在Python脚本中调用Django环境.Django终端打印SQL语句 ...

  9. Ubuntu- 彻底干净卸载MySQL、Apache2、Php的方法

    一.卸载删除 mysql 1 sudo apt-get autoremove --purge mysql-server-5.0 2 sudo apt-get remove mysql-server 3 ...

  10. TetBrains产品快捷键大全

     快捷键大全