快捷導(dǎo)航

SpringBoot使用WebSocket實現(xiàn)前后端交互的操作方法

更新時間：2022年04月07日 15:02:36 作者：heaven096

springboot使用websocket有兩種方式，一種是實現(xiàn)簡單的websocket，另外一種是實現(xiàn)STOMP協(xié)議，本篇講述如何使用springboot實現(xiàn)簡單的websocket，需要的朋友可以參考下

背景

我們都知道http協(xié)議只能在瀏覽器單方面向服務(wù)器發(fā)起請求時獲得響應(yīng)，然而服務(wù)器不能主動向瀏覽器推送消息，想要實現(xiàn)瀏覽器的主動推送目前有兩種主流的實現(xiàn)方式：

輪詢：缺點很多，但是實現(xiàn)簡單
websocket: 在瀏覽器和服務(wù)器之間建立TCP連接，實現(xiàn)全雙工通信
springboot使用websocket有兩種方式，一種是實現(xiàn)簡單的websocket，另外一種是實現(xiàn)STOMP協(xié)議。本篇講述如何使用springboot實現(xiàn)簡單的websocket。

實現(xiàn)

一、導(dǎo)入依賴

直接在pom.xml中導(dǎo)入依賴。

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

二、新建WebSocket配置類，注入Bean

首先注入一個ServerEndpointExporterBean，該Bean會自動注冊使用@ServerEndpoint注解申請的websocket endpoint,代碼如下：

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

三、新建WebSocket服務(wù)端，在其中處理websocket邏輯

@Component  //注冊到容器中
@ServerEndpoint("/webSocket")  //接收websocket請求路徑
@Slf4j
public class WebSocket {
    //當(dāng)前連接（每個websocket連入都會創(chuàng)建一個WebSocket實例）
    private Session session;
    //定義一個websocket容器存儲session,即存放所有在線的socket連接
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
    //處理連接建立
    @OnOpen
    public void opOpen(Session session){
        this.session = session;
        log.info("【有新的客戶端連接了】：{}",session.getId());
        webSocketSet.add(this);  //將新用戶加入在線組
        log.info("【websocket消息】有新的連接，總數(shù)：{}",webSocketSet.size());
    }
    //處理連接關(guān)閉
    @OnClose
    public void Onclose(){
        webSocketSet.remove(this);
        log.info("【websocket消息】連接斷開，總數(shù)：{}",webSocketSet.size());
    //接受消息
    @OnMessage
    public void onMessage(String message){
        log.info("【websocket消息】收到客戶端發(fā)來的消息：{}",message);
    // 群發(fā)消息
    public void sendMessage(String message) {
        for (WebSocket webSocket : webSocketSet) {
            log.info("【websocket消息】廣播群發(fā)消息,message={}",message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            }catch (Exception e){
                e.printStackTrace();
            }
        }
}

四、客戶端實現(xiàn)，可以借助FreeMarker模板工具直接寫在ftl文件里。

由于部分瀏覽器可能不支持，可以先測試，代碼如下：

<script>
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket('ws://localhost:8080/webSocket');
    }else{
        alert('當(dāng)前瀏覽器不支持websocket消息通知');
    }
    //連接成功建立的回調(diào)方法
    websocket.onopen = function (event) {
        console.log("ws建立連接成功");
    //連接關(guān)閉的回調(diào)方法
    websocket.onclose = function (event) {
        console.log("ws連接關(guān)閉");
    //接收到消息的回調(diào)方法
    websocket.onmessage = function (event) {
        /*setMessageInnerHTML(event.data);*/
       // alert("ws接收返回消息："+event.data);
        console.log("服務(wù)器返回消息： " + event.data);
        //彈窗提醒(要用到JQuary,所以要先引入JQuary)   播放音樂
        $('#mymodal').modal('show')
    //連接發(fā)生錯誤的回調(diào)方法
    websocket.onerror = function(event){
        alert('websocket通信發(fā)生錯誤！')
    //監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
    window.onbeforeunload = function() {
        websocket.close();
    </script>

五、測試

（項目實現(xiàn)客戶創(chuàng)建新訂單之后，前臺發(fā)出提醒）

@Autowired
private WebSocket webSocket;
@Override
    @Transactional
    public OrderDTO create(OrderDTO orderDTO) {//創(chuàng)建訂單
        。。。。（具體代碼省略）
       //創(chuàng)建新訂單  發(fā)送websocket消息
        webSocket.sendMessage(orderDTO.getOrderId());
        return orderDTO;
    }

添加新訂單：