流式响应的java端和html端demo

import java.io.IOException;
import java.io.OutputStream;
import java.net.InetSocketAddress;
import com.sun.net.httpserver.*;
 
public class StreamingServer {
    public static void main(String[] args) throws IOException {
        HttpServer server = HttpServer.create(new InetSocketAddress(8000), 0);
 
        // 设置请求处理器
        server.createContext("/streaming", new StreamingHandler());
 
        // 启动服务器
        server.start();
        System.out.println("Server started on port 8000");
    }
 
    static class StreamingHandler implements HttpHandler {
        @Override
        public void handle(HttpExchange exchange) throws IOException {
            // 设置响应头,声明为流式传输
            exchange.getResponseHeaders().add("Content-Type", "application/octet-stream");
 
            // 开始发送响应数据
            OutputStream outputStream = exchange.getResponseBody();
            for (int i = 0; i < 10; i++) {
                byte[] data = generateData(); // 生成要发送的数据
                outputStream.write(data);
                outputStream.flush();
 
                try {
                    Thread.sleep(1000); // 每秒发送一次数据
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
 
            outputStream.close();
        }
 
        private byte[] generateData() {
            // 生成数据的逻辑,此处仅返回固定长度的数据
            return new byte[1024];
        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Streaming Test</title>
</head>
<body>
  <div id="output"></div>

  <script>
    var outputDiv = document.getElementById("output");
    var xhr = new XMLHttpRequest();

    // 监听数据到达事件
    xhr.onprogress = function(event) {
      if (event.lengthComputable) {
        var percentComplete = Math.floor((event.loaded / event.total) * 100);
        outputDiv.innerHTML = "Progress: " + percentComplete + "%";
      } else {
        outputDiv.innerHTML = "Receiving data...";
      }
    };

    // 接收完整响应后处理数据
    xhr.onload = function() {
      outputDiv.innerHTML = "Streamed response received.";
      // 这里可以根据具体需求处理接收到的数据
    };

    xhr.open("GET", "http://localhost:8000/streaming", true);
    xhr.send();
  </script>
</body>
</html>
您的感觉是什么
更新 2023年12月11日