バックエンドデータプッシュ-EventSource

サーバ送信イベント(以下、SSEと略す)は、HTML 5仕様の1つの構成部分であり、サーバからクライアントへの一方向データ通信を実現することができる.SSEにより、クライアントはHTTP要求を繰り返し送信することなく、データ更新を自動的に取得することができる.接続が確立されると、イベントはクライアントに自動的にプッシュされます.サーバ側SSEは、イベントストリーム(Event Streams)の形式でイベントを生成し、プッシュする.イベントフローに対応するMIMEタイプは「text/event-stream」で、event、data、id、retryの4つのフィールドが含まれています.イベントはイベントタイプを表し、dataはメッセージ内容を表し、idはクライアントEventSourceオブジェクトの「last event ID string」内部属性を設定するために使用され、retryは再接続の時間を指定します.
Nodeコードの例:
先端部

var evtSource = new EventSource("http://localhost:3000");
let eventList = document.getElementsByTagName('body')[0]
// evtSource.onmessage = function(e) {
//     console.log(1111,e);
//     var newElement = document.createElement("li");
//     const eventList = document.getElementsByTagName('body')[0]
//     // console.log(eventList);
//     newElement.innerHTML = "message: " + e.data;
//     eventList.appendChild(newElement);
// }

evtSource.addEventListener("ping", function(e) {
    console.log(2222,e);    
    var newElement = document.createElement("li");
    let eventList = document.getElementsByTagName('body')[0]
    var obj = JSON.parse(e.data);
    newElement.innerHTML = "ping at " + obj.date;
    eventList.appendChild(newElement);
    
}, false);
  
evtSource.addEventListener("error",function(e){
    console.log("             :" + e.data);
});

//        ，    open  
evtSource.addEventListener("open",function(){
    console.log("        ");
 });

 //           load  
 evtSource.addEventListener("load",function(e){
     console.log("             :" + e.data);
 });

サービス側セクション

const http = require('http')

http.createServer((req, res) => {
    res.writeHead(200, {
        'Content-Type' : 'text/event-stream',
        'Access-Control-Allow-Origin':'*'
    })
    let i = 0;
    const timer = setInterval(()=>{
        const date = {date:new Date()}
        var content = 'event: ping
'+"data:"+JSON.stringify(date)+"" + "

";
        res.write(content);
    },1000)

    res.connection.on("close", function(){
        res.end();
        clearInterval(timer);
        console.log("Client closed connection. Aborting.");
        });

}).listen(3000)
console.log('server is run http://localhost:3000');

JAvaの例

protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        //      text/event-stream
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();

        //       :
        //data:Hello World
        //event:load
        //id:140312
        //   (/r/n)

        out.println("data:Hello World");
        out.println("event:load");
        out.println("id:140312");
        out.println();
        out.flush();
        out.close();
}

SSEはポーリングに比べてリアルタイム性が高く,使用方法も非常に簡便である.しかしながら、SSEはサーバからクライアントへの一方向のイベントプッシュのみをサポートし、これまでのMicrosoft Edgeを含むすべてのバージョンのIEはSSEをサポートしていない.IEと一部のモバイルブラウザを強制的にサポートする必要がある場合は、EventSource Polyfill(本質的にはポーリング)を試してみてください.
 
参考記事:
https://developer.mozilla.org/zh-CN/docs/Server-sent_events/Using_server-sent_events
 
転載先:https://www.cnblogs.com/yiyi17/p/11486125.html