{
"Spring Boot 版本":"2.5.2",
""
}

0.(pom.xml)配置文件添加依赖项

<!-- 我是没有引用这个{javaee-api},好像spring-boot已经包含了类似这样的基础类库... -->
<dependency>
	<groupId>javax</groupId>
	<artifactId>javaee-api</artifactId>
	<version>7.0</version>
	<scope>provided</scope>
</dependency>


<!-- 我的这个案例中,这个是必选依赖项(基于其它的插件也是可以实现,不在本文讨论范围内),springboot的高级组件会自动引用基础的组件,像spring-boot-starter-websocket就引入了spring-boot-starter-web和spring-boot-starter -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-websocket</artifactId>
	<version>1.3.5.RELEASE</version>
</dependency>

依赖项这里我搞了一上午才搞定,各种问题,各种依赖关系冲突,
比如:明明在pom.xml中添加了对应的包{
spring-boot-starter-websocket},并且刷新了Maven,
结果在程序中就是访问不到对应的类{ServerEndpointExporter}

1.注入ServerEndpointExporter到容器中,为了后续使用注解{@ServerEndpoint}做准备

本案例中首先要注入ServerEndpointExporter,这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint.
注意,如果使用独立的servlet容器,而不是直接使用springboot的内置容器,就不要注入ServerEndpointExporter,因为它将由容器自己提供和管理

//文件 - "WebSocketConfigOne.java"
@Configuration
public class WebSocketConfigOne {
    /*
     * 这个bean会自动注册使用了@ServerEndpoint注解声明的对象
     * 没有的话会报404
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

2.WebSocket具体实现类

前端需要建立连接的webSocket实现

• 连接.建立
• 连接.关闭
• 服务端向客户端.发送消息
• 客户端向服务端.发送消息

//文件 - "MyWebSocket.java"
@Component
//此处定义接口的uri
@ServerEndpoint("/wbSocket")
public class MyWebSocket {
    private Session session;
    public static CopyOnWriteArraySet<MyWebSocket> myWebSockets = new CopyOnWriteArraySet<MyWebSocket>(); //此处定义静态变量，以在其他方法中获取到所有连接

    /**
     * 建立连接。
     * 建立连接时入参为session
     */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        myWebSockets.add(this); //将此对象存入集合中以在之后广播用，如果要实现一对一订阅，则类型对应为Map。由于这里广播就可以了随意用Set
        System.out.println("New session insert,sessionId is "+ session.getId());
    }
    /**
     * 关闭连接
     */
    @OnClose
    public void onClose(){
        myWebSockets.remove(this);//将socket对象从集合中移除，以便广播时不发送次连接。如果不移除会报错(需要测试)
        System.out.println("A session insert,sessionId is "+ session.getId());
    }
    /**
     * 接收前端传过来的数据。
     * 虽然在实现推送逻辑中并不需要接收前端数据，但是作为一个webSocket的教程或叫备忘，还是将接收数据的逻辑加上了。
     */
    @OnMessage
    public void onMessage(String message ,Session session){
        System.out.println(message + "from " + session.getId());
    }

    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
}

3.Kafka消费者实现类

本案例中,Kafka消费的消息会直接通过和前端WebSocket的连接显示到前端

//文件 - "ConsumerKafka.java"
/*
Kafka
 */
public class ConsumerKafka extends Thread {

    private KafkaConsumer<String,String> consumer;
    //Kafka.主题
    private String topic = "topid_kafka";

    public ConsumerKafka(){
    }

    /*
    启动
     */
    @Override
    public void run(){
        //加载kafka消费者参数
        Properties props = new Properties();
        props.put("bootstrap.servers", "127.0.0.1:9092");
        props.put("group.id", "groupId_kafka");
        props.put("enable.auto.commit", "true");
        props.put("auto.commit.interval.ms", "1000");
        props.put("session.timeout.ms", "15000");
        props.put("key.deserializer", "org.apache.kafka.common.serialization.StringDeserializer");
        props.put("value.deserializer", "org.apache.kafka.common.serialization.StringDeserializer");
        //创建消费者对象
        consumer = new KafkaConsumer<String,String>(props);
        consumer.subscribe(Arrays.asList(this.topic));
        //死循环，持续消费kafka
        while (true){
            try {
                //消费数据，并设置超时时间
                ConsumerRecords<String, String> records = consumer.poll(100);
                //Consumer message
                for (ConsumerRecord<String, String> record : records) {
                    //注意,变量{myWebSockets}存在于类文件{MyWebSocket.cs}中
                    for (MyWebSocket myWebSocket :myWebSockets){
                        myWebSocket.sendMessage(record.value());
                    }
                }
            }catch (IOException e){
                System.out.println(e.getMessage());
                continue;
            }
        }
    }

    /*
    关闭
     */
    public void close() {
        try {
            consumer.close();
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }
}

4.main函数修改

将Kafka消费者实例化

//文件 - "Application.java"
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        //将Kafka消费者实例化,运行起来....
        ConsumerKafka consumerKafka = new ConsumerKafka();
        consumerKafka.start();
        SpringApplication.run(Application.class, args);
    }
}

5.前端WebSocket代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket client</title>
    <script type="text/javascript">
        var socket;
        if (typeof (WebSocket) == "undefined"){
			setMessageInnerHTML("This explorer don‘t support WebSocket");
        }

        function connect() {
            //Connect WebSocket server
            socket =new WebSocket("ws://127.0.0.1:8080/wbSocket");
			
            //open
            socket.onopen = function () {
                setMessageInnerHTML("open");
            }
            //Get message
            socket.onmessage = function (msg) {
				var data = JSON.parse(msg.data)
				setMessageInnerHTML("服务端消息:" + data);
            }
            //close
            socket.onclose = function () {				
				setMessageInnerHTML("连接已关闭...");
            }
            //error
            socket.onerror = function (e) {
				setMessageInnerHTML("错误:"+JSON.stringify(e));
            }
        }

        function close() {
			setMessageInnerHTML("关闭连接...");
            socket.close();
        }

        function sendMsg() {
			var clientMsg = document.getElementById(‘id_clientMsg‘).value;
            socket.send("This is a client message :" + clientMsg);
        }
		
		//将消息显示在网页上
		function setMessageInnerHTML(innerHTML){
			document.getElementById(‘id_msgRecord‘).innerHTML += innerHTML + ‘<br/>‘;
		}
    </script>
</head>
<body>
	<!-- 连接 -->
    <button onclick="connect()">connect</button>
	<!-- 关闭连接 -->
    <button onclick="close()">close</button>
	<!-- 客户端消息发送 -->
    <button onclick="sendMsg()">sendMsg</button>
	
	<!-- 客户端消息 -->
	<input id="id_clientMsg" type="text" />
	
	<!-- 消息记录 -->
	<div id="id_msgRecord">
	</div>
</body>
</html>

总结

坑集合

• [x] 坑1 -- pom.xml中各种依赖的关系,搞得有些依赖明明已经写入了pom.xml中,但是依然使用不了 ...
• [X] 坑2 -- 刚开始WebSocket一度连接不上,后来添加上文件{WebSocketConfigOne.java}就可以了
• [X] 坑3 -- Kafka消费者刚开始一直忘了实例化...

其它

扩展

• WebSocket和Socket什么关系?
• HTTP和WebSocket什么关系?

Spring Boot 下 Kafka和Websocket通信