Home > Article > Web Front-end > Implementation steps of the server actively sending data back to the client in H5

Implementation steps of the server actively sending data back to the client in H5

php中世界最好的语言Original: 2017-12-04 10:28:052316browse

We know that in Server Sent Event, there are three events to receive notifications of events sent by the server through the EventSource object, message, open, and error. Today I will show you how the server actively sends data back to the client. Implementation steps in H5.

Server Sent Event

Server Sent Event receives notifications of events sent by the server through the EventSource object. There are three events message, open, error

The following code demonstrates the method used

Example code running environment: node.js

Code

Paste the following code to run node index.js

//index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>server-sent</title>
</head>
<body>
  <script>
    window.addEventListener("load",function () {
      let status = document.getElementById("status");
      let output = document.getElementById("output");
      let source;
 
      function connect() {
        source = new EventSource("stream");//与服务器端建立连接
        //鉴定message事件, 获取服务端发送的数据
        source.addEventListener("message", function (event) {
          output.textContent = event.data;
        }, false);
        //监听open事件, 判断连接是否进行中
        source,addEventListener("open", function (event) {
          status.textContent = &#39;连接打开了&#39;;
        },false);
        //监听error事件, 处理连接错误的情况
        source.addEventListener("error", function (event) {
          if (event.target.readyState === EventSource.CLOSED) {
            source.close();
            status.textContent = &#39;连接关闭了&#39;;
          } else {
            status.textContent = "连接关闭了!未知错误!";
          }
        }, false);
      }
      if(!!window.EventSource) {
        connect();
      } else {
        status.textContent = "不支持server-sent"
      }
    },false);
  </script>
  <span id="status">Connection closed!</span>
  <br>
  <span id="output"></span>
</body>
</html>

Server Code

//index.js
const http = require(&#39;http&#39;);
const fs = require(&#39;fs&#39;);
http.createServer(function (req, res) {
  let interval,
      fileName,
      index = "./index.html";
  console.log(req.url);
  if(req.url === "/") {
    fileName = index;
  } else {
    fileName = "." + req.url;
  }
 
  if (fileName === "./stream") {//如果server sent event则设置相应头信息
    res.writeHead(200, {
      "Content-Type" : "text/event-stream",
      "Cache-Control" : "no-cache",
      "Connection": "keep-alive",
    })
    res.write("retry: 10000\n");//过10000秒重试
    res.write("data: " + (new Date()) + "\n\n");
    interval = setInterval(function () {
      res.write("data: " + (new Date()) + "\n\n");
    }, 1000);
    //监听close事件, 用于停止定时器
    req.connection.addListener("close", function () {
      clearInterval(interval);
    }, false);
  } else if (fileName === index) {
    //判断是否为页面请求, 并找到相应文件返回页面
    fs.exists(fileName, function (exists) {
      if (exists) {
        fs.readFile(fileName, function (error, content) {
          if (error) {
            res.writeHead(500);
            res.end();
          } else {
            res.writeHead(200, {"Content-Type" : "text/html"});
            res.end(content, "utf-8");
          }
        })
      } else {
        console.log(123);
        res.writeHead(404);
        res.end();
      }
    })
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(8080, "127.0.0.1");
console.log("at 8080");

#I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Implementation steps of the server actively sending data back to the client in H5

Related articles