Spring Boot + WebSocket 實時消息推送

一、任務(wù)要求

商家的后臺管理系統(tǒng)實現(xiàn)新訂單提醒推送功能，利用Spring Boot + WebSocket實時消息推送的方式進行實現(xiàn)。

二、實現(xiàn)代碼

WebSocket是基于事件(事件源、事件監(jiān)聽類&處理)方式實現(xiàn)的通訊操作，所以在實現(xiàn)中需要創(chuàng)建有一個專屬的WebSocket處理類，而后分別定義連接處理方法(使用@OnOpen注解)，通訊處理方法(使用@OnMessage注解)，錯誤處理方法(@OnError注解)以及關(guān)閉處理方法(@OnClose注解)，這樣當(dāng)用戶請求發(fā)送后就可以根據(jù)不同的請求狀態(tài)進行處理。

2.1 前端html代碼
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>WebSocket</title>
    </head>
    <body>
        <input id="url" type="text" size="60" value="ws://localhost:8080/web_socket/order_notification/M666666" />
        <button onclick="openWebSocket()">打開WebSocket連接</button>


        <button onclick="closeWebSocket()">關(guān)閉WebSocket連接</button>
    
        <div id="message"></div>
    </body>
    <script type="text/javascript">
     　 var websocket = null;
 　　function openWebSocket() {
      var url = document.getElementById('url').value.trim();
      //判斷當(dāng)前瀏覽器是否支持WebSocket
            if ('WebSocket' in window) {
            websocket = new WebSocket(url);
      } else {
            alert('當(dāng)前瀏覽器 Not support websocket')
      }
      //連接發(fā)生錯誤的回調(diào)方法
            websocket.onerror = function() {
            setMessageInnerHTML("WebSocket連接發(fā)生錯誤");
      };
      //連接成功建立的回調(diào)方法
            websocket.onopen = function() {
            setMessageInnerHTML("WebSocket連接成功");
      }
      //接收到消息的回調(diào)方法
            websocket.onmessage = function(event) {
            setMessageInnerHTML(event.data);
      }
      //連接關(guān)閉的回調(diào)方法
            websocket.onclose = function() {
            setMessageInnerHTML("WebSocket連接關(guān)閉");
      }
    }
    //監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
        window.onbeforeunload = function() {
        closeWebSocket();
    }
    //將消息顯示在網(wǎng)頁上
        function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    //關(guān)閉WebSocket連接
        function closeWebSocket() {
        websocket.close();
    }
  </script>
</html>
2.2 服務(wù)端代碼

引入依賴，我使用的是SpringBoot版本2.2.6.RELEASE，自動管理依賴版本

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

配置類WebSocketConfig，掃描并注冊帶有@ServerEndpoint注解的所有websocket服務(wù)端

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

/**
 * @author Alan Chen
 * @description 開啟WebSocket支持
 * @date 2020-04-08
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

新建WebSocketServer類，WebSocket服務(wù)端是多例的，一次WebSocket連接對應(yīng)一個實例

import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @author Alan Chen
 * @description 訂單通知
 * @date 2020-04-08
 */
@Component
@ServerEndpoint("/web_socket/order_notification/{merchantId}")
public class OrderNotificationWebSocket {

    static final ConcurrentHashMap<String, List<WebSocketClient>> webSocketClientMap= new ConcurrentHashMap<>();

    /**
     * 連接建立成功時觸發(fā)，綁定參數(shù)
     * @param session 與某個客戶端的連接會話，需要通過它來給客戶端發(fā)送數(shù)據(jù)
     * @param merchantId 商戶ID
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("merchantId") String merchantId){

        WebSocketClient client = new WebSocketClient();
        client.setSession(session);
        client.setUri(session.getRequestURI().toString());

        List<WebSocketClient> webSocketClientList = webSocketClientMap.get(merchantId);
        if(webSocketClientList == null){
            webSocketClientList = new ArrayList<>();
        }
        webSocketClientList.add(client);
        webSocketClientMap.put(merchantId, webSocketClientList);
    }

    /**
     * 連接關(guān)閉時觸發(fā)，注意不能向客戶端發(fā)送消息了
     * @param merchantId
     */
    @OnClose
    public void onClose(@PathParam("merchantId") String merchantId){
        webSocketClientMap.remove(merchantId);
    }

    /**
     * 通信發(fā)生錯誤時觸發(fā)
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("發(fā)生錯誤");
        error.printStackTrace();
    }

    /**
     * 向客戶端發(fā)送消息
     * @param merchantId
     * @param message
     */
    public static void sendMessage(String merchantId,String message){
        try {
            List<WebSocketClient> webSocketClientList = webSocketClientMap.get(merchantId);
            if(webSocketClientList!=null){
                for(WebSocketClient webSocketServer:webSocketClientList){
                    webSocketServer.getSession().getBasicRemote().sendText(message);
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
            throw new RuntimeException(e.getMessage());
        }
    }

}

輔助類

import lombok.Data;

import javax.websocket.Session;

/**
 * @author Alan Chen
 * @description WebSocket客戶端連接
 * @date 2020-04-08
 */
@Data
public class WebSocketClient {

    // 與某個客戶端的連接會話，需要通過它來給客戶端發(fā)送數(shù)據(jù)
    private Session session;

    //連接的uri
    private String uri;

}

新建一個測試類，用于向客戶端發(fā)送推送消息

import com.yh.supermarket.manage.websocket.OrderNotificationWebSocket;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;


/**
 * @author Alan Chen
 * @description
 * @date 2020-04-08
 */
@Api(tags = "WebSocket-test")
@RestController("notification")
public class OrderNotificationWebSocketController {

    @ApiOperation("通知test")
    @GetMapping
    public void test(@RequestParam String merchantId){
        OrderNotificationWebSocket.sendMessage(merchantId,"有新訂單啦");
    }
}

三、推送消息測試

1、 啟動服務(wù)器程序，提供WebSocket服務(wù)。

2 、打開前端html客戶端頁面，連接WebSocket服務(wù)器。

連接WebSocket服務(wù)器

3、向客戶端發(fā)送推送消息


向客戶端發(fā)送推送消息

4、客戶端收到新訂單推送消息


客戶端收到新訂單推送消息

四、Nginx部署支持WebSocket的配置

當(dāng)我們在本地開采用WebSocket用IP連接時是OK的，例如

ws://39.108.*.186:8002/web_socket/order_notification/123

當(dāng)我們上線后，用Nginx部署，并用域名連接時就會失敗。此時只需要在Nginx配置文件里加入一些配置即可。配置如下

server{
  listen 80;
  server_name test.com  www.test.com;

  # 訪問WebSocket
  location /web_socket{
    proxy_pass http://47.*.27.1:8002;
    proxy_set_header Host $host;
    #啟用支持websocket連接
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

.....

參考文章
Websocket實時推送消息

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容