包含了使用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
列表中。然后,我们通过设置onCompletion
和onTimeout
回调函数来处理连接的关闭和超时情况。
在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事件。