笔记大全

HTML Server Sent 事件

更新时间：2023-10-15

什么是HTML Server Sent事件？

HTML Server Sent事件是一种Web API，它提供了一种从服务器向客户端发送数据的方法。这些事件是一种单向（只能由服务器发送到客户端），实时的并且基于HTTP协议的通讯方式。

通过上面的代码，我们可以发现，EventSource用来在客户端和服务端之间建立一个持久化连接，并实现实时通讯。当有新数据到达时，服务器会通过该连接向客户端发送事件，并由onmessage方法来接收。可以看出，HTML Server Sent事件是一个轻量级、高效的通信机制。

如何创建HTML Server Sent事件？

使用HTML Server Sent事件的前提条件是，需要在服务器端创建一个实现了Server-Sent-Events的页面，这个页面可以发送SSE事件到客户端。在这个页面中会设置一些SSE事件的属性和数据，比如事件名称、数据等。

    let content = new Blob([data], {
        type: 'text/plain'
    });
    const sse = new EventSource('/streaming');
    sse.onopen = function () { };
    sse.onerror = function (evt) { };

    sse.addEventListener('ping', function (event) {
        if (!event.data) {
            return;
        }
        console.log('ping!');
        let p = document.createElement('p');
        p.innerHTML = 'ping!';
        document.body.appendChild(p);
    })

如上所示，在实现HTML Server Sent事件时，需要将数据和事件的名称封装成一个Blob对象并返回给客户端。EventSource的onopen方法指示了连接已经建立，而onerror方法用于处理任何连接错误。在这个事件监听器中，我们监听了一个名为'ping'的事件，并根据接收到的事件数据作出相应的反应。

HTML Server Sent事件和Websocket的区别？

HTML Server Sent事件和Websocket都是一种实现实时通讯的机制，但它们有着不同的实现方式和使用场景。

//Websocket实现
var ws = new WebSocket("ws://localhost:8888/echo");
ws.onmessage = function(event) {
    console.log("Received: " + event.data);
};

Websocket是基于全双工通信协议，提供了一种持久化连接的方式，且通讯过程中可以双向传输数据。它通常用于需要频繁双向通讯的场景，比如在线游戏、即时通讯等应用。

而HTML Server Sent事件则适合用于客户端只需要接收服务端的数据、服务端可以单向发送数据的场景，比如实时更新新闻、股票信息等。

HTML Server Sent事件的优劣势？

HTML Server Sent事件主要优势在于实现起来相对简单、易于维护，而且可以在浏览器和服务器之间建立一个持久化连接，实现实时通讯。

不过，HTML Server Sent事件也有着一些缺点。它只能由服务器端单方面发送数据给客户端，且每个事件只能包含一条消息。这意味着当需要在多个客户端之间实时广播消息时，HTML Server Sent事件无法满足需求。

在实际开发中，我们可以根据不同的应用场景选择合适的通讯机制。对于客户端只需要接收服务端数据的场景，HTML Server Sent事件是一种极为实用的实时通讯方式。

总结： HTML Server Sent事件是一种Web API，它提供了一种从服务器向客户端发送数据的方法。它是一种单向、实时、基于HTTP协议的通讯方式，通过EventSource建立持久化连接。创建HTML Server Sent事件需要在服务器端实现Server-Sent-Events页面，并设置事件名称、数据等属性。HTML Server Sent事件适合用于客户端只需要接收服务端数据的场景，比如实时更新新闻、股票信息等。在实际开发中，我们可以根据不同的应用场景选择合适的通讯机制。

c语言编程笔录