從構建分散式秒殺系統聊聊WebSocket推送通知

来源:https://www.cnblogs.com/smallSevens/archive/2018/07/19/9333000.html
-Advertisement-
Play Games

前言 秒殺架構到後期，我們採用了消息隊列的形式實現搶購邏輯，那麼之前拋出過這樣一個問題：消息隊列非同步處理完每個用戶請求後，如何通知給相應用戶秒殺成功？ 場景映射 首先，我們舉一個生活中比較常見的例子：我們去銀行辦理業務，一般會選擇相關業務列印一個排號紙，然後就可以坐在小板凳上玩著手機，等待被小喇叭報 ...


前言

秒殺架構到後期，我們採用了消息隊列的形式實現搶購邏輯，那麼之前拋出過這樣一個問題：消息隊列非同步處理完每個用戶請求後，如何通知給相應用戶秒殺成功？

場景映射

首先，我們舉一個生活中比較常見的例子：我們去銀行辦理業務，一般會選擇相關業務列印一個排號紙，然後就可以坐在小板凳上玩著手機，等待被小喇叭報號。當小喇叭喊到你所持有的號碼，就可以拿著排號紙去櫃臺辦理自己的業務。

這裡，假設當我們取排號紙的時候，銀行根據時間段內的排隊情況，比較人性化的提示用戶：排隊人數較多，您是否繼續等待？否的話我們可以換個時間段再來辦理。

由此我們把生活場景映射到真實的秒殺業務邏輯中來：

  • 我們可以把櫃臺比喻成商品下單處理邏輯單元
  • 拿到排號紙說明你進入相應商品處理隊列
  • 拿到排號紙的請求直接返回前臺，提示用戶搶購進行中
  • 排號紙進入隊列後，等待商品業務處理邏輯
  • 小喇叭叫到自己的排號相當於服務端通知用戶秒殺成功，這時候可以進行支付邏輯
  • 那些拿不到票號的同學，相當於隊列已滿直接返回秒殺失敗

解決方案

通過上面的場景，我們很容易能夠想到一種方案就是服務端通知，那麼如何做到服務端非同步通知的呢？下麵，主角開始登場了，就是我們的Websocket。

WebSocket是HTML5開始提供的一種瀏覽器與伺服器間進行全雙工通訊的網路技術。依靠這種技術可以實現客戶端和伺服器端的長連接，雙向實時通信。

HTTP VS WebSocket

特點:

  • 非同步、事件觸發
  • 可以發送文本，圖片等流文件
  • 數據格式比較輕量，性能開銷小，通信高效
  • 使用ws或者wss協議的客戶端socket，能夠實現真正意義上的推送功能

缺點：

  • 部分瀏覽器不支持，瀏覽器支持的程度與方式有區別，需要各種相容寫法。

集成案例

由於我們的秒殺架構項目案例中使用了SpringBoot，因此集成webSocket也是相對比較簡單的。

首先pom.xml引入以下依賴：

<!-- webSocket 秒殺通知-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocketConfig 配置：

/**
 * WebSocket配置
 * 創建者  爪哇筆記
 * 創建時間 2018年5月29日
 */
@Configuration  
public class WebSocketConfig {  
    @Bean  
    public ServerEndpointExporter serverEndpointExporter() {  
        return new ServerEndpointExporter();  
    }  
}

WebSocketServer 配置：

@ServerEndpoint("/websocket/{userId}")
@Component
public class WebSocketServer {
    private final static Logger log = LoggerFactory.getLogger(WebSocketServer.class);
    //靜態變數，用來記錄當前線上連接數。應該把它設計成線程安全的。
    private static int onlineCount = 0;
    //concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();

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

    //接收userId
    private String userId="";
    /**
     * 連接建立成功調用的方法*/
    @OnOpen
    public void onOpen(Session session,@PathParam("userId") String userId) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //線上數加1
        log.info("有新視窗開始監聽:"+userId+",當前線上人數為" + getOnlineCount());
        this.userId=userId;
        try {
             sendMessage("連接成功");
        } catch (IOException e) {
            log.error("websocket IO異常");
        }
    }

    /**
     * 連接關閉調用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //從set中刪除
        subOnlineCount();           //線上數減1
        log.info("有一連接關閉！當前線上人數為" + getOnlineCount());
    }

    /**
     * 收到客戶端消息後調用的方法
     * @param message 客戶端發送過來的消息*/
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("收到來自視窗"+userId+"的信息:"+message);
        //群發消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("發生錯誤");
        error.printStackTrace();
    }
    /**
     * 實現伺服器主動推送
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
    /**
     * 群發自定義消息
     * */
    public static void sendInfo(String message,@PathParam("userId") String userId){
        log.info("推送消息到視窗"+userId+"，推送內容:"+message);
        for (WebSocketServer item : webSocketSet) {
            try {
                //這裡可以設定只推送給這個userId的，為null則全部推送
                if(userId==null) {
                    item.sendMessage(message);
                }else if(item.userId.equals(userId)){
                    item.sendMessage(message);
                }
            } catch (IOException e) {
                continue;
            }
        }
    }

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

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

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

KafkaConsumer 消費配置，通知用戶是否秒殺成功：

/**
 * 消費者 spring-kafka 2.0 + 依賴JDK8
 * @author 科幫網 By https://blog.52itstyle.com
 */
@Component
public class KafkaConsumer {
    @Autowired
    private ISeckillService seckillService;
    
    private static RedisUtil redisUtil = new RedisUtil();
    /**
     * 監聽seckill主題,有消息就讀取
     * @param message
     */
    @KafkaListener(topics = {"seckill"})
    public void receiveMessage(String message){
        //收到通道的消息之後執行秒殺操作
        String[] array = message.split(";"); 
        if(redisUtil.getValue(array[0])!=null){//control層已經判斷了，其實這裡不需要再判斷了
            Result result = seckillService.startSeckil(Long.parseLong(array[0]), Long.parseLong(array[1]));
            if(result.equals(Result.ok())){
                WebSocketServer.sendInfo(array[0].toString(), "秒殺成功");//推送給前臺
            }else{
                WebSocketServer.sendInfo(array[0].toString(), "秒殺失敗");//推送給前臺
                redisUtil.cacheValue(array[0], "ok");//秒殺結束
            }
        }else{
            WebSocketServer.sendInfo(array[0].toString(), "秒殺失敗");//推送給前臺
        }
    }
}

webSocket.js 前臺通知邏輯：

$(function(){
    socket.init();
});
var basePath = "ws://localhost:8080/seckill/";
socket = {
    webSocket : "",
    init : function() {
        //userId：自行追加
        if ('WebSocket' in window) {
            webSocket = new WebSocket(basePath+'websocket/1'); 
        } 
        else if ('MozWebSocket' in window) {
            webSocket = new MozWebSocket(basePath+"websocket/1");
        } 
        else {
            webSocket = new SockJS(basePath+"sockjs/websocket");
        }
        webSocket.onerror = function(event) {
            alert("websockt連接發生錯誤，請刷新頁面重試!")
        };
        webSocket.onopen = function(event) {
            
        };
        webSocket.onmessage = function(event) {
            var message = event.data;
            alert(message)//判斷秒殺是否成功、自行處理邏輯
        };
    }
}

客戶端API

客戶端與伺服器通信

  • send() 向遠程伺服器發送數據
  • close() 關閉該websocket鏈接

監聽函數　

  • onopen 當網路連接建立時觸發該事件
  • onerror 當網路發生錯誤時觸發該事件
  • onclose 當websocket被關閉時觸發該事件
  • onmessage 當websocket接收到伺服器發來的消息的時觸發的事件，也是通信中最重要的一個監聽事件。

readyState屬性

這個屬性可以返回websocket所處的狀態。

  • CONNECTING(0) websocket正嘗試與伺服器建立連接
  • OPEN(1) websocket與伺服器已經建立連接
  • CLOSING(2) websocket正在關閉與伺服器的連接
  • CLOSED(3) websocket已經關閉了與伺服器的連接

開源方案

goeasy

GoEasy實時Web推送，支持後臺推送和前臺推送兩種：後臺推送可以選擇Java SDK、 Restful API支持所有開發語言；前臺推送：JS推送。無論選擇哪種方式推送代碼都十分簡單（10分鐘可搞定）。由於它支持websocket 和polling兩種連接方式所以兼顧大多數主流瀏覽器，低版本的IE瀏覽器也是支持的。

地址：http://goeasy.io/

Pushlets

Pushlets 是通過長連接方式實現“推”消息的。推送模式分為：Poll（輪詢）、Pull（拉）。

地址：http://www.pushlets.com/

Pushlet

Pushlet 是一個開源的 Comet 框架,Pushlet 使用了觀察者模型：客戶端發送請求，訂閱感興趣的事件；伺服器端為每個客戶端分配一個會話 ID 作為標記，事件源會把新產生的事件以多播的方式發送到訂閱者的事件隊列里。

地址：https://github.com/wjw465150/Pushlet

總結

其實前面有提過，儘管WebSocket有諸多優點，但是，如果服務端維護很多長連接也是挺耗費資源的，伺服器集群以及覽器或者客戶端相容性問題，也會帶來了一些不確定性因素。大體瞭解了一下各大廠的做法，大多數都還是基於輪詢的方式實現的，比如：騰訊PC端微信掃碼登錄、京東商城支付成功通知等等。

有些小伙伴可能會問了，輪詢豈不是會更耗費資源？其實在我看來，有些輪詢是不可能穿透到後端資料庫查詢服務的，比如秒殺，一個緩存標記位就可以判定是否秒殺成功。相對於WS的長連接以及其不確定因素，在秒殺場景下，輪詢還是相對比較合適的。

思考

最後，思考一個問題：100件商品，假如有一萬人進行搶購，該如何設置隊列長度？

秒殺案例：https://gitee.com/52itstyle/spring-boot-seckill

參考

https://blog.52itstyle.com/archives/736/

https://www.xoriant.com/blog/mobility/websocket-web-stateful-now.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 火狐瀏覽器下，td 直接使用position:relative;和background:;產生的邊框消失問題
    消失示例： 問題原因： 我的理解是各個瀏覽器之間對於background-clip:border-box;的解析不同，導致定位時背景的切割位置不同 解決方法1.0 在td上加上z-index:-1; 解決方法2.0 利用背景切割來決定背景的邊界，從而達到不覆蓋邊框效果 td{ background- ...
  • JavaScript: window.onload = function() {} 裡面的函數不執行
    問題：寫了一個最簡單的頁面。在script標簽中使用的 window.onload = function() { function add() { //... } } 頁面上：<div onclick="add()"></div> 但是，函數不僅沒有觸發，同時控制台報錯：add() is not d ...
  • JQuery傳值,接收PrintWriter的int接收不了
    <servlet>中的代碼 <JSP中的代碼> 很苦惱,我想要,<servlet>中傳入的(0),在<jsp>中接收到這個參數,然後進行判斷,從而達到判斷目的, 然而這邊接收的時候數據類型好像發生了改變,不知道怎麼搞, 目前只能先用json處理 吧 ...
  • 不再手寫import - VSCode自動引入Vue組件和Js模塊
    如要自動引入Vue組件，首先需安裝VSCode拓展： Vetur 自動引入Vue組件和普通Js模塊 在根目錄添加 jsconfig.json 。 每次修改jsconfig.json後需重啟該VSCode視窗 支持Webpack別名路徑 同上，需更新 jsconfig.json 在JS中自動引入nod ...
  • JS常見內置對象和方法
    JS中常用的內置對象：Array對象、Date對象、正則表達式對象、string對象、Global對象 Array對象中常用方法： concat（） 表示把幾個數組合併成一個數組join（） 設置分隔符連接數組元素為一個字元串 pop（） 移除數組最後一個元素shift（） 移除數組中第一個元素 s ...
  • 用FileReader對象獲取圖片base64代碼並預覽
    MDN中FileReader的詳細介紹： https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 用FileReader獲取圖片base64，併在頁面預覽： ...
  • 小程式實踐（八）：驗證碼倒計時功能
    效果如下：點擊發送驗證碼按鈕，按鈕背景變色，不可點擊，顯示倒計時文字 首先js文件的data裡面 聲明一個變數用於表示當前是否可以點擊，codeIsCanClick = true, 預設是可以點擊的 寫下界面代碼： wxml文件中 對應樣式 wxss文件： 以上構成頁面靜態效果。 註意button有 ...
  • 前端經常遇到的的問題
    一、關於樣式（CSS） 1、Input 1）Input可編輯可下拉 2）Input下拉 3）Input邊線點擊不顯示 input點擊邊框樣式無效 4）提示文字：placeholder="手機號" input修改提示文字顏色 5）input出現背景是黃色 這種點擊框也不會出現黃色了 還有一種就是關閉自 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類