聊一聊Web端的即时通讯

Web端实现即时通讯的方法有哪些?

长连接

image

iframe流

前端实现步骤：

• Iframe设置为不显示。

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

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

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

后端输出内容：

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

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

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

Websocket VS SSE

websocket介绍

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

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

websocket 兼容性

image

websocket 相关应用

• 社交聊天

• 弹幕

• 多屏互动

• 多玩家游戏

• 协同编辑

• 股票基金实时报价

• 体育实况更新

• 视频会议/聊天

• 在线教育

• 智能家居等需要高实时的场景

• webpack-dev-server

• 等等...

主要的类库

• socket.io(https://github.com/socketio/socket.io)

• ws(

  前端

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

  

  image

  SSE(Server-Sent Events)介绍

  ---

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

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

  SSE 兼容性

  

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

  对比

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

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