聊一聊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()) + "
");
interval = setInterval(function () {
res.write("data: " + (new Date()) + "
");
}, 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 教程