如何让客户端使用 Javalin 接收服务器发送的事件?
How to make the client receive server sent event using Javalin?
我正在尝试实现一个服务器客户端项目,该项目需要服务器每 5 分钟向客户端发送一次数据,客户端仅在连接开始时询问。服务器发送事件似乎是首选解决方案。
我尝试使用 Javalin 文档中提供的功能。我能够通过简单的从服务器获取响应来接收响应。但是我无法建立 sse 连接。代码在服务器中进入 lambda 函数,但客户端没有收到任何东西。我不确定是客户端还是服务器,甚至两者都有问题。
我们从下面的代码中得到的唯一输出是服务器端的 "connected"。提前谢谢你。
服务器代码
import io.javalin.Javalin;
public class SimpleTwitter {
public static void main(String[] args) {
Javalin app = Javalin.create().start(7000);
app.sse("/sse", client ->{
System.out.println("connected");
client.sendEvent("message","Hello, SSE");
client.onClose(() -> System.out.println("Client disconnected"));
});
app.get("/", ctx -> ctx.result("Hello World"));
}
}
客户端代码
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("http://localhost:7000/sse");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
原来问题不是代码。通过查看 chrome 上的开发人员工具,我们看到了以下内容:
"Access to resource at 'http://localhost:7000/sse' from origin 'null'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource."
当我们安装一个名为 "Allow-Control-Allow-Origin: *" 的 chrome 扩展时,我们能够看到输出。
另外,这里是更新后更好用的代码:
> <<!DOCTYPE html> <html> <body>
>
> <h1>Tweets</h1>
>
> <script> new
> EventSource('http://localhost:7000/sse').addEventListener( "hi", msg
> =>{ document.write(msg.data); }); </script>
>
> </body> </html>
...
public static void main(String[] args) throws InterruptedException {
Queue<SseClient> clients = new ConcurrentLinkedQueue<>();
Javalin app = Javalin.create().start(7000);
app.sse("/sse", client -> {
clients.add(client);
client.onClose(() -> clients.remove(client));
});
while (true) {
for (SseClient client : clients) {
client.sendEvent("hi", "hello world");
}
TimeUnit.SECONDS.sleep(1);
}
}
我正在尝试实现一个服务器客户端项目,该项目需要服务器每 5 分钟向客户端发送一次数据,客户端仅在连接开始时询问。服务器发送事件似乎是首选解决方案。
我尝试使用 Javalin 文档中提供的功能。我能够通过简单的从服务器获取响应来接收响应。但是我无法建立 sse 连接。代码在服务器中进入 lambda 函数,但客户端没有收到任何东西。我不确定是客户端还是服务器,甚至两者都有问题。 我们从下面的代码中得到的唯一输出是服务器端的 "connected"。提前谢谢你。
服务器代码
import io.javalin.Javalin;
public class SimpleTwitter {
public static void main(String[] args) {
Javalin app = Javalin.create().start(7000);
app.sse("/sse", client ->{
System.out.println("connected");
client.sendEvent("message","Hello, SSE");
client.onClose(() -> System.out.println("Client disconnected"));
});
app.get("/", ctx -> ctx.result("Hello World"));
}
}
客户端代码
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("http://localhost:7000/sse");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
原来问题不是代码。通过查看 chrome 上的开发人员工具,我们看到了以下内容:
"Access to resource at 'http://localhost:7000/sse' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
当我们安装一个名为 "Allow-Control-Allow-Origin: *" 的 chrome 扩展时,我们能够看到输出。
另外,这里是更新后更好用的代码:
> <<!DOCTYPE html> <html> <body>
>
> <h1>Tweets</h1>
>
> <script> new
> EventSource('http://localhost:7000/sse').addEventListener( "hi", msg
> =>{ document.write(msg.data); }); </script>
>
> </body> </html>
...
public static void main(String[] args) throws InterruptedException {
Queue<SseClient> clients = new ConcurrentLinkedQueue<>();
Javalin app = Javalin.create().start(7000);
app.sse("/sse", client -> {
clients.add(client);
client.onClose(() -> clients.remove(client));
});
while (true) {
for (SseClient client : clients) {
client.sendEvent("hi", "hello world");
}
TimeUnit.SECONDS.sleep(1);
}
}