javascript - 在网页上显示Kafka消息

Question

我有一个带有 Tomcat 服务器的 Java Spring 应用程序，用于监听 kafka 主题。我想在网页上实时显示所有消息。因此，当卡夫卡消息到达后端时，我希望在我的网页上看到它。我不知道有什么好的方法可以将kafka消息直接推送到前端并显示在网页上。有人可以帮助我提供解决方案和一些可以提供帮助的示例吗？谢谢!

Answer 1

我已经用 Java 为我的上一个雇主实现了这样的系统，尽管不是使用 Spring/Tomcat。它使用来自 Kafka 的消息并将其提供给 Web 套接字以在浏览器中显示。我遵循的方法是使用 akka-stream-kafka和 akka-http用于网络套接字支持。这样做的好处是两者都基于 akka-streams，这使得它很容易适合流数据。虽然您可以将 akka-http 嵌入到在 tomcat 中运行的 spring 应用程序中，但它可能不再感觉是最自然的选择，因为 spring 框架已经拥有对 kafka 和 websockets 的支持。但是，如果您对其中任何一个都不熟悉，那么采用 akka 方法可能是最简单的，并且核心逻辑遵循这些思路(我无法共享工作中的代码，因此只需将文档中的示例放在一起) ，未测试):

public Route createRoute(ActorSystem system) {
  return path("ws", () -> {
    ConsumerSettings<byte[], String> consumerSettings = ConsumerSettings.create(system, new ByteArrayDeserializer(), new StringDeserializer())
      .withBootstrapServers("localhost:9092")
      .withGroupId(UUID.randomUUID().toString()) //this is so that each client gets all messages. To be able to resume from where a client left off in case of disconnects, you can generate in on the client side and pass in the request
      .withProperty(ConsumerConfig.AUTO_OFFSET_RESET_CONFIG, "earliest")

    return handleWebSocketMessages(
      Flow.fromSinkAndSourceCoupled(
        Sink.ignore(),
        Consumer.committableSource(consumerSettings, Subscriptions.topics("topic1"))
          .map(msg -> TextMessage.create(msg.record().value()))
      )
    );
  }
}

要公开此路线，您可以按照 minimalistic example 操作，唯一的区别是您定义的路线需要 ActorSystem:

final Http http = Http.get(system);
final ActorMaterializer materializer = ActorMaterializer.create(system);

final Flow<HttpRequest, HttpResponse, NotUsed> routeFlow = createRoute(system).flow(system, materializer);
final CompletionStage<ServerBinding> binding = http.bindAndHandle(routeFlow,
    ConnectHttp.toHost("localhost", 8080), materializer);

将消息发布到 websocket 后，前端代码当然将取决于您选择的 UI 框架，从 javascript 消费 ws 消息的最简单代码是:

this.connection = new WebSocket('ws://url-to-your-ws-endpoint');
this.connection.onmessage = evt => { 
  // display the message

为了在 UI 中轻松显示消息，您希望格式更方便，例如 JSON。如果您的 Kafka 消息还不是 JSON，那么第一个片段中的反序列化器就派上用场了，您可以在反序列化器中将其转换为方便的 JSON 字符串，或者稍后在源对象上调用的 .map() 中执行此操作。

或者，如果可以选择轮询，您也可以考虑使用现成的 Kafka Rest Proxy ，那么你只需要构建前端即可。