java網絡編程 - java服務器推送技術系列方案實戰

時間  2020-07-10
標籤 java 網絡 編程 服務器 推送 技術 系列 方案 實戰 欄目 Java 简体版
原文   原文鏈接

前言
javascript

服務器推送技術(又名Comet)是創建在ARP基礎之上的一種很是實用的技術，它普遍應用於Web端，手機APP應用端等。具體不少場景都須要此技術的支撐，包括掃碼登陸、掃碼支付、網頁支付、端到端消息輪播推送、數據實時推送、金融數據實時刷新、圖表數據實時變化、即時通信等等都和此技術息息相關。css

咱們今天來介紹幾種經常使用的服務器推送技術方案及實戰。
html


Ajax短輪詢 - 拉模式java

基於Ajax(異步JS和XML)的定時輪詢。特色：實現簡單、短鏈接、數據同步不及時、對服務器資源會形成必定壓力。此模式普遍應用於：掃描登陸、掃碼支付、天氣更新等（騰訊、京東、阿里一直都在沿用此技術並日漸成熟和穩定）。jquery

image.png

Ajax長輪詢 - 拉模式ajax

基於HTTP長鏈接和AJAX長輪詢(long-polling)方式。特色：無需瀏覽器或APP端任何單獨插件支持、長鏈接，減小網絡(三次)握手和四次揮手、對服務器資源要求較高等。此模式經常使用於實時消息輪播、金融數據即時刷新、數據圖表實時刷新等。JAVA服務器端通常採用Servlet3支持的異步任務、延時結果（DeferedResult）等手段實現。
後端

image.png

SSE(Server Send Event) - 推模式瀏覽器

服務器主動推模式。特色：異步非阻塞、屢次實時消息的接收，瀏覽器或APP端可僅發起一次請求、冪等性、長鏈接等。此模式經常使用於網頁支付、掃碼支付等場景。JAVA服務器端採用Spring提供的SseEmitter等實現。服務器

image.png

EventSource - 推模式網絡

服務器主動推模式。特色：瀏覽器或APP端需支持或兼容EventSource服務器派發機制、長鏈接、一次請求，服務器持續屢次實時推送。此模式經常使用於對數據實時性要求較高的場景。

image.png

基於上面的瞭解和學習後，咱們就來先後端配合實戰一下以上系列的技術方案。


代碼實戰

1、EventSource - 推模式

/**
 * @author andychen https://blog.51cto.com/14815984
 * @description：EventSource服務器推送控制器類
*/
@Controller
@RequestMapping(value = "/es")
public class EventSourceController {
    private static final Logger log = LoggerFactory.getLogger(SSEController.class);

    @GetMapping("/index")
    public String index(){
        return "eventsource";
    }

    /**
     * 主動持久新聞推送的正確姿式
     * @param response 服務器推送響應
     */
    @RequestMapping("/push")
    public void pushNews(HttpServletResponse response){
        //設置推送內容類型爲事件流
        response.setContentType("text/event-stream");
        //消息流編碼格式
        response.setCharacterEncoding("utf-8");
        PrintWriter writer = null;
        try {
            //獲取流寫入器
            writer = response.getWriter();
            //連續20次推送消息到客戶端
            for (int i=0;i< Constant.WRITE_TIMES;i++){
                if(writer.checkError()){
                    log.error("錯誤發生，將結束推送...");
                    //數據固定格式：\n\n，雙換行符結尾
                    writer.write("data:end\n\n");
                    return;
                }
                Thread.sleep(2000);
                writer.write(this.buildSendData());
                writer.flush();
            }
            log.info("新聞推送達到閾值，將結束推送...");
            writer.write("data:end\n\n");
            writer.flush();
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if(null != writer){
                writer.close();
            }
        }
    }
    /**
     * 構建發送數據
     * @return
     */
    private String buildSendData(){
        String news = Utility.createNews();
        StringBuilder builder = new StringBuilder("");
        builder.append("retry:2000\n");
        builder.append("data:");
        builder.append(news);
        builder.append("\n\n");
        return builder.toString();
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>EventSource消息持續推技術</title>
    <link rel="stylesheet" href="/assets/css/index.css" type="text/css"/>
    <!--兼容低版本或不支持SSE的瀏覽器-->
    <script type="text/javascript" src="/assets/js/eventsource.min.js"></script>
</head>
<body>
    <div>
        <span class="title">EventSource消息持續推技術 - 演示</span>
    </div>
    <div>
        <div class="content">
            <p id="p_es"></p>
        </div>
    </div>
    <script type="text/javascript" src="/assets/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/index.js"></script>
    <script type="text/javascript">
        $(function () {
            ServerPush.eventSourcePush();
        });
    </script>
</body>
</html>
var ServerPush = {
    /**
     * Ajax短輪詢，定時拉取
     */
    shortLoopPull: function () {
        function pullNews(){
            $.get("/shortloop/pull", function (data) {
                console.log(data);
                $("#p_sloop").html(data);
            });
        }
        window.setInterval(pullNews, 1500);
    },
    /**
     * Ajax長輪詢，循環拉取
     */
    longLoopPull: function () {
        pull();
        function pull(){
            $.get("/longloop/pull", function (data) {
                console.log(data);
                $("#p_lloop").html(data);
                //再發起請求
                pull();
            });
        }
    },
    /**
     * SSE異步主動推送
     */
    ssePush: function () {
        $("#p_sse").html("正在拉取新聞...");
        $.ajax({
            type:'get',
            url:'/sse/push?clientId='+new Date().getTime(),
            dataType:'text',
            success:function (data) {
                console.log(data);
                //屢次推送的消息，經過"data:"固定格式(SseEmitter封裝)分開；
                let items = data.split('data:');
                let result = "";
                let len = items.length;
                $.each(items, function (i, item) {
                    result = result + item+"<br>";
                    if(i === len-1){
                        $("#p_sse").html(result);
                    }
                });
            },
            error: function (error) {
                $("#p_sse").html(error);
            }
        });
    },
    /**
     * EventSource服務器持續流推送
     */
    eventSourcePush: function () {
        $('#p_es').html("");
        //判斷是否支持SSE
        if(window.EventSource){
            let msg = "";
            let source = new EventSource("/es/push");
            /**
             * 通訊創建事件處理
             * @param e
             */
            source.onopen = function (e) {
                msg = "通訊鏈接已創建..";
                console.log(msg);
                $('#p_es').html(msg);
            };
            /**
             * 消息接收事件處理
             * @param e
             */
            source.onmessage = function (e) {
                let result = e.data;
                if(result === "end"){
                    msg = "服務器推送即將完成，中止中...";
                    console.log(msg);
                    $('#p_es').html(msg);
                    return;
                }
                let html = $('#p_es').html();
                $('#p_es').html(html+"<br>"+result);
            };
            /**
             * 異常發生事件處理
             * @param error
             */
            source.onerror = function (error) {
                msg = "通訊發生錯誤："+error;
                console.log(msg);
                $('#p_es').html(msg);
            }
        }else{
            $("#p_es").html("當前瀏覽器不支持SSE!");
        }
    }
};


2、SSE(Server Send Event) - 推模式

/**
 * @author andychen https://blog.51cto.com/14815984
 * @description：SSE服務器推送控制器類
*/
@Controller
@RequestMapping("/sse")
public class SSEController {
    private static final Logger log = LoggerFactory.getLogger(SSEController.class);
    /**
     * 推送請求集合
     */
    private static final Map<String, SseEmitterExt> requests = new ConcurrentHashMap<>();
    /**
     * 任務執行池
     */
    private ExecutorService taskPool = Executors.newFixedThreadPool(2);

    @GetMapping("/index")
    public String index(){
        return "sse";
    }

    /**
     * SSE主動異步新聞推送
     */
    @GetMapping(value = "/push")
    @ResponseBody
    public SseEmitter pushNews(String clientId){
        SseEmitterExt emitter = new SseEmitterExt();
        requests.put(clientId, emitter);
        //註冊移除事件
        emitter.onCompletion(new CompleteCallback(clientId));
        //放到任務池執行
        this.taskPool.submit(new PushTask(clientId));
        return emitter;
    }

    /**
     * 推送新聞任務
     */
    private static class PushTask implements Runnable{
        private final String clientId;

        public PushTask(String clientId) {
            this.clientId = clientId;
        }
        /**
         * 執行任務核心邏輯
         */
        @Override
        public void run() {
            String msg = null;
            try {
                SseEmitterExt emitter = requests.get(this.clientId);
                msg = "正在重新聞池爲您推送，請稍後...";
                emitter.send(msg);
                log.info(msg);
                Thread.sleep(5000);
                msg = "頭條："+ Utility.createNews();
                log.info(msg);
                emitter.send(msg);
                //完成推送
                emitter.complete();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 任務完成回調
     */
    private static class CompleteCallback implements Runnable{
        private final String clientId;
        public CompleteCallback(String clientId) {
            this.clientId = clientId;
        }
        @Override
        public void run() {
            requests.remove(this.clientId);
            log.info("已移除請求Id: "+this.clientId+" ...");
        }
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>SSE異步推技術</title>
    <link rel="stylesheet" href="/assets/css/index.css" type="text/css"/>
</head>
<body>
    <div>
        <span class="title">SSE異步推技術 - 演示</span>
    </div>
    <div>
        <div class="content">
            <p id="p_sse"></p>
        </div>
    </div>
    <script type="text/javascript" src="/assets/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/index.js"></script>
    <script type="text/javascript">
        $(function () {
            ServerPush.ssePush();
        });
    </script>
</body>
</html>
/**
 * @author andychen https://blog.51cto.com/14815984
 * @description：SSE擴展
*/
public class SseEmitterExt extends SseEmitter {
    /**
     * 擴展支持中文推送
     * @param outputMessage
     */
    @Override
    protected void extendResponse(ServerHttpResponse outputMessage) {
        outputMessage.getHeaders().setContentType(new MediaType("text", "event-stream", Charset.forName("utf-8")));
        super.extendResponse(outputMessage);
    }
}


3、Ajax長輪詢 - 拉模式

/**
 * @author andychen https://blog.51cto.com/14815984
 * @description：Ajax長輪詢控制類
*/
@Controller
@RequestMapping("/longloop")
public class LongLoopController {
    /**
     * 任務線程池: 一個請求一個後臺線程處理
     */
    private ExecutorService taskPool = Executors.newFixedThreadPool(1);

    @GetMapping("/index")
    public String index(){
        return "longloop";
    }
    /**
     * 長輪詢拉取新聞
     */
    @GetMapping(value = "/pull", produces = "text/html;charset=UTF-8")
    @ResponseBody
    public DeferredResult<String> pullNews(){
        final DeferredResult<String> dr = new DeferredResult<>();
        this.taskPool.submit(new Runnable() {
            @Override
            public void run() {
                //模擬等待5秒再返回結果
                try {
                    Thread.sleep(5000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                dr.setResult(Utility.createNews());
            }
        });
        return dr;
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Ajax長輪詢拉技術</title>
    <link rel="stylesheet" href="/assets/css/index.css" type="text/css"/>
</head>
<body>
    <div>
        <span class="title">Ajax長輪詢拉技術 - 演示</span>
    </div>
    <div>
        <div class="content">
            <p id="p_lloop"></p>
        </div>
    </div>
    <script type="text/javascript" src="/assets/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/index.js"></script>
    <script type="text/javascript">
        $(function () {
            ServerPush.longLoopPull();
        });
    </script>
</body>
</html>

4、Ajax短輪詢 - 拉模式

/**
 * @author andychen https://blog.51cto.com/14815984
 * @description：Ajax短輪詢控制類
*/
@Controller
@RequestMapping(value = "/shortloop", produces = "text/html;charset=UTF-8")
public class ShortLoopController {

    @GetMapping("/index")
    public String index(){
        return "shortloop";
    }

    /**
     * 短輪詢定時拉取新聞
     * @return
     */
    @GetMapping("/pull")
    @ResponseBody
    public String pullNews(){
        return Utility.createNews();
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Ajax短輪詢拉技術</title>
    <link rel="stylesheet" href="/assets/css/index.css" type="text/css"/>
</head>
<body>
    <div>
        <span class="title">Ajax短輪詢拉技術 - 演示</span>
    </div>
    <div>
        <div class="content">
            <p id="p_sloop"></p>
        </div>
    </div>
    <script type="text/javascript" src="/assets/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/index.js"></script>
    <script type="text/javascript">
        $(function () {
            ServerPush.shortLoopPull();
        });
    </script>
</body>
</html>


實現驗證

image.png

image.png

image.png

image.png

image.png


總結

以上僅爲經常使用的服務器推送技術設計實現，針對手機App端以前經常使用第三方推送服務極光來實現。還有實時性要求更高的即時通信協議WebSocket可實現相似IM(Web聊天系統、在線機器人客服系統等)的功能。下次咱們就來分享一下這塊的研究和一個設計實現。請持續關注！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程