Kafka Consumer通过WebSocket发送数据给WebUI

Kafka Stream API在处理完数据后,会将数据发送到我们预定义的topic.如果我们需要将这些数据发送给我们的WebUI,那么我们就需要写一个Consumer,让它订阅上面的那个topic,然后发送数据给WebUI.

那么到底如何来做呢?下面我会一步步的描述.

首先,我们需要新建一个WebApp.其目录结构大体如下:

Kafka Consumer通过WebSocket发送数据给WebUI_第1张图片

我们为什么需要新建一个WebApp项目呢?因为WebSocket是一个基于HTTP协议的协议,所以我们还需要使用Tomcat等服务器软件让其对外提供服务.

新建完这个项目之后,我们需要添加需要的依赖,依赖如下:

Kafka Consumer通过WebSocket发送数据给WebUI_第2张图片

依赖包括有WebSocket的依赖,Kafka的依赖.需要注意的是,kafka_2.11kafka-clients版本号需要相同,否则可能会因为不匹配而造成意外的错误.我开始就是因为版本号不同而造成找不到类的错误.

另外,它们的版本最好跟你的Kafka的版本相同,我这里使用的是kafka 0.11.0.0,所以使用的也是这个版本的依赖.

我们就需要写WebSocket服务器端代码了:

Kafka Consumer通过WebSocket发送数据给WebUI_第3张图片
Kafka Consumer通过WebSocket发送数据给WebUI_第4张图片

我们先使用ServerEndpoint注解,产生一个WebSocket服务器端及其路径.然后,分别通过OnOpen, OnClose, OnMessage注解定义了当有客户端连接到服务器,当有客户端尝试关闭连接,当客户端向服务器端发送消息时如何进行处理.最后,我们定义了一个sendMessage方法,这个方法将被Kafka Consumer来使用,通过这个方法向客户端发送消息.

完成了WebSocket服务器端代码之后,我们就需要写Kafka Consumer的代码了.我们需要让它订阅某个Kafka Topic,并能够通过WebSocket发送数据给客户端,实现代码如下:

Kafka Consumer通过WebSocket发送数据给WebUI_第5张图片

Kafka Consumer通过WebSocket发送数据给WebUI_第6张图片

上面的代码很容易理解,就不解释了.

完成了Kafka Consumer的代码之后,我们还需要让Tomcat能够运行它.因为Tomcat是一个服务器端软件,所以我们不能通过直接写main方法的方式,让Tomcat运行它.所以我们额外写了这么一个类:

Kafka Consumer通过WebSocket发送数据给WebUI_第7张图片

写好了之后,我们还需要让Tomcat知道,我们希望他能运行上面那个类.那么我们如何来实现呢?

我们需要在web.xml中,添加一个listener,如下所示:

Kafka Consumer通过WebSocket发送数据给WebUI_第8张图片

这样服务器端就全部写好了,那么我们还需要一个WebUI来显示接收到的数据,我们在webapp目录下,新建一个index.html,其内容为:

Kafka Consumer通过WebSocket发送数据给WebUI_第9张图片
Kafka Consumer通过WebSocket发送数据给WebUI_第10张图片

其显示出来就是这样:

Kafka Consumer通过WebSocket发送数据给WebUI_第11张图片

当点击connect按钮时,会让客户端连接到服务器端,当点击close按钮时,客户端从服务器端断开,当点击sendMsg按钮时,客户端会向服务器发送一条消息.

当客户端和服务器端处于连接状态中的话,那么服务器端就可以发送数据给客户端.

代码都完成之后,我们需要将项目打包成war包并部署到Tomcat中,在项目根目录下执行下面的命令:

mvn package

打包完成之后,将target目录下生成的war文件拷贝到Tomcat根目录下的webapp下,然后启动Tomcat即可,通过执行Tomcat bin目录下的startup.sh脚本来启动服务器.

一切都做好之后,向Kafka Stream传送数据,等到其处理好之后,就可以在上面的Web UI中看到WebSocket传送来的数据了,如下图所示:

Kafka Consumer通过WebSocket发送数据给WebUI_第12张图片
Kafka Consumer通过WebSocket发送数据给WebUI_第13张图片

这样就完成了.

由于我的代码是从Github上找的,这里贴出原项目的地址:

webSocketkafka项目源码

你可能感兴趣的:(Kafka Consumer通过WebSocket发送数据给WebUI)