SSE流式接口,三端调用示例

包含了使用Vue.js、Java和OkHttp来实现Server-Sent Events(SSE)的示例代码。

实现Server-Sent Events(SSE)的简单教程

Server-Sent Events(SSE)是一种用于在客户端和服务器之间实现实时单向通信的技术。它允许服务器向客户端推送数据,而无需客户端发起请求。在本教程中,我们将使用Vue.js、Java和OkHttp来演示如何实现SSE。

前端实现(使用Vue.js)

首先,我们将展示如何在前端使用Vue.js来接收和显示SSE数据。

<template>
  <div>
    <h1>SSE数据:</h1>
    <ul>
      <li v-for="message in messages" :key="message.id">{
   
   { message.data }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: []
    };
  },
  mounted() {
    const eventSource = new EventSource('https://example.com/sse'); // 替换为你的SSE接口地址

    eventSource.addEventListener('message', (event) => {
      this.messages.push({ id: Date.now(), data: event.data });
    });

    eventSource.addEventListener('error', (event) => {
      console.error('连接关闭:', event);
    });
  }
};
</script>

在上述示例中,我们创建了一个Vue组件,用于显示接收到的SSE数据。在mounted钩子函数中,我们创建了一个EventSource对象,并指定了SSE接口的URL。然后,我们通过addEventListener方法监听了’message’事件,当服务器发送SSE数据时,会触发该事件,我们将接收到的数据添加到messages数组中。最后,我们还监听了’error’事件,用于处理连接关闭的情况。

后端实现(使用Java)

接下来,我们将展示如何在后端使用Java来实现SSE接口。

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArrayList;

@RestController
public class SseController {
    
    

    private final CopyOnWriteArrayList<SseEmitter> emitters = new CopyOnWriteArrayList<>();

    @GetMapping("/sse")
    public SseEmitter handleSse() {
    
    
        SseEmitter emitter = new SseEmitter();
        emitters.add(emitter);

        emitter.onCompletion(() -> emitters.remove(emitter));
        emitter.onTimeout(() -> emitters.remove(emitter));

        return emitter;
    }

    public void sendSseMessage(String message) {
    
    
        for (SseEmitter emitter : emitters) {
    
    
            try {
    
    
                emitter.send(SseEmitter.event().data(message));
            } catch (IOException e) {
    
    
                emitter.complete();
                emitters.remove(emitter);
            }
        }
    }
}

在上述示例中,我们使用Spring框架的SseEmitter类来实现SSE功能。在handleSse方法中,我们创建了一个新的SseEmitter对象,并将其添加到emitters列表中。然后,我们通过设置onCompletiononTimeout回调函数来处理连接的关闭和超时情况。

sendSseMessage方法中,我们遍历emitters列表,向每个SseEmitter对象发送消息。如果发送消息时发生异常,我们将关闭该SseEmitter并从emitters列表中移除。

客户端调用(使用OkHttp)

最后,我们将展示如何使用OkHttp库来调用SSE接口。

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import okhttp3.sse.EventSource;
import okhttp3.sse.EventSourceListener;

public class SseClientExample {
    
    

    public static void main(String[] args) {
    
    
        OkHttpClient client = new OkHttpClient();

        Request request = new Request.Builder()
                .url("https://example.com/sse") // 替换为你的SSE接口地址
                .build();

        EventSourceListener listener = new EventSourceListener() {
    
    
            @Override
            public void onEvent(EventSource eventSource, String id, String type, String data) {
    
    
                System.out.println("Received SSE event:");
                System.out.println("ID: " + id);
                System.out.println("Type: " + type);
                System.out.println("Data: " + data);
            }

            @Override
            public void onFailure(EventSource eventSource, Throwable t, Response response) {
    
    
                t.printStackTrace();
            }
        };

        EventSource eventSource = new EventSource.Factory(client)
                .newEventSource(request, listener);

        // 可以在需要时关闭EventSource
        // eventSource.close();
    }
}

在上述示例中,我们首先创建了一个OkHttpClient对象,并构建了一个包含SSE接口URL的请求。然后,我们创建了一个EventSourceListener对象,用于处理接收到的SSE事件。在onEvent方法中,我们可以处理每个SSE事件的ID、类型和数据。在onFailure方法中,我们处理连接失败的情况。

最后,我们使用OkHttp的EventSource.Factory类创建了一个EventSource对象,并传入请求和监听器。通过调用newEventSource方法,我们建立了与SSE接口的连接,并开始接收SSE事件。

猜你喜欢

转载自blog.csdn.net/wkh___/article/details/131379483
SSE