用200行代码实现web框架

type Handler=(ctx: Context) => Promise<void> | void;

class Router {
    // 默认路由
    uri: string = '';
    // 子级路由
    childrenRoute:Map<string, Router> = new Map<string, Router>();
    // 中间件处理函数
    middleware:Handler[] = [];

    constructor(u: string) {
        this.uri = u ?? '';
    }
    // 挂载自定义路由
    hook(r: Router) {
        this.childrenRoute.set(r.uri, r);
    }
    // 挂载中间件
    use(...a:Handler[]) {
        this.middleware.push(...a);
    }
    // get请求
    get(uri: string, ...params: Handler[]) {
        return this.any('GET', uri, ...params);
    }
    // ...
    // 默认路由加载
    any(method: string, uri: string, ...handler: Handler[]) {
        if (uri.indexOf('/') == 0) uri = uri.substr(1);
        const uris = uri.split('/');
        let r: Router = this;
        // 如果添加的为多级路由, 则拆分挂载
        for(let u of uris) {
            let nr = new Router(u);
            r.childrenRoute.set(u, nr);
            r = nr;
        }

        r.middleware.push(...handler);
        return r;
    }

    // 路由分组
    group(prefix: string) {
        return this.any('ANY', prefix);
    }
    // 分组函数别名
    prefix(prefix: string) {
        return this.any('ANY', prefix);
    }
    
    // 实现路由查找及执行
    find(ctx: Context, uris?: string[]) {
        uris = uris ?? ctx.url.substr(1).split('/');
        let r: Router|null = this;
        ctx.middleware.push(...r?.middleware ?? []);
        // 查询递归执行子路由
        for(let i in uris) {
            console.log(this.middleware);
            // 查询下一级路由
            r = r?.childrenRoute.get(uris[i]) ?? null;
            ctx.middleware.push(...r?.middleware ?? []);
        }
        // 如果没有查到最后的路由, 手动添加404处理
        if (!r) ctx.middleware.push(async (ctx) => {
            ctx.statusCode = 404;
            ctx.send('Not found');
        });
        // 开始依次执行中间件
        ctx.next();
    }
}

// 核心app类继承路由, 即为全局根路由
class Application extends Router {
    server: http.Server;
    timeout: number = 0;
    errorHandler: (err: Error, ctx: Context) => Promise<void>;
    constructor() {
        // 初始化根路由
        super("");
        // 默认错误处理函数
        this.errorHandler = async (err, ctx) => {
            ctx.statusCode = 500;
            ctx.send(err.stack ?? 'server error');
        }
        // 创建服务
        this.server = http.createServer((req, res) => {
            // 初始化上下文
            const ctx = new Context(req, res);
            // 绑定处理函数
            ctx.errorHandler = this.errorHandler;
            // 设置超时
            if (this.timeout > 0) ctx.timeout(this.timeout);
            // 路由查找处理
            this.find(ctx);
        });
    }
    // 监听
    listen(addr: string) {
        this.server.listen(addr);
    }
}

import * as http from 'http';

class Context {
    // 原生请求
    request: http.IncomingMessage;
    // 原生响应
    response: http.ServerResponse;
    query: any;
    body: any;
    url: string;
    method: string;
    // 是否已返回请求
    isEnd: boolean = false;
    // 中间件执行计数
    nextInx: number = -1;
    // 设置响应码
    statusCode:number = 200;
    // 当前路由的全部执行函数
    middleware:Handler[] = [];
    // 错误处理
    errorHandler: (err: Error, ctx: Context) => Promise<void>;
    responseHeader: Map<String, string> = new Map<String, string>();
    // 初始化上下文
    constructor(req: http.IncomingMessage, res: http.ServerResponse) {
        this.request = req;
        this.response = res;
        this.url = req.url ?? "";
        this.method = req.method?.toLocaleUpperCase() ?? "GET";
        this.errorHandler = async (err, ctx) => {};
    }
    // 超时处理
    timeout(time: number){
        if (time <= 0) return;
        setTimeout(() => {
            this.statusCode = 500;
            this.send("server timeout");
        }, time);
    }
    
    // 下一次执行原理
    next(info?: any) {
        // 如果next有内容, 则证明有显式错误, 及时处理
        if (info) {
            this.nextInx = this.middleware.length -1;
            this.errorHandler(info, this);
            return;
        }
        this.nextInx += 1;
        // 如果计数结束/响应结束, 则终止中间件执行
        if (this.nextInx >= this.middleware.length || this.isEnd) return;
        
        // 防止中间件错误
        try {
            this.middleware[this.nextInx](this);
        } catch (err) {
            this.nextInx = this.middleware.length -1;
            this.errorHandler(err, this);
        }
    }
    
    // 响应封装
    send(str: string) {
        if (this.isEnd) return;
        this.response.setHeader('Content-Type', 'text/plain; charset=utf-8');
        for(let key in this.responseHeader.keys()) {
            this.response.setHeader(key, this.responseHeader.get(key) ?? '');
        }
        this.response.statusCode = this.statusCode || 200;
        this.response.write(str);
        this.response.end();
        this.isEnd = true;
    }

    json(str: Object) {
        if (this.isEnd) return;
        this.response.setHeader('Content-Type', 'application/json; charset=utf-8');
        for(let key in this.responseHeader.keys()) {
            this.response.setHeader(key, this.responseHeader.get(key) ?? '');
        }
        this.response.statusCode = this.statusCode || 200;
        this.response.write(str);
        this.response.end();
        this.isEnd = true;
    }

    setHeader(key: string, value: string) {
        this.responseHeader.set(key, value);
    }
}

function main() {
    const root = new Application();
    root.use(async (ctx)=>{
        console.log("hello middleware");
        ctx.next();
    });
    
    const api = root.group('/api');
    
    api.get("/user", (ctx) => {
        console.log("hello");
        ctx.send("hello ctx");
    });
    
    const apiPrefix = api.prefix("/prefix");
    // 中间件及执行顺序
    apiPrefix.use(async (ctx) => {
        console.log("hello next");
        // ctx.json(`{"status": 200}`)
        ctx.next();
        console.log("hello next end");
    });
    // 测试执行顺序
    apiPrefix.get("/hello", async (ctx) => {
        console.log("hello prefix start");
        ctx.send("hello prefix ctx");
        console.log("hello prefix end");
    });
    // 测试超时
    apiPrefix.get("/timeout", async (ctx) => {
        console.log("hello timeout start");
    });
    // 测试错误捕获
    apiPrefix.get("/error", async (ctx) => {
        console.log("hello error start");
        throw new Error("error");
    });
    
    // 测试hook
    const r = new Router("hello");
    root.hook(r);
    
    root.errorHandler = async (err, ctx) => {
        ctx.statusCode = 500;
        ctx.send("server hello error");
    }
    root.listen('12345');
}

main();