为了账号安全,请及时绑定邮箱和手机立即绑定

聊一聊Web端的即时通讯

标签:
Html/CSS

聊一聊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聊天网络互动游戏

长连接

https://img1.sycdn.imooc.com//5d2d6f7c0001053a07180491.jpg

image

iframe流

前端实现步骤:

  • Iframe设置为不显示。

  • src设为请求的数据地址。

  • 定义个父级函数用户让iframe子页面调用传数据给父页面。

  • 定义事件,服务器timeout后再次重新加载iframe。

后端输出内容:

当有新消息时服务端会向iframe中输入一段js代码.:

println("<script>父级函数('" + 数据 +"<br>')</script>”);

用于调用父级函数传数据。

Websocket VS SSE

websocket介绍


  • WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

  • 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

websocket 兼容性

https://img1.sycdn.imooc.com//5d2d6f820001efe907140386.jpg

image

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 eventsocket.on('eventB', function(){ /* */ });// emit an event to the socketsocket.emit('eventA', /* */);
});
server.listen(3000);

前端

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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)

https://img1.sycdn.imooc.com//5d2d6f89000195e006020561.jpg

image

SSE(Server-Sent Events)介绍


HTTP 协议无法做到服务器主动推送信息。但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming)。

也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。这时,客户端不会关闭连接,会一直等着服务器发过来的新的数据流,视频播放就是这样的例子。本质上,这种通信就是以流信息的方式,完成一次用时很长的下载。

SSE 兼容性

https://img1.sycdn.imooc.com//5d2d6f9e0001927007130345.jpg

image

SSE 实现

客户端

    
    if(typeof(EventSource)!=="undefined")
    {        var source=new EventSource("http://localhost:3001/stream");        // onopen 

        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");

对比


WebsocketSSE(Server-Sent Events)
通讯方式基于TCP长连接通讯http
优点全双工通讯协议,性能开销小、安全性高,有一定可扩展性实现简便,开发成本低,默认支持断线重连
缺点传输数据需要进行二次解析,增加开发成本及难度浏览器兼容问题,单向



作者:WS林海峰
链接:https://www.jianshu.com/p/9dd7c99f12b1


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 2
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消