聊一聊Web端的即时通讯

KevinYan 发布于2019-08-22 18:00 / 1142人阅读

摘要：聊一聊端的即时通讯端实现即时通讯的方法有哪些短轮询长轮询流轮询客户端定时向服务器发送请求，服务器接到请求后马上返回响应信息并关闭连接。介绍是开始提供的一种在单个连接上进行全双工通讯的协议。

聊一聊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("”);

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

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

前端

自己实现的一个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 + "
";
        };
    }
    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 教程

GPU云服务器云服务器聊一聊来聊一聊聊一聊去抖聊一聊java内存

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95395.html

[聊一聊系列]聊一聊前端模板与渲染那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...

UCloud 2019-08-19 18:45 评论0 收藏0
[聊一聊系列]聊一聊前端模板与渲染那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...

Yangder 2019-08-01 15:25 评论0 收藏0
[聊一聊系列]聊一聊前端模板与渲染那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...

褰辩话 2019-06-24 17:50 评论0 收藏0
[聊一聊系列]聊一聊WEB前端安全那些事儿

摘要：所以今天，就和大家一起聊一聊前端的安全那些事儿。我们就聊一聊前端工程师们需要注意的那些安全知识。殊不知，这不仅仅是违反了的标准而已，也同样会被黑客所利用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog... 随着互联网的发达，各种WEB应用也变得越来越复杂，满足了用户的各种需求...

AZmake 2019-06-21 16:29 评论0 收藏0