Étapes de mise en œuvre du serveur renvoyant activement les données au client en H5-tutoriel HTML-php.cn

Étapes de mise en œuvre du serveur renvoyant activement les données au client en H5

php中世界最好的语言

Libérer： 2017-12-04 10:28:05

original

2363 Les gens l'ont consulté

Nous savons que dans Server Sent Event, il existe trois événements pour recevoir des notifications d'événements envoyés par le serveur via l'objet EventSource, le message, l'ouverture et l'erreur. Aujourd'hui, je vais vous montrer comment le serveur renvoie activement des données au serveur. client. Étapes de mise en œuvre en H5.

Événement envoyé par le serveur

L'événement envoyé par le serveur reçoit les notifications des événements envoyés par le serveur via l'objet EventSource. Il existe trois événements : message, ouverture, erreur

Le code suivant. montre la méthode utilisée

Exemple d'environnement d'exécution de code : node.js

Code

Collez le code suivant pour exécuter 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>

Copier après la connexion

Code côté serveur

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site Web PHP chinois !

Lecture connexe :

Introduction détaillée aux règles d'imbrication des balises HTML5

Problèmes de compatibilité du navigateur avec HTML5 et CSS3

Tutoriel HTML5 sur la création d'un effet pierre-papier-ciseaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!