SpringBoot整合WebSocket

一、WebSocket概述

        Http协议是一种基于请求/响应的应用层协议，工作原理是客户端（浏览器）与服务端建立TCP连接->客户端向服务端发送http请求报文->服务端收到请求报文进行处理返回一个响应报文->释放TCP连接->浏览器解析响应报文进行渲染。整个过程中都是由客户端发起的，服务端被动反应。如果我们需要实时获取服务器数据，可以通过ajax轮询来实现，不停的进行请求/响应，不停的建立TCP连接，这就造成的资源的极大浪费，而且做不到服务端向客户端发送信息。

        由此诞生了websocket协议，最大的特点就是服务端可以主动向客户端发送信息，客户端也可主动向服务端发送信息，是一个双向平等的协议。工作原理是首先使用http建立一个TCP连接并告诉服务器将http协议升级为websocket协议此时就建立了一个持久连接->此时如果服务器由信息输出则直接传输给客户端，客户端不再询问知道客户端关闭连接为止。

二、SpringBoot整合WebSocket

1、导入pom.xml依赖

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

2、编写节点配置类和WebSocket配置类

EndpointConfig.java

public class EndpointConfig extends ServerEndpointConfig.Configurator implements ApplicationContextAware {

    private static volatile BeanFactory context;

    @Override
    public <T> T getEndpointInstance(Class<T> clazz) throws InstantiationException {
        return context.getBean(clazz);
    }

    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        EndpointConfig.context = applicationContext;
    }
}

WebSocketConfig.java

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointConfig() {
        return new ServerEndpointExporter();
    }

    @Bean
    public EndpointConfig newConfig() {
        return new EndpointConfig();
    }
}

3、编写服务端内容

@Component
@ServerEndpoint(value = "/productWebSocket/{userId}", configurator = EndpointConfig.class)
@Slf4j
public class ProductWebSocket {

    //当前在线用户
    private static final AtomicInteger onlineCount = new AtomicInteger(0);

    //存放当前连接的用户
    private static CopyOnWriteArraySet<ProductWebSocket> webSocketSet = new CopyOnWriteArraySet<ProductWebSocket>();

    private Session session;

    /**
     * 连接开启时调用
     * @param userId
     * @param session
     */
    @OnOpen
    public void onOpen(@PathParam("userId") String userId, Session session) {
        log.info("新客户端连入，用户id：" + userId);
        this.session = session;
        webSocketSet.add(this);
        addOnlineCount();
        if (userId != null) {
            List<String> totalPushMsg = new ArrayList<>();
            totalPushMsg.add(userId+"连接成功-"+"-当前在线人数为："+getOnlineCount());
            if (totalPushMsg != null && !totalPushMsg.isEmpty()) {
                totalPushMsg.forEach(e -> sendMessage(e));
            }
        }
    }

    /**
     * 连接关闭时调用
     */
    @OnClose
    public void onClose() {
        log.info("一个客户端关闭连接");
        webSocketSet.remove(this);
        subOnlineCount();
    }

    /**
     * 服务端接收到信息后调用
     * @param message
     * @param session
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("用户发送过来的消息为："+message);
    }

    /**
     * 服务端websocket出错时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("websocket出现错误");
        error.printStackTrace();
    }

    /**
     * 服务端发送信息给客户端
     * @param message
     */
    public void sendMessage(String message) {
        try {this.session.getBasicRemote().sendText(message);
            log.info("推送消息成功，消息为："+message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 群发自定义消息
     * @param message
     */
    public static void sendInfo(String message) {
        for (ProductWebSocket productWebSocket:webSocketSet) {
            productWebSocket.sendMessage(message);
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount.get();
    }

    public static synchronized void addOnlineCount() {
        onlineCount.incrementAndGet();
    }

    public static synchronized void subOnlineCount() {
        onlineCount.decrementAndGet();
    }
}

再编写一个定时任务进行实时推送数据

@Component
public class ProductExpireTask {

    @Scheduled(fixedRate = 2000)
    public void productExpire() {
        String[] strs={"Test随机消息 ：30.1123",
                "Test随机消息 ：32.1021",
                "Test随机消息 ：33.1774",
                "Test随机消息 ：33.2372",
                "Test随机消息 ：31.0281",
                "Test随机消息 ：30.0222",
                "Test随机消息 ：32.1322",
                "Test随机消息 ：33.3221",
                "Test随机消息 ：31.2311",
                "Test随机消息 ：32.3112"};

        ProductWebSocket.sendInfo(new Date().toGMTString()+"    Test 消息---->"+RandomStr(strs));
    }

    public static String RandomStr(String[] strs) {
        int random_index = (int)(Math.random()*strs.length);
        return strs[random_index];
    }
}

需要在SpringBoot启动类添加@EnableScheduling注解以开启定时任务

4、编写客户端进行信息接收和发送（html页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket测试</title>
</head>
<body>
    TestWebSocket
    <input id="text" type="text" />
    <button onclick="send()">SEND MESSAGE</button>
    <button onclick="closeWebSocket()">CLOSE</button>
    <div id="message"></div>
</body>
<script type="text/javascript">
    var websocket = null;
    
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/productWebSocket/001");
    }
    else {
        alert("Not support WebSocket!");
    }

    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };

    websocket.onopen = function () {
        setMessageInnerHTML("open");
    };
    
    websocket.onmessage = function (e) {
        setMessageInnerHTML(e.data);
    };

    websocket.onclose = function () {
        setMessageInnerHTML("close");
    };

    window.onbeforeunload = function () {
        websocket.close();
    };
    
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML+'</br>';
    }

    function closeWebSocket() {
        websocket.close();
    }
    
    function send() {
        var message = document.getElementById('text').value
        websocket.send(message);
    }
</script>
</html>

5、测试

浏览器输入url为http://localhost:8080/websocket，就开启了websocket连接。

客户端输出如下：

 输入框中输入消息并点击发送后查看服务端输出：

 以上就是完整的整合过程，在前后端传输信息时也可采用JSON格式。

6、采用JSON进行前后端信息传输

a、客户端发送JSON

修改html页面中send()方法

function send() {
    var message = {
        date: new Date(),
        message: document.getElementById('text').value
    };
    websocket.send(JSON.stringify(message));
}     

b、服务端接收JSON

由于接收到JSON信息需要进行转化，新建一个实体类，这里使用lombok

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Message {
    private Date date;
    private String message;
}

修改ProductWebSocket类的onMessage()方法

@OnMessage
public void onMessage(String message, Session session) {
    try {
        log.info("用户发送过来的消息为："+message);
        Message msg = new ObjectMapper().readValue(message, Message.class);
        System.out.println(msg);
    } catch (JsonProcessingException e) {
        e.printStackTrace();
    }
}

 c、服务端发送JSON

修改ProductWebSocket类的sendMessage()方法

public void sendMessage(String message) {
    try {
        Message msg = new Message();
        msg.setDate(new Date());
        msg.setMessage(message);
        this.session.getBasicRemote().sendText(new ObjectMapper().writeValueAsString(msg));
        log.info("推送消息成功，消息为："+msg);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

d、客户端接收JSON

修改html页面

websocket.onmessage = function (e) {
    var msg = JSON.parse(e.data);
    setMessageInnerHTML(msg.date+", "+msg.message);
};

 测试结果：

客户端

 服务端