SpringBoot集成WebSocket

網上有很多關於WebSocket用法的文章，但是有一些內容錯誤或者代碼不全的，這里來個全的，方便自己記憶。

 

前言：

WebSocket是一種在單個TCP連接上進行全雙工通信的協議。WebSocket通信協議於2011年被IETF定為標准RFC 6455，並由RFC7936補充規范。WebSocket API也被W3C定為標准。WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

 

說明：

本篇主要介紹在SpringBoot框架下，WebSocket基於注解使用的3種場景：

1、自己給自己發消息

2、自己給所有客戶端發送消息(不包括自己)

3、自己給另一個客戶端發送消息

 

代碼示例：

代碼結構如下：

 

 

pom文件中的依賴：

　　　　 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <!-- websocket -->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <!-- fastjson -->
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>

application.yml文件：

server:
  port: 18092

WebSocket配置文件：

@Configuration
public class WebSocketConfig {

    /**
     * 注入一個ServerEndpointExporter,該Bean會自動注冊使用@ServerEndpoint注解申明的websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

在resources創建一個static文件夾，然后新建一個index.html頁面：

<!DOCTYPE HTML>
<html>
<head>
<title>My WebSocket</title>
</head>

<body>
    <input id="text" type="text" />
    <button onclick="send()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    //判斷當前瀏覽器是否支持WebSocket, 主要此處要更換為自己的地址
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:18092/test/one");
    } else {
        alert('Not support websocket')
    }

    //連接發生錯誤的回調方法
    websocket.onerror = function() {
        setMessageInnerHTML("error");
    };

    //連接成功建立的回調方法
    websocket.onopen = function(event) {
        //setMessageInnerHTML("open");
    }

    //接收到消息的回調方法
    websocket.onmessage = function(event) {
        setMessageInnerHTML(event.data);
    }

    //連接關閉的回調方法
    websocket.onclose = function() {
        setMessageInnerHTML("close");
    }

    //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
    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>

對應上面的3中場景，分別給出代碼：

1、自己給自己發消息

創建一個OneWebSocket類，用來服務端與客戶端進行交互：

/**
 * 前后端交互的類實現消息的接收推送(自己發送給自己)
 * 
 * @ServerEndpoint(value = "/test/one") 前端通過此URI和后端交互，建立連接
 */
@Slf4j
@ServerEndpoint(value = "/test/one")
@Component
public class OneWebSocket {

    /** 記錄當前在線連接數 */
    private static AtomicInteger onlineCount = new AtomicInteger(0);

    /**
     * 連接建立成功調用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineCount.incrementAndGet(); // 在線數加1
        log.info("有新連接加入：{}，當前在線人數為：{}", session.getId(), onlineCount.get());
    }

    /**
     * 連接關閉調用的方法
     */
    @OnClose
    public void onClose(Session session) {
        onlineCount.decrementAndGet(); // 在線數減1
        log.info("有一連接關閉：{}，當前在線人數為：{}", session.getId(), onlineCount.get());
    }

    /**
     * 收到客戶端消息后調用的方法
     *
     * @param message
     *            客戶端發送過來的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("服務端收到客戶端[{}]的消息:{}", session.getId(), message);
        this.sendMessage("Hello, " + message, session);
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("發生錯誤");
        error.printStackTrace();
    }

    /**
     * 服務端發送消息給客戶端
     */
    private void sendMessage(String message, Session toSession) {
        try {
            log.info("服務端給客戶端[{}]發送消息{}", toSession.getId(), message);
            toSession.getBasicRemote().sendText(message);
        } catch (Exception e) {
            log.error("服務端發送消息給客戶端失敗：{}", e);
        }
    }

其中@ServerEndpoint注解是服務端與客戶端交互的關鍵，其值(/test/one)得與index頁面中的請求路徑對應。

啟動服務，在瀏覽器請求http://localhost:18092/index.html，如下所示：

請求一發出，立馬就會建立服務端與客戶端的連接。服務端打印日志如下：

在文本框中輸入內容：“你好”，然后點擊Send按鈕，瀏覽器效果：

 服務端日志：

（備注：服務端關閉或者瀏覽器關閉的效果，都會導致連接斷開，這里不演示）

 

2、自己給所有客戶端發送消息(不包括自己)

創建一個OneToManyWebSocket類，用來服務端與客戶端進行交互：

/**
 * 
 * 前后端交互的類實現消息的接收推送(自己發送給所有人(不包括自己))
 * 
 * @ServerEndpoint(value = "/test/oneToMany") 前端通過此URI 和后端交互，建立連接
 */
@Slf4j
@ServerEndpoint(value = "/test/oneToMany")
@Component
public class OneToManyWebSocket {

    /** 記錄當前在線連接數 */
    private static AtomicInteger onlineCount = new AtomicInteger(0);

    /** 存放所有在線的客戶端 */
    private static Map<String, Session> clients = new ConcurrentHashMap<>();

    /**
     * 連接建立成功調用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineCount.incrementAndGet(); // 在線數加1
        clients.put(session.getId(), session);
        log.info("有新連接加入：{}，當前在線人數為：{}", session.getId(), onlineCount.get());
    }

    /**
     * 連接關閉調用的方法
     */
    @OnClose
    public void onClose(Session session) {
        onlineCount.decrementAndGet(); // 在線數減1
        clients.remove(session.getId());
        log.info("有一連接關閉：{}，當前在線人數為：{}", session.getId(), onlineCount.get());
    }

    /**
     * 收到客戶端消息后調用的方法
     *
     * @param message
     *            客戶端發送過來的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("服務端收到客戶端[{}]的消息:{}", session.getId(), message);
        this.sendMessage(message, session);
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("發生錯誤");
        error.printStackTrace();
    }

    /**
     * 群發消息
     * 
     * @param message
     *            消息內容
     */
    private void sendMessage(String message, Session fromSession) {
        for (Map.Entry<String, Session> sessionEntry : clients.entrySet()) {
            Session toSession = sessionEntry.getValue();
            // 排除掉自己
            if (!fromSession.getId().equals(toSession.getId())) {
                log.info("服務端給客戶端[{}]發送消息{}", toSession.getId(), message);
                toSession.getAsyncRemote().sendText(message);
            }
        }
    }
}

將index.html頁面的路徑改為/test/oneToMany。重啟服務，在瀏覽器開多個頁面。服務端日志如下：

 在瀏覽器第一個頁面中輸入內容：“你好”，會發現其它頁面都收到了消息“你好”。服務端日志如下：

 

3、自己給另一個客戶端發送消息

創建一個OneToOneWebSocket類，用來服務端與客戶端進行交互：

/**
 * 前后端交互的類實現消息的接收推送(自己發送給另一個人)
 * 
 * @ServerEndpoint(value = "/test/oneToOne") 前端通過此URI 和后端交互，建立連接
 */
@Slf4j
@ServerEndpoint(value = "/test/oneToOne")
@Component
public class OneToOneWebSocket {

    /** 記錄當前在線連接數 */
    private static AtomicInteger onlineCount = new AtomicInteger(0);

    /** 存放所有在線的客戶端 */
    private static Map<String, Session> clients = new ConcurrentHashMap<>();

    /**
     * 連接建立成功調用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineCount.incrementAndGet(); // 在線數加1
        clients.put(session.getId(), session);
        log.info("有新連接加入：{}，當前在線人數為：{}", session.getId(), onlineCount.get());
    }

    /**
     * 連接關閉調用的方法
     */
    @OnClose
    public void onClose(Session session) {
        onlineCount.decrementAndGet(); // 在線數減1
        clients.remove(session.getId());
        log.info("有一連接關閉：{}，當前在線人數為：{}", session.getId(), onlineCount.get());
    }

    /**
     * 收到客戶端消息后調用的方法
     *
     * @param message
     *            客戶端發送過來的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("服務端收到客戶端[{}]的消息[{}]", session.getId(), message);
        try {
            MyMessage myMessage = JSON.parseObject(message, MyMessage.class);
            if (myMessage != null) {
                Session toSession = clients.get(myMessage.getUserId());
                if (toSession != null) {
                    this.sendMessage(myMessage.getMessage(), toSession);
                }
            }
        } catch (Exception e) {
            log.error("解析失敗：{}", e);
        }
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("發生錯誤");
        error.printStackTrace();
    }

    /**
     * 服務端發送消息給客戶端
     */
    private void sendMessage(String message, Session toSession) {
        try {
            log.info("服務端給客戶端[{}]發送消息[{}]", toSession.getId(), message);
            toSession.getBasicRemote().sendText(message);
        } catch (Exception e) {
            log.error("服務端發送消息給客戶端失敗：{}", e);
        }
    }

}

將index.html頁面的路徑改為/test/oneToOne。重啟服務，在瀏覽器打開兩個頁面。

由於服務端是解析的Json字符串，這里為了簡單起見，直接在瀏覽器輸入json字符串：{"message":"你好", "userId":1}。另一個頁面收到了消息：

 服務端日志：

 

至此，所有場景演示完畢~~~