0. 概述

影视剧的直播，有其特殊性：

1. 直播内容是“静态的”。直播源通常是预制的视频文件，而非实时通过摄像头采集的数据。
2. 没有主播，所以也就没有主播和观众的互动需求。所以对延时（主播和观众的时间差）要求不高，只要保证所有观众端具有差不多的播放进度即可。

所以相比摄像头开播的直播，影视剧直播的技术方案有可简化的余地：

1. 把视频文件预先转换成目标格式，避免推流过程中的编解码（当然这里只考虑为观众提供原始码率，不需要转码的情况）。
2. 把视频文件切割成多个时间长度为几秒钟的小视频文件，依次轮播。当新用户进入时，使其从当前序号的视频文件播放即可——同其它观众的时间差不超过此文件的时长。

1. 源端消除 Preflight

Preflight（预检请求）是指在跨源发出用户请求前，预先发出一个 OPTIONS 请求，查询服务端是否允许从此源站的请求。

Restful 规范是“罪魁祸首”。因为跨域 fetch 时，application/json 类型的 Content-Type 必然会触发 Preflight。

只有满足简单请求的 fetch，才不会触发 Preflight：

1. 基于 redis 实现 RPC 开发框架

市面上没有基于 redis 实现的 Python 异步 RPC 框架。
干脆自己写了一个最简版的。

1.1 客户端

连接 redis 服务器：

1
2

async def connect(self):
    self.redis = await redis.from_url(self.url)

1. 首页加载速度优化。

弃用 https://github.com/naver/egjs-infinitegrid，改用 css 原生的 columns 实现瀑布流。

这个 infinitegrid 乍一用还挺不错的，瀑布流布局、无限加载，完全符合我的需求。但是它的默认行为是阻塞式的，即在所有项（我的是图片）加载完成后再一次性渲染。虽然其文档上有提到异步加载方式，我简单尝试了下，没成功。

columns 默认会打断（break）元素。比如我的元素是这样的：

1
2
3
4

<div class="container">
	<div class="top"></div>
	<div class="bottom"></div>
</div>

本文基于官方 v18.1.0 文档。

Introducing Hooks

They let you use state and other React features without writing a class.

Motivation

It’s hard to reuse stateful logic between components

现在可以通过自定义 Hook 提取封装带状态的逻辑。

Complex components become hard to understand

useEffect 可以把复杂逻辑分拆到多个小的函数中。

Classes confuse both people and machines

本文基于官方 v18.1.0 文档。

Code-Splitting

Code Splitting

You need to keep an eye on the code you are including in your bundle so that you don’t accidentally make it so large that your app takes a long time to load.

Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.

Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app.

本文基于官方 v18.1.0 文档。

Introducing JSX

Why JSX?

React embraces the fact that rendering logic is inherently coupled with other UI logic:
how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files,
React separates concerns with loosely coupled units called “components” that contain both.

这是当初 React 最吸引我的地方，不执著于将 UI 和逻辑分开。MVC 大行其道几十年后，Android 跟 iOS 也都在尝试返濮了。
在我实际工作经验中，进行视图子类化定制的出发点往往就是为了将 UI 和其逻辑写在一起。这个需求越靠近业务层就越强烈。

ubuntu 上安装完 nginx 后发现默认首页不能访问，可以优先检查 ufw 防火墙：

1

sudo ufw status

结果显示 status: active，说明 vultr 上的防火墙是默认开启的。

执行命令将 http、https 端口加入到白名单：

1
2

sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'Nginx HTTPS'

可以了。

参考：

How to Set Up Nginx on a Ubuntu Server with Vultr: https://coderrocketfuel.com/article/how-to-set-up-nginx-on-a-ubuntu-server-with-vultr

白名单

https://vultr.com/

黑名单

1. https://flaunt7.com/

垃圾，会无故下线服务器，各种反馈渠道没有响应。

2. https://hostus.us/

不能购买 VPS，直接把我标记为了 fraud（诈骗），要求我提供身份证明信息。

3. https://www.linode.com/

同上，说我行为、模式像诈骗。

4. https://www.time4vps.com/

同上，需要提供驾驶证、身份证或者护照。

之前 通过直接运行 babel 相关命令，把 jsx 语法做了预处理。但输出远远达不到 create-react-app 的水平。 Google 了一圈发现，原来可以通过 webpack 把 jsx 预处理、js 压缩、js 打包几个步骤一次性执行。

初始化 Webpack Config

安装 webpack：

1

npm i webpack webpack-cli