Los eventos enviados por el servidor (SSE) son los eventos que se utilizan para actualizar el sitio web o las páginas web automáticamente. Las páginas web son actualizadas por el servidor sin ninguna aprobación por parte del usuario. Las actualizaciones de cualquier sitio web vienen a través de conexiones HTTP. Esta forma de comunicación de actualización de la página web por parte de un servidor al lado del cliente se conoce como mensajería unidireccional o monodireccional. Los eventos enviados por el servidor son parte de las API web.
En este artículo, conoceremos los eventos enviados por el servidor, cómo funcionan y ejemplos que usan HTML5.
Verifique el soporte del navegador para SSE: antes de implementar el SSE, es necesario verificar el soporte del navegador. Para verificar el soporte, usaremos una declaración if y else y ejecutaremos el siguiente código usando el objeto EventSource. El objeto EventSource se utiliza para recibir los eventos o notificaciones del servidor. A continuación se muestra la sintaxis del objeto.
Sintaxis:
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("gfg-file.php");
source.onmessage = function(event) {
document.getElementById("yourResult")
.innerHTML += event.data + "<br>";
}
}
Ahora que conocemos el objeto EventSource, es hora de comprobar la compatibilidad del navegador con SSE. Use una etiqueta <script> de javascript para ejecutar el código de verificación del soporte del navegador.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<div id="gfg"></div>
<script type="text/javascript">
if (typeof EventSource !== "undefined") {
alert("Congrats Geek! The browser is supporting SSE.");
} else {
alert("Sorry Geek! The browser is not supporting SSE.");
}
</script>
</body>
</html>
Ahora, una vez que se ejecuta la instrucción if , si el navegador muestra el objeto EventSource, el usuario verá el siguiente resultado y, de lo contrario, mostrará otra parte de la instrucción.
Producción:
Envío automático de eventos desde el servidor: ahora, para enviar la notificación o los eventos desde el servidor, se necesita un servidor que sea capaz de enviar los eventos a los clientes. Para la demostración, crearemos un archivo ASP para tal fin. A continuación se muestra el archivo ASP para el ejemplo:
// gfg_demo.asp
// code starts from here
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Current Server time: " & now())
Response.Flush()
%>
En el código ASP anterior, según el estándar SSE, la respuesta de ContentType se establece en «text/event-stream» y la salida de datos se enviará comenzando siempre con datos. El método de respuesta Flush() enviará el evento de datos a la página web del usuario.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>GFG getting Server-Sent Events </h2>
<div id="output"></div>
<script>
// Started if statement
if (typeof EventSource !== "undefined") {
// Created event source
var gfgSource = new EventSource("gfg_demo.asp");
gfgSource.onmessage = function (event) {
// Output is shown here
document.getElementById("output")
.innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML =
// If browser does not support SSE
"Sorry Geek, The browser does not support SSE";
}
</script>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA