serset
/
Sers


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务限流</title>
    <script src="Scripts/vue/vue.js"></script>
    <script src="Scripts/jquery/jquery.min.js"></script>

 
    <script src="Scripts/Sers/sers.apiClient.js"></script>
    <script src="Scripts/Sers/sers.apiClient.rateLimit.js"></script>

    <style>

        .line {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    </style>
</head>

<body>

    <h1>服务限流</h1>

    <div id="items">

        <div v-for="item in items" style="width:300px;height:400px; float:left;margin:2px;padding:4px;word-wrap:break-word;" class="line">
            [{{item.rateLimitKey}}]<br />
            Type:{{item.rateLimitType}}     <br />

            操作：<a href="#" @click="remove(item)">移除</a>
            <a href="#" @click="refresh(item)">刷新</a><br />
            -----------------------<br />
            {{item}}

        </div>

    </div>

    <div style="clear:both;padding-top:10px;">
        <a href="javascript:startRefreshTask();">启动自动刷新</a> <a href="javascript:stopRefreshTask();">关闭自动刷新</a><br />
        task config:  <a href="javascript:addItem();">添加项目</a><br />
        <textarea id="txtItemConfig" v-model="config" rows="10" cols="100"></textarea>
        <br />


    </div>
    <script>
        var apiClient = sers.apiClient.rateLimit;

        var items = new Vue({
            el: '#items',
            data: {
                items: []
            }, methods: {
                remove: function (item) {
                    apiClient.remove(item.rateLimitKey, afterApiCalled);
                }, refresh: function (item) {
                    rendStations();
                }
            }
        });

        function afterApiCalled(apiReturn) {

            if (!apiReturn.success) {
                console.log(apiReturn);
                alert('调用失败。' + ((apiReturn.error || {}).errorMessage || ''));
                return;
            }

            rendStations();
        }


        function rendStations() {
            apiClient.getAll(function (data) {
                items.items = data.data;
            });
        }
        rendStations();


        var config = new Vue({
            el: '#txtItemConfig',
            data: {
                config: '{ "rateLimitType": "FixedWindow","rateLimitKey": "rate", "reqLimit": 1000, "msInterval": 1000}'
            }
        });

        function addItem() {
            var taskConfig = config.config;
            try {
                taskConfig = eval('(' + taskConfig + ')');
            } catch (e) {
                alert('出错：json格式不正确。' + e.messgge);
                return;
            }
            apiClient.add(taskConfig, afterApiCalled);
        }


        var intervals = [];
        function startRefreshTask() {
            var interval = setInterval(rendStations, 500);
            intervals.push(interval);
        }
        function stopRefreshTask() {
            for (var t in intervals) {
                clearInterval(intervals[t]);
            }
            intervals = [];
        }
        //startRefreshTask();

    </script>

    <br><br>
    rateLimitType:限流规则名称,一般对应一个类。目前支持:"FixedWindow"<br>
    rateLimitKey:限流项名称，必须唯一<br>

    <br>FixedWindow-固定时间窗口限流:<br>
    reqLimit:时间窗口内最大请求数<br>
    msInterval:时间窗口ms 


</body>

</html>