使用Visual Studio Code和typescript 开发调试React Native项目

近来,因为各个因素,你必须对一个伸手或者措施开展频率上的走访限制。
例如,
你对外提供了一个API接口,注册用户每分钟最多可以调用100次,非注册用户每秒钟最多可以调用10次。
例如,
有一个非常吃服务器资源的形式,在同样时刻不可能跨越10私家调用这一个方法,否则服务器满载。
比如说, 有一部分与众不同的页面,访客并不可以反复的造访或发言。
比如, 秒杀活动等展开。
诸如
,防范DDOS,当达到自然频率后调用脚本iis服务器ip黑名单,防火墙黑名单。
如上各种的比喻,也就是说,如何从一个断面的角度对调用的法门开展频率上的限制。而对功用限制,服务器层面都有最直白的化解办法,现在本身说的则是代码层面上的效用管控。

关于React Native的详实介绍自己就不叙述了,他是使用js构建原生app的支出框架。一遍变编码多平台运行,非常强大。可是个人不喜欢js的过分灵活(弱类型)的语法。强大的强类型语言Typescript(简称TS)是本身的首选,他得以编译成JavaScript,编译成的JavaScript代码可读性很好,不过这不是任重而道远,关键是TS支出和调试功能极高。
但是React Native合法是运用js的支出的,倘若假定利用TS开发React
Native的第一是transformer
eact-native结合的要害是应用转换器

本文给出三个示范,一个是遵照单机环境的贯彻,第二个则是依照分布式的Redis实现

开始化项目

react-native init YahuiApp
cd YahuiApp
yarn add –dev react-native-typescript-transformer typescript
@types/react @types/react-native


用vscode打开 添加配置文件

以率先个API接口需求为例,先说下单机环境下的贯彻。
依据惯性思维,我们当然会想到缓存的逾期策略这种艺术,但是严谨来讲就HttpRuntime.Cache而言,通过缓存的过期策略来对请求进行频率的面世控制是不合适的。
  HttpRuntime.Cache
是应用程序级另外Asp.Net的缓存技术,通过这一个技能可以讲明几个缓存对象,可以为各样对象设置过期时间,当过期时刻到达后该缓存对象就会消退(也就是当你拜访该指标的时候为Null)

配置Typescript

新建文件 tsconfig.json内容为

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es2015",
        "moduleResolution": "node",
        "jsx": "react-native",
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "watch": true,
        "allowSyntheticDefaultImports": true
    },
    "filesGlob": [
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "index.android.js",
        "index.ios.js",
        "build",
        "node_modules"
    ]
}

新建文件 tslint.json 内容为

{
    "rules": {
        "class-name": false,
        "comment-format": [
            true,
            "check-space"
        ],
        "indent": [
            true,
            "spaces"
        ],
        "no-duplicate-variable": true,
        "no-eval": true,
        "no-internal-module": true,
        "no-trailing-whitespace": true,
        "no-unsafe-finally": true,
        "no-var-keyword": true,
        "one-line": [
            true,
            "check-open-brace",
            "check-whitespace"
        ],
        "quotemark": [
            true,
            "double"
        ],
        "semicolon": [
            true,
            "always"
        ],
        "triple-equals": [
            true,
            "allow-null-check"
        ],
        "typedef-whitespace": [
            true,
            {
                "call-signature": "nospace",
                "index-signature": "nospace",
                "parameter": "nospace",
                "property-declaration": "nospace",
                "variable-declaration": "nospace"
            }
        ],
        "variable-name": [
            true,
            "ban-keywords"
        ],
        "whitespace": [
            true,
            "check-branch",
            "check-decl",
            "check-operator",
            "check-separator",
            "check-type"
        ]
    }
}

  为何如此说吗?比如对某个方法(方法名:GetUserList)我们要开展1分钟最多10次的范围,现在我们就新建一个int型的Cache对象,然后设置1分钟后过期消失。那么每当访问GetUserList方法前,大家就先判断这一个Cache对象的值是否超出10,若是超越10就不执行GetUserList方法,虽然低于10则允许实施。每当访问该对象的时候即便不存在或者逾期就新建,这样循环,则该对象永远不容许超越10。

配置React Native Packager

根目录新建rn-cli.config.js文件 内容为:
module.exports = {
getTransformModulePath() {
return require.resolve(‘react-native-typescript-transformer’);
},
getSourceExts() {
return [ ‘ts’, ‘tsx’ ]
}
};

1   if ((int)HttpRuntime.Cache["GetUserListNum"] > 10) //大于10请求失败
2   {
3      Console.WriteLine("禁止请求");
4   }
5   else
6   {
7      HttpRuntime.Cache["GetUserListNum"] = (int)HttpRuntime.Cache["GetUserListNum"] + 1; //否则该缓存对象的值+1
8      Console.WriteLine("允许请求");
9   }

编纂代码

在 src文件夹里新建main.tsc文件
代码为:

import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View
} from "react-native";
interface Props {

}
interface State {

}
export default class App extends Component<Props, State> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>
                    Welcome to React Native!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF",
    } as React.ViewStyle,

    text: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    } as React.TextStyle,
});

这样的合计及贯彻相对来说卓殊简单,可是遵照这样的一个模型设定,那么就会并发这种状况:

AppRegistry

import {
    AppRegistry,
} from 'react-native';
import App from "./src/main";

AppRegistry.registerComponent('YahuiApp', () => App);

迄今截至 您的采取TS开发React Native的项目环境搭建好了

 图片 1

 

如上图,每个点代表一遍访问请求,我在0秒的时候
新建了一个名字为GetUserListNum的缓存对象。
在0~0.5秒之内
我访问了3次,在0.5~1秒之内,我们访问了7次。此时,该对象消失,然后我们跟着访问,该目的重置为0.
              
 在第1~1.5秒之内,依旧访问了7次,在第1.5秒~2秒之内做客了3次。

基于这种简单缓存过期策略的模子,在这2分钟内,我们即使平均每分钟都访问了10次,满意这么些确定,可是尽管我们从中取一个之间段,0.5秒~1.5秒之内,也是1分钟,可是却实实在在的拜会了14次!远远超越了我们设置的
1分钟最多访问10次的 限制。

 

这就是说什么样正确的来缓解地点的问题吗?我们得以经过模拟对话级此外信号量这一手段,这也就是大家前几天的大旨了。
   什么是信号量?仅就以代码而言,  static
SemaphoreSlim semaphoreSlim = new SemaphoreSlim(5); 
它的情致就意味着在多线程意况下,在此外一整日,只可以同时5个线程去访问。

 

4容器4线程模型

今昔,在促成代码的事先我们先规划一个模子。

图片 2

  假若大家有一个用户A的管道,那一个管道里装着用户A的央求,比如用户A在一分钟发出了10次呼吁,那么每一个呼吁过来,管道里的要素都会多一个。不过我们设定这多少个管道最四只可以容纳10个因素,而且每个元素的存活期为1秒,1秒后则该因素消失。那么如此设计的话,无论是速率依然多少的突进,都会有管道长度的界定。这样一来,无论从哪一个刻钟节点依然时间距离出发,这些管道都能餍足我们的效用限制要求。

而这边的管道,就务须和会话Id来对号入座了。每当有新会话进来的时候就生成一个新管道。这一个会话id遵照自己场景所定,可以是sessionId,可以是ip,也可以是token。

那么既然这多少个管道是会话级另外,我们必将得需要一个器皿,来装这个管道。现在,我们以IP来定名会话管道,并把持有的管道都装载在一个器皿中,如图

图片 3

而基于刚才的设定,我们还索要对容器内的每条管道的元素举办处理,把过期的给删除掉,为此,还需要单独为该容器开辟出一个线程来为每条管道举行元素的清理。而当管道的因素为0时,大家就清掉该管道,以便节省容器空间。

 图片 4

自然,由于用户量多,一个器皿内可能存在上万个管道,那个时候只是用一个器皿来装载来清理,在效能上显然是不够的。这一个时候,我们就得对容器举行横向扩充了。

  比如,我们可以按照Cpu主题数自动生成对应的数码的器皿,然后依据一个算法,对IP来拓展导流。我当下cpu是4个逻辑主旨,就生成了4个容器,每当用户访问的时候,都会起头经过一个算法,这些算法会对IP举行拍卖,如192.168.1.11~192.168.1.13以此Ip段进第一个容器,xxx~xxx进第二个容器,依次类推,相应的,也就有了4个线程去分别处理4个容器中的管道。

图片 5

 

这就是说,最后就形成了俺们的4容器4线程模型了。

现今,着眼于编码实现:

  首先大家需要一个能承载那一个器皿的载体,这个载体类似于连接池的概念,可以依照一些亟需自动生成适应数量的器皿,假诺有特殊要求的话,还足以在容器上切出一个器皿管理的面,在线程上切出一个线程管理的面以便于实时监控和调度。倘若真要做如此一个系统,那么
容器的调度 和 线程的调度效率是必不可少的,而本Demo则是瓜熟蒂落了首要效率,像容器和线程在代码中本人也没剥离开来,算法也是直接写死的,实际设计中,对算法的宏图依旧很紧要的,还有多线程模型中,怎么样上锁才能让功用最大化也是关键的。

而这里为了案例的直观就径直写死成4个容器。

public static List<Container> ContainerList = new List<Container>(); //容器载体
static Factory()
{
     for (int i = 0; i < 4; i++)
     {
        ContainerList.Add(new Container(i));  //遍历4次  生成4个容器
     }
     foreach (var item in ContainerList)
     {
        item.Run();    //开启线程
     }
}

现行,我们假如 有编号为 0 到 40 这样的 41个用户。那么这一个导流算法
我也就直接写死,编号0至9的用户
将他们的伏乞给抛转到首个容器,编号10~19的用户
放到第二个容器,编号20~29放到第四个容器,编号30~40的用户放到第六个容器。

那么这些代码就是这般的:

 static Container GetContainer(int userId, out int i) //获取容器的算法
 {
     if (0 <= userId && userId < 10)    //编号0至9的用户  返回第一个容器  依次类推
     {
          i = 0;
          return ContainerList[0];
     }
     if (10 <= userId && userId < 20)
     {
          i = 1;
          return ContainerList[1];
     }
     if (20 <= userId && userId < 30)
     {
          i = 2;
          return ContainerList[2];
      }
      i = 3;
      return ContainerList[3];
  }

当我们的对话请求经过算法的导流之后,都不可能不调用一个措施,用于辨别管道数量。假使管道数量已经超越10,则呼吁败北,否则成功

  public static void Add(int userId)
  {
       if (GetContainer(userId, out int i).Add(userId))
            Console.WriteLine("容器" + i + " 用户" + userId + "  发起请求");
       else
            Console.WriteLine("容器" + i + " 用户" + userId + "  被拦截");
  }

接下去就是容器Container的代码了。

此地,对容器的选型用线程安全的ConcurrentDictionary类。
  线程安全:当六个线程同时读写同一个共享元素的时候,就会油然则生数量错乱,迭代报错等安全问提
  ConcurrentDictionary:除了GetOrAdd方法要慎用外,是.Net4.0专为解决Dictionary线程安全而出的新品类
  ReaderWriterLockSlim:较ReaderWriterLock优化的读写锁,六个线程同时做客读锁
或  一个线程访问写锁

private ReaderWriterLockSlim obj = new ReaderWriterLockSlim();  //在每个容器中申明一个读写锁
public ConcurrentDictionary<string, ConcurrentList<DateTime>> dic = new ConcurrentDictionary<string, ConcurrentList<DateTime>>(); //创建该容器 dic

下一场当你向容器添加一条管道中的数据是经过这么些艺术:

 public bool Add(int userId)
 {
     obj.EnterReadLock();//挂读锁,允许多个线程同时写入该方法
     try
     {
         ConcurrentList<DateTime> dtList = dic.GetOrAdd(userId.ToString(),t=>{ new ConcurrentList<DateTime>()}); //如果不存在就新建 ConcurrentList
         return dtList.CounterAdd(10, DateTime.Now); //管道容量10,当临界管道容量后 返回false
     }
     finally
     {
         obj.ExitReadLock();
     }
 }

 这里,为了在前边的线程遍历删除ConcurrentList的管道的时候保证ConcurrentList的安全性,所以这里要加读锁。

 而ConcurrentList,因为.Net没有生产List集合类的线程安全(此地自己表达下:之所以不用ConcurrentBag是因为要力保count和add的一致性,这里补充一下),所以自己新建了一个接续于List<T>的平安项目,在此间
封装了3个需要拔取的办法。

public class ConcurrentList<T> : List<T>
{
    private object obj = new object();

    public bool CounterAdd(int num, T value)
    {
        lock (obj)
        {
            if (base.Count >= num)
                return false;
            else
                base.Add(value);
            return true;
        }
    }
    public new bool Remove(T value)
    {
        lock (obj)
        {
            base.Remove(value);
            return true;
        }
    }
    public new T[] ToArray() 
    {
        lock (obj)
        {
            return base.ToArray();
        }
    }
}

最终就是线程的周转形式:

 public void Run()
 {
     ThreadPool.QueueUserWorkItem(c =>
     {
         while (true)
         {
             if (dic.Count > 0)
             {
                 foreach (var item in dic.ToArray())
                 {
                     ConcurrentList<DateTime> list = item.Value;
                     foreach (DateTime dt in list.ToArray())   
                     {
                         if (DateTime.Now.AddSeconds(-3) > dt)
                         {
                             list.Remove(dt);
                             Console.WriteLine("容器" + seat + " 已删除用户" + item.Key + "管道中的一条数据");
                         }
                     }
                     if (list.Count == 0)
                     {
                         obj.EnterWriteLock();
                         try
                         {
                             if (list.Count == 0)
                             {
                                 if (dic.TryRemove(item.Key, out ConcurrentList<DateTime> i))
                                 { Console.WriteLine("容器" + seat + " 已清除用户" + item.Key + "的List管道"); }
                             }
                         }
                         finally
                         {
                             obj.ExitWriteLock();
                         }
                     }
                 }

             }
             else
             {
                 Thread.Sleep(100);
             }
         }
     }
   );
 }

最终,是效果图,一个是依据控制台的,还一个是基于Signalr的。

 图片 6图片 7

分布式下Redis

地点介绍了一种频率限制的模型,分布式与单机相相比,无非就是载体不同,我们只要把这一个容器的载体从程序上移植出来,来弄成一个单身的服务仍旧间接借用Redis也是立竿见影的。

这边就介绍分布式情状下,Redis的落实。

不同于Asp.Net的多线程模型,大概因为Redis的各个类型的要素相当粒度的操作造成各种加锁的复杂性,所以在网络请求处理这块Redis是单线程的,基于Redis的贯彻则因为单线程的因由在编码角度不用太多着想到与逻辑无关的问题。

  简单介绍下,Redis是一个内存数据库,这么些数据库属于非关系型数据库,它的定义不同于一般的大家体会的Mysql
Oracle
SqlServer关系型数据库,它并未Sql没有字段名从未表名这多少个概念,它和HttpRun提姆e.Cache的概念差不多一样,首先从操作上属于键值对情势,就如
Cache[“键名”]
这样就能收获到值类似,而且可以对每个Key设置过期策略,而Redis中的Key所对应的值并不是想存啥就存啥的,它扶助五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及sorted
set(有序聚集)。

先天要说的是Sorted
set有序聚集,有序聚集相比此外的集合类型的特殊点在于,使用有序聚集的时候还是能给插入的因素指定一个
积分score,我们把这些积分score精通为排连串,它里面会对积分进行排序,积分允许再一次,而不变聚集中的元素则是绝无仅有。

  仍旧一如既往的思路,每当有用户访问的时候,都对该用户的
管道(有序聚集)中添加一个元素,然后设置该因素的积分为近日时间。接着在先后中开个线程,来对管道中积分小于约定时间的元素举办清理。因为规定有序聚集中的元素只可以是唯一值,所以在赋值方面只虽然知足uuid即可。

 图片 8

那么用Redis来实现的代码这就是类似这种:

图片 9

由此using语法糖实现IDisposable而包装的Redis分布式锁,然后中间正常的逻辑判断。

诸如此类的代码虽然也能成就功效,但不够自己。Redis是个按照内存的数据库,于性能而言,瓶颈在于网络
IO 上,与Get五次暴发五遍呼吁相相比较,能无法通过一段脚本来实现多数逻辑吗?

有的,Redis支持 Lua脚本:
  Lua
是一种轻量小巧的脚本语言,用标准C语言编写并以源代码格局开放,
其计划目标是为了放置应用程序中,从而为应用程序提供灵活的扩张和定制功用。
  大致意思就是,直接向Redis发送一段脚本或者让它直接本地读取一段脚本从而平昔促成所有的逻辑。

/// <summary>
/// 如果 大于10(AccountNum) 就返回1   否则就增加一条集合中的元素 并返回 空
/// </summary>
/// <param name="zcardKey"></param>
/// <param name="score"></param>
/// <param name="zcardValue"></param>
/// <param name="AccountNum"></param>
/// <returns></returns>
public string LuaAddAccoundSorted(string zcardKey, double score, string zcardValue, int AccountNum)
{
    string str = "local uu = redis.call('zcard',@zcardKey) if (uu >=tonumber(@AccountNum)) then return 1 else redis.call('zadd',@zcardKey,@score,@zcardValue)  end";
    var re = _instance.GetDatabase(_num).ScriptEvaluate(LuaScript.Prepare(str), new { zcardKey = zcardKey, score = score, zcardValue = zcardValue, AccountNum=AccountNum });
    return re.ToString();
}

local
uu就是注明一个为名uu的变量的趣味,redis.call就是redis命令,这段脚本意思就是假诺大于10(AccountNum) 就回来1   否则就大增一条集合中的元素 并重临 空。

管道内元素处理的点子就是:

 /// <summary>
 /// 遍历当前所有前缀的有序集合,如果数量为0,那么就返回1 否则 就删除 满足最大分值条件区间的元素,如果该集合个数为0则消失
 /// </summary>
 /// <param name="zcardPrefix"></param>
 /// <param name="score"></param>
 /// <returns></returns>
public string LuaForeachRemove(string zcardPrefix, double score)
 {
     StringBuilder str = new StringBuilder();
     str.Append("local uu = redis.call('keys',@zcardPrefix) "); //声明一个变量 去获取 模糊查询的结果集合
     str.Append("if(#uu==0) then");    //如果集合长度=0
     str.Append("   return 1 ");
     str.Append("else ");
     str.Append("   for i=1,#uu do ");   //遍历
     str.Append("       redis.call('ZREMRANGEBYSCORE',uu[i],0,@score) ");  //删除从0 到 该score 积分区间的元素
     str.Append("       if(redis.call('zcard',uu[i])==0) then ");  //如果管道长度=0
     str.Append("           redis.call('del',uu[i]) ");   //删除
     str.Append("       end ");
     str.Append("   end ");
     str.Append("end ");
     var re = _instance.GetDatabase(_num).ScriptEvaluate(LuaScript.Prepare(str.ToString()), new { zcardPrefix = zcardPrefix + "*", score = score });
     return re.ToString();

这2段代码通过发送Lua脚本的样式来成功了总体经过,因为Redis的网络模型原因,所以把LuaForeachRemove方法给提议来做个劳务来单独处理即可。至于那种多容器多线程的兑现,则一心可以开两个Redis的实例来实现。最终放上效果图。

图片 10

说到底,我把这个都给做成了个Demo。不过并未找到确切的上传网盘,所以我们可以留邮箱(留了就发),或者直接加QQ群文件自取,商量互换:166843154

 

我喜爱和自己同一的人交朋友,不被环境影响,自己是投机的名师,欢迎加群
.Net web互换群, QQ群:166843154 欲望与挣扎

 

作者:小曾
出处:http://www.cnblogs.com/1996V/p/8127576.html 欢迎转载,但任何转载必须保留完整文章及博客园出处,在显要地方显示署名以及原文链接。
.Net交流群, QQ群:166843154 欲望与挣扎 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图