Heim >Web-Frontend >HTML-Tutorial >Implementierungsschritte des Servers, der in H5 aktiv Daten an den Client zurücksendet
Implementierungsschritte des Servers, der in H5 aktiv Daten an den Client zurücksendet
- php中世界最好的语言Original
- 2017-12-04 10:28:052362Durchsuche
Wir wissen, dass es in „Server Sent Event“ drei Ereignisse gibt, um Benachrichtigungen über Ereignisse zu erhalten, die vom Server über das EventSource-Objekt gesendet werden: Nachricht, Öffnung und Fehler. Heute zeige ich Ihnen, wie der Server aktiv Daten an den Server zurücksendet Client. Implementierungsschritte in H5.
Vom Server gesendetes Ereignis
Vom Server gesendetes Ereignis empfängt Benachrichtigungen über Ereignisse, die vom Server über das EventSource-Objekt gesendet werden. Es gibt drei Ereignisse: Nachricht, offen, Fehler
Der folgende Code demonstriert die verwendete Methode
Beispielcode für die Ausführungsumgebung: node.js
Code
Fügen Sie den folgenden Code ein, um node index.js auszuführen
//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>Serverseitiger Code
//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");Ich glaube, dass Sie die Methode nach dem Lesen dieser Fälle beherrschen. Weitere spannende Informationen finden Sie unter Anderem Verwandte Artikel auf der chinesischen PHP-Website!
Verwandte Lektüre:
Detaillierte Einführung in die Verschachtelungsregeln für HTML5-Tags
Browserkompatibilitätsprobleme mit HTML5 und CSS3
HTML5-Tutorial zum Erstellen eines Stein-Papier-Schere-Effekts
Das obige ist der detaillierte Inhalt vonImplementierungsschritte des Servers, der in H5 aktiv Daten an den Client zurücksendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!