Category: Web/JS

体验 Python FastAPI 的并发能力及线, 进程模型

2023-03-19 | 阅读(5,933)

本文进行实际测试 FastAPI 的并发能力，即同时能处理多少个请求，另外还能接收多少请求放在等待队列当中; 并找到如何改变默认并发数; 以及它是如何运用线程或进程来处理请求。我们可以此与 Flask 进行对比，参考 Python Flask 框架的并发能力及线,进程模型，是否真如传说中所说的 FastAPI 性能比 Flask 强, FastAPI 是否对得起它那道闪电的 Logo。

本文使用 JMeter 进行测试，测试机器为 MacBook Pro, CPU 6 核超线程，内存 16 Gb。

对于每一种类型 Web 服务基本的测试是每秒发送 2 个请求，连续发送 1000 个，500 秒发送完所有请求，程序中 API 方法接受到请求后 sleep 800 秒，保证在全部 1000 个请求送出之前一直占着连接，并有充足的时间对连接进行分析。在测试极端并发数时，由于在 Mac OS X 尽管设置了 ulimit 最多也只能创建 4000 多一点线程，所以在模拟更多用户数时，JMeter 在远程 Linux(Docker 或虚拟机) 上运行测试用例。

请求的 URL 是 http://localhost:8080/?id=${count}, 带一个自增序列用以识别不同的请求， JMeter 的 Thread Group 配置为 Number of Threads (users): 1000, Ramp-up period (seconds): 500 阅读全文 >>

远程方式执行 JMeter 测试

2023-02-18 | 阅读(690)

JMeter 是一个极好的测试 Web API 及压力测试的工具，另一个的话就是 Python 版的 LOCUST(它也能远程运行测试)。JMeter 的测试可以在本地模拟并发用户，那么为什么要远程执行 JMeter 测试呢？因为一台机器能模拟的并发用户数受限，一个用户就是对应着一个 Java 线程。比如我在 MacBook Pro(内存 16Gb) 上无论如何调整 ulimit -n, ulimit -u, 或用 JAVA_TOOL_OPTIONS, HEAP, JVM_ARGS 设置 -Xmx, 调大到 10 G, 或用 -Xss 调小栈大小，都无法让 JMeter 模拟的用户数达到 5000。

文后有本人亲自测试 Java/Python 在 Mac OS X 和 Linux 下可创建多少个线程

如果能够远程运行 JMeter 的测试就能突破单机上的线程限制了，比如 Mac OS X 不行，找个 Linux 远程机器(可以是虚拟机)来执行，一台机器不够，找多个。想要模拟 15000 个并发用户，测试可分配到 5 台机器上执行，每个节点跑 3000 个用户并发就行，有点操控肉机的感觉。 阅读全文 >>

《HTTP/2 in Action》阅读笔记(二)

2022-08-30 | 阅读(293)

要开始步入 HTTP/2 的，https://httparchive.org/reports/state-of-the-web#h2 显示了使用 HTTP/2 的趋势，和其他数据，如 HTTP/3 的应用趋势。随着互联网的发展，展示一个网页请求的资源越来越多，传输的总字节数在变大，平均近几M - https://www.speedcurve.com/blog/web-performance-page-bloat/。

https://www.webpagetest.org 可以用测试网页中所有资源加载的瀑布图，包括 DNS 的查询，网络连接，SSL 协商及 CPU, 带宽使用情况。

HTTP/1.1 效率较低下，只能同步发送处理请求，即请求，得到响应后才能发下一个请求，一个网会加载许多的资源，如图片, js, css 等。

HTTP/1.1 的 Pipeling 像 Redis 那样的 pipeline, 通过一个连接传递多个 HTTP 请求，再依次返回结果，但这种方案并未得到支持与应用。 阅读全文 >>

《HTTP/2 in Action》阅读笔记(一)

2022-08-16 | 阅读(363)

本书买来有一段时日了，一直还未开始阅读，关于网络上 HTTP/2 的真实使用状态查到以下信息

  1. 截止 2021 年 1 月 8 日，有 50% 的网站正在使用 HTTP/2，参见 Usage statistics of HTTP/2 for websites
  2. 另一篇介绍 HTTP/2 Adoption 说 2020 年就有 64% Web 请求是基于 HTTP/2 的

得看看我们自己的网站对 HTTP/2 的支持以及使用状况

于此同时，HTTP/3(gQUIC) 也上了议程，作为 HTTP/3 的提议标准的 RFC9114 也于 2022 年 6 月 6 日由 IETF 发布。

本书首先介绍的是关于 HTTP 协议从 0.9 到 1.0, 再到 1.1 的变迁史。

关于 IPv4 和 IPv6

IP 报文的前四位表示协议版本，所以 0100 就是 4。版本 0 ～ 3 是留给实验用的，5 设计为 Intenet 流协议的，例如实时音视频，像 VoIP, 实际上也因为地址数量的限制没被使用。所以就跳到了 IPv6，字节为  0110。后续的 IP 协议版本 7, 8, 9 都被预定了(比如中国的 IPv9 - 冷)，所以再有新的 IP 协议版本的放丈是 IPv10 阅读全文 >>

用一个例子理解 ES6 的 export/import 用法

2020-08-09 | 阅读(1,318)

使用了一段时间的 Vue.js 以后，其中有大量的 ES6 的 export/import 用法，如

import axios from 'axios';
import Home from '../views/Home.vue';
export default {
  data() { .... }

因为目前对 ES6 的 export/import 用法是一知半解的，所以基本上都是基于 vue-cli 创建的项目上依葫芦画瓢，更是不太理解 vue 的项目是如何由 main.js -> App.vue 把所有的 router, views, 和 components 串联起来的。为了进一步理清 Vue.js 项目的初步运行机制，现在开始着手试图通过一个例子来尽可能多的理解 ES6 的 export/import 用法。

我不是标题党，所以不可能命名如：理解 export/import 一篇就够了，全网最全诸如此类的。且本人博客主要是记录自己学习过程的，而非为了招人眼球。所以尽力吧，在一个代码例子中尽可能多的展示 export/import 的用法，为不增加代码的复杂性，有些技巧在代码后进行解释。 阅读全文 >>

Vue.js 项目使用 vue-prism-editor 语法高亮与编辑器

2020-08-06 | 阅读(3,288)

记录一下在 Vue.js 项目中使用 vue-prism-editor 进行语法高亮显示代码，并兼具代码编辑功能。JavaScript 中有几个比较典型的语法高亮显示的代码库，例如 SHJS, SyntaxHighlighter, Rainbow,   highlight.js。本博客曾经使用过 SyntaxHighlighter 来显示日志中的示例代码，现今所采用的是基于 PHP 的 Crayon Syntax Highlighter。除了只为了高亮显示代码外，有时候还需处理在线编辑代码，许多年前试用过 CodeMirror, 而今天要上手 Prism.js 也能够支持代码编辑。 

官方 Demo: prism-editor.netlify.com
Codesandbox:  https://codesandbox.io/s/61yrlnlnmn。

为了给 Vue.js 项目提供方便，有人专门做了一个 Vue.js 的插件 vue-prism-editor，本文直接使用该插件，而非直接使用 Prism.js。并且项目蓝本用 @vue/cli 4.4.6 的命令

$ vue create vue-prism-editor-demo

创建的，创建过程可参考 Flask 和 Vue.js 开发及整合部署实例 的 创建 Vue 项目一节，此文简单些，就只选择 default (babel, eslint) 默认项来创建 阅读全文 >>

Flask, Vue.js 中集成 Bootstrap/BootstrapVue

2020-07-04 | 阅读(1,514)

紧接上一篇 Flask 和 Vue.js 开发及整合部署实例，来体验一下它们与 Bootstrap/BootstrapVue 的集成。漂亮的网站少不得一个好的 CSS 框架，现在有许许多的 CSS 框架可选，纯 CSS 的, 轻量级的, 含 JS 的 CSS 框架，如 Pure, Bulma, Spectre, 国产的 Element 等。而我总觉得 Bootstrap 更是五臟俱全，像 Element 专为 Vue.js 打造的一样，Bootstrap 也有 BootstrpVue 那样一个结晶品。

本文准确的内容应该是关于 Vue.js 与 Bootstrap/BootstrapVue 的话题，与 Flask 没什么事，不过这里呢，还是强拉上 Flask, 由 Flask 的 API 来产生一些数据。

同样是阅读 Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】的一个实践品。本篇基于 Flask 和 Vue.js 开发及整合部署实例 中的步骤建立的项目 flask-vue-app，方便起见，用了一个新项目名称 flask-vue-bootstrap。记得我们为 Flask 和 Vue.js 分别建立了 backend  和 frontend 两个子项目。 阅读全文 >>

Flask 和 Vue.js 开发及整合部署实例

2020-07-01 | 阅读(5,781)

想做些简单的 Web 工具，首先想到的是 Flask + Vue.js, 当然可以完全用 Flask 自己的页面模板 Jinja2, 但一个网站项目不能享受到像 Vue.js, React 类似框架的灵活性真是太可惜了。于是 Flask 只专注于 API, 页面逻辑全用 Vue.js 的组合就成了我的首选，Flask 方面还能进一步选择 FlaskRESTful 框架。还需做得更漂亮的话，CSS 框架可选择 Bootstrap 或与 Vue 紧密集成的 BootstrapVue, 这是后话。

本文主要参考 Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】的前部分，英文原文在这里 Developing a Single Page App with Flask and Vue.js。

开发过程中我们可以保持 Flask 和  Vue.js 为单独的两个项目，并启动各自的服务，比如 Flask 是 http://localhost:5000, Vue.js 项目通过 npm run serve 启动在 http://localhost:8080，借助于 node js 的功能，修改 Vue.js 项目的内容能够自动刷新网页。要是开发中把静态文件全放在  Flask 项目中，那么任何对静态文件的修改都必须重启 Flask  服务。虽然 Debug 模式启动的 Flask 在看到它的目录中有任何修改时也能自动重启，但对静态文件的修改重启 Flask 没这个必要性。 

但部署时需进一步整合，最终只需要启动 Flask  服务，而无须两个，方便部署。如果是以 Docker 容器的方式发布，使用 docker-compose 来编排两个容器来发布也还算不错。更专业的部署方式应该是 Vue.js 的静态内容放到专门的 Web 服务器，如  Apache/Nginx 中，Flask 也通过 wsgi 与 Web 服务器集成起来。 阅读全文 >>

谁说 HTTP GET 就不能通过 Body 来发送数据呢？

2017-08-19 | 阅读(37,004)

当我们被问及 HTTP 的 GET 与 POST 两种请求方式的区别的时候，很多答案是说 GET 的数据须通过 URL 以 Query Parameter 来传送，而 POST 可以通过请求体来发送数据，所以因 URL 的受限，往往 GET 无法发送太多的字符。这个回答好比在启用了 HTTPS 时，GET 请求 URL 中的参数仍然是明文传输的一样。

GET 果真不能通过 Request Body 来传送数据吗？非也。如此想法多半是因循着网页中 form 的 method 属性只有 get 与 post 两种而来。因为把 form 的 method 设置为 post, 表单数据会放在 body 中，而 method 为 get(默认值) 时, 提交时浏览器会把表单中的字符拼接到 action 的 URL 后作为 query parameter 传送。于是乎就有了这么一种假像：HTTP GET 必须通过 URL 的查询参数来发送数据。

其实 HTTP 规范并未规定说 GET 就不能发送 body 数据，在 RFC GET 中只是说

The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI.

只是说 GET 意味着通过 URI 来识别资源。

我也是本着传统上对 GET 与 POST 区别的误解很多年，今天突然意识到 GET 应该可以使用 body, 况且 HTTP 本身是一个纯文本的协议。没有测试就没有 100% 的发言权，所以做了如下的测试 阅读全文 >>

如果要给 RESTful 每种 HTTP Method 类型指示一种颜色

2014-09-02 | 阅读(1,896)

RESTful 时需要考虑每种 HTTP Method 操作的业务含义，再也不是 GET 使用 URL, POST 提交表单这样简单的区别。http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html 定义有 GET, POST, PUT, HEAD, DELETE, PATCH, OPTIONS, TRACE, CONNECT 九种类型的 HTTP Method。

关于它们可能针对的业务含义就不多说了，而是如果要对每一种操作方法赋予一个颜色应该怎么去对应呢，比如一般 GET 不会有边际效应的操作可以选择绿色，或者蓝色。幸好我也不用多想，这里参考了 Swagger 的颜色方案，它支持除 OPTIONS, TRACE 和 CONNECT 之外的颜色配置，其实我也没用过这两种方法。

从 Play2 Swagger 中截图如下： 阅读全文 >>