Maison > Article > interface Web > Étapes de mise en œuvre du serveur renvoyant activement les données au client en H5
Étapes de mise en œuvre du serveur renvoyant activement les données au client en H5
- php中世界最好的语言original
- 2017-12-04 10:28:052313parcourir
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 = '连接打开了';
},false);
//监听error事件, 处理连接错误的情况
source.addEventListener("error", function (event) {
if (event.target.readyState === EventSource.CLOSED) {
source.close();
status.textContent = '连接关闭了';
} 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>Code côté serveur
//index.js
const http = require('http');
const fs = require('fs');
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");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!