springBoot整合WebSocket實例

1、引入WebSocket依賴

<!--引入webSocket技術-->
<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2、創建配置類將ServerEndpointExporter進行Bean的注入

package com.ltj.demo.Configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;


/**
 * 注入ServerEndpointExporter，這個bean會自動註冊使用@ServerEndpoint註解聲明的Websocket類服務器。
 * 要注意，如果使用獨立的servlet容器，而不是直接使用springboot的內置容器，就不要注入ServerEndpointExporter， 因爲它將由容器自己提供和管理。
 */
@Component
public class webSocketConfig {

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

}

3、創建WebSocket服務器配置類

package com.ltj.demo.Controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;


/**
 *  註冊該類爲一個WebSocket服務器
 *  @ServerEndpoint將該類設置爲WebSocket訪問的服務器，參數值爲訪問該服務器的URL地址
 */
@Component
@Slf4j
@ServerEndpoint("/WebSocket")
public class WebSocket {

    //創建Session存儲數據
    private Session session;

    /**
     * 創建CopyOnWriteArraySet集合存儲WebSocket訪問信息
     *  ,並將該集合設置爲Static伴隨該類同時創建，並存儲Session
     */
    private static CopyOnWriteArraySet<WebSocket> webSocketsSet = new CopyOnWriteArraySet<>();

    /**
     * 連接建立時觸發
     * @param session
     */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketsSet.add(this);
        log.info("當前在線訪問人數:{}",webSocketsSet.size());
    }

    /**
     * 連接關閉時觸發
     */
    @OnClose
    public void onClose(){
        webSocketsSet.remove(this);
        log.info("當前在線訪問人數:{}",webSocketsSet.size());
    }

    /**
     * 服務端接收到客戶端數據時觸發
     * @param message
     */
    @OnMessage
    public void onMessage(String message){
        log.info("收到客戶端發來的信息:" + message);
    }

    /**
     * 對webSocketsSet以文本的形式循環進行發送
     * @param message   推送到用戶客戶端的信息
     */
    public void sendMessage(String message){
        for (WebSocket webSocket:webSocketsSet) {
            log.info("廣播消息:" + message);
            try {
                //對webSocketsSet集合中的socket信息進行循環輸出
                webSocket.session.getBasicRemote().sendText(message);
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }

}

4、創建業務類，作爲觸發WebSocket服務器的一個測試類

package com.ltj.demo.Controller;

import com.ltj.demo.Dao.User;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.websocket.server.PathParam;

/**
 * 測試類
 */
@Controller
@Slf4j
@RequestMapping("/testWebSocket")
public class testWebSocket {

    @Autowired
    WebSocket webSocket;

    @ResponseBody
    @RequestMapping("/webSocket")
    public User testWebSocket(@PathParam("name") String name,
                              @PathParam("age") Integer age){

        User user = new User();

        //訪問WebSocket並向客戶端發送信息
        webSocket.sendMessage("前端已經接收到數據了,姓名爲:" + name + ",年齡爲:" + age);

        log.info("姓名:{},年齡:{}",name,age);

        user.setAge(age);
        user.setUserName(name);

        return user;
    }

}

5、創建User類

package com.ltj.demo.Dao;

import lombok.Data;

@Data
public class User {

    public String userName;
    public Integer age;


}

6、創建測試跳轉頁面

package com.ltj.demo.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 跳轉到測試WebSocket頁面
 */
@Controller
@RequestMapping("/webSocket/openOneSocket")
public class ToWebSocketIndex {

    @RequestMapping("/toSocketPage")
    public String toSocketPage(){
        //跳轉到testWebSocket.html頁面中
        return "testWebSocket";
    }

}

7、前端html頁面編寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script>
        var socket = null;

        //判斷當前瀏覽器是否支持WebSocket技術，現如今大多數瀏覽器都支持
        if("WebSocket" in window){
            alert("您的瀏覽器支持WebSocket技術");
            //地址使用webSocket協議
             socket = new WebSocket("ws://localhost:8080/WebSocket");
        }else{
            alert("您的瀏覽器不支持WebSocket技術");
        }

        //建立連接的時候將會觸發
        socket.onopen = function () {
            console.log("建立連接");
        }

        //服務器發送返回數據到客戶端的時候觸
        socket.onmessage = function (evt) {
            var received_msg = evt.data;
            console.log("收到信息:" + received_msg);
        }

        //socket出錯的時候觸發
        socket.onerror = function () {
            console.log("網頁發送異常!");
        }

        //斷開連接的視乎觸發
        socket.onclose = function () {
            console.log("斷開連接");
        }

        //關閉socket
        socket.onbeforeunload = function () {
            socket.close();
        }

</script>
<body>
    測試WebSocket
</body>
</html>

1）項目啓動

2）postMan測試路徑：localhost:8080/testWebSocket/webSocket

3）網頁測試路徑：http://localhost:8080/webSocket/openOneSocket/toSocketPage

4）訪問頁面地址，建立WebSocket連接，瀏覽器控制檯顯示“建立連接”成功，IDEA控制檯顯示打印日誌，正常顯示當前當前通信訪問人數