SpringBoot-配置websocket

SpringBoot-配置websocket

首先得明白websocket是一种基于TCP的网络传输协议，实现了全双工通信-服务器可以向客户端发送数据

websock的产生原因

传统的Http请求通信的时候仅仅只能客户端发送请求，服务端响应数据，为了满足全双工通信的需求websocket产生了

Websocket引入Maven依赖

// An highlighted block
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

WebSocketConfig

启动websocket支持，仅使用spring容器时候需要配置，如果有单独的sevlert容器则不需要配置

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/***
 * 用于注册ServerEndpoint
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

配置ServerEndpoint

serverEndpoint是服务端接收到前端websocket请求后的处理类

import lombok.Data;
import lombok.NoArgsConstructor;
import org.apache.kafka.clients.consumer.ConsumerRecord;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.EndpointConfig;
import javax.websocket.OnError;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint(value = "/websocket/{topics}")
@Data
@NoArgsConstructor
@Component
public class WebSocketHandler {

    private static final Logger  logger = LoggerFactory.getLogger(WebSocketHandler.class);

    private static CopyOnWriteArraySet<WebSocketHandler> webSocketSet = new CopyOnWriteArraySet<WebSocketHandler>();

    private CopyOnWriteArraySet<String> topics = new CopyOnWriteArraySet<String>();

    private Session session;

    @OnOpen
    public void onOpen(Session session, EndpointConfig config, @PathParam(value="topics")String topic) {

        session.getUserProperties().put( "org.apache.tomcat.websocket.BLOCKING_SEND_TIMEOUT",1000L);
        try {

            this.session = session;

            String[] split = topic.split(",");

            for (String string : split) {
                topics.add(string);
            }

            synchronized (webSocketSet) {

                webSocketSet.add(this);
            }

        } catch (Exception e) {
            logger.error(e.getMessage());
        }
    }
    /***
     * 推送消息
     * @param record
     */
    public static void sendMessage2Jsp(ConsumerRecord<String, String> record) {
        // TODO Auto-generated method stub
        synchronized (webSocketSet) {
            if (webSocketSet.isEmpty()){
                return;
            }
            for (WebSocketHandler item : webSocketSet) {
                try {

                    if (item.getTopics().contains(record.topic())) {
                        item.sendMessage(record.value());
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                    continue;
                }
            }
        }
    }
    /***
     * WebSocket连接错误时执行
     * @param thr
     * @throws Throwable
     */
    @OnError
    public void onError(Throwable thr) throws Throwable{
        //logger.error("Chat Error: " + thr.toString(), thr);
        synchronized (webSocketSet) {

            webSocketSet.remove(this);
        }
    }

    /**
     * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
     *
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
}

这里的WebSocketHandler 使用的ws协议，@ServerEndpoint("/websocket")@Component启用即可，然后在里面实现@OnOpen,@onClose,@onMessage等方法，在openSession方法中通过@PathParam可以获得连接请求参数，从而完成后续解析kafka的消息id，进行消息转发

消息推送

将消息推送到客户端，可以调用上述WebSocketHandler 中的sendMessage2Jsp的方法

    /***
     * 推送消息
     * @param record
     */
    public static void sendMessage2Jsp(ConsumerRecord<String, String> record) {
        // TODO Auto-generated method stub
        synchronized (webSocketSet) {
            if (webSocketSet.isEmpty()){
                return;
            }
            for (WebSocketHandler item : webSocketSet) {
                try {

                    if (item.getTopics().contains(record.topic())) {
                        item.sendMessage(record.value());
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                    continue;
                }
            }
        }
    }

从页面（客户端）发送websocket请求

js代码如下

	 <script> 
    var socket;  
    if(typeof(WebSocket) == "undefined") {  
        console.log("您的浏览器不支持WebSocket");  
    }else{  
        console.log("您的浏览器支持WebSocket");  
        	//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接  
            //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");  
            socket = new WebSocket("${basePath}websocket/${topics}".replace("http","ws"));  
            //打开事件  
            socket.onopen = function() {  
                console.log("Socket 已打开");  
                //socket.send("这是来自客户端的消息" + location.href + new Date());  
            };  
            //获得消息事件-接收到服务端消息
            socket.onmessage = function(msg) {  
                console.log(msg.data);  
                //发现消息进入开始处理前端触发逻辑
            };  
            //关闭事件  
            socket.onclose = function() {  
                console.log("Socket已关闭");  
            };  
            //发生了错误事件  
            socket.onerror = function() {  
                alert("Socket发生了错误");  
            }  
    }
    </script>