聊一聊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/socket.io)
• ws(https://github.com/websockets/ws)

以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/nodetest)

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/question/20215561/answer/40316953
Server-Sent Events 教程