后端开发 on Jinnchang

WebSocket

Wed, 15 Apr 2026 10:00:00 +0800

WebSocket 是一种在单个 TCP 连接上实现全双工通信的协议，让服务器能够主动向客户端推送数据，告别低效的轮询。

核心概念 Link to heading

WebSocket（协议标识 ws:// 或加密的 wss://）解决了 HTTP 请求-响应模型的单向限制。建立连接后，客户端和服务端可以随时互相发送数据，无需等待对方先发起请求。

握手过程：客户端发送 HTTP 请求，携带 Upgrade: websocket 头；服务端响应 101 Switching Protocols，连接升级为 WebSocket，后续数据以帧（frame）格式传输。

适用场景：

实时聊天、消息通知
在线游戏、协作编辑
实时监控面板、数据流推送
远程控制、即时通讯

WebSocket vs HTTP：

维度	HTTP	WebSocket
通信方向	客户端请求 → 服务端响应	全双工，双向随时
连接生命周期	短连接（请求结束即断开）	持久连接
头部开销	每次请求携带完整 Header	握手后帧头极小（2-14 字节）
服务端推送	不支持（需轮询/SSE）	原生支持
协议标识	`http://` / `https://`	`ws://` / `wss://`

可以用 mermaid 图来直观展示握手过程：

sequenceDiagram participant Client as 客户端 participant Server as 服务端 Client->>Server: GET /chat HTTP/1.1\nUpgrade: websocket\nConnection: Upgrade\nSec-WebSocket-Key: xxx Server-->>Client: HTTP/1.1 101 Switching Protocols\nUpgrade: websocket Note over Client,Server: 连接已建立，进入 WebSocket 模式 Client->>Server: [Frame] 你好！ Server-->>Client: [Frame] 欢迎加入聊天 Client->>Server: [Frame] 最近如何？ Server-->>Client: [Frame] 一切正常

安装配置 Link to heading

浏览器端原生支持 WebSocket API，无需安装任何库。

Server-Side Rendering

Sun, 05 Apr 2026 08:45:00 +0800

将 HTML 在服务器端生成后返回浏览器，解决 SPA 首屏加载慢、SEO 不友好的核心痛点。

核心概念 Link to heading

SSR（Server-Side Rendering） 指的是在服务器端完成页面渲染，将完整的 HTML 返回给浏览器，而非传统的客户端 JavaScript 动态生成 DOM。

对比两种渲染方式：

渲染方式	HTML 来源	首屏速度	SEO
CSR（客户端渲染）	空 HTML + JS 构建	慢，需下载执行 JS	搜索引擎抓取困难
SSR（服务端渲染）	服务器返回完整 HTML	快，直接渲染	友好

SSR 的渲染流程：

flowchart LR A[浏览器请求] --> B[服务器接收] B --> C[执行组件渲染] C --> D[生成完整 HTML] D --> E[返回浏览器] E --> F[浏览器直接显示页面]

为什么需要 SSR Link to heading

客户端渲染（React/Vue SPA）有三个本质问题：

Server-Sent Events

Wed, 01 Apr 2026 13:10:00 +0800

基于标准 HTTP 的单向实时通信协议，适用于服务端向客户端推送数据的场景。

核心概念 Link to heading

SSE 是 HTML5 标准的一部分，允许服务端通过一个持久的 HTTP 连接向客户端持续推送数据流。与 WebSocket 不同，SSE 是单向的（服务端 → 客户端），但也因此更加轻量。

sequenceDiagram participant Browser as 浏览器 EventSource participant Server as 服务端 Browser->>Server: GET /stream (Accept: text/event-stream) Server-->>Browser: 200 OK (Content-Type: text/event-stream) Note over Server: 连接保持打开 Server--)Browser: data: {"msg": "hello"}\n\n Server--)Browser: data: {"msg": "update"}\n\n Server--)Browser: data: {"msg": "done"}\n\n

SSE 消息格式：

event: message
id: 1
data: {"content": "Hello SSE"}
retry: 3000

关键协议要素：

OAuth

Sun, 01 Mar 2026 17:15:00 +0800

OAuth 2.0 是目前最主流的授权框架，允许第三方应用在无需获取用户密码的前提下，安全地访问受保护的资源。

假设读者具备基础的 HTTP 和 Web 开发经验。

核心概念 Link to heading

四个角色 Link to heading

角色	说明	示例
Resource Owner	资源所有者（用户）	登录 Google 的张三
Client	请求资源的第三方应用	“用 Google 登录” 的博客网站
Authorization Server	授权服务器，验证用户并发放 Token	accounts.google.com
Resource Server	资源服务器，存放受保护资源	Google Contacts API

授权流程概览 Link to heading

sequenceDiagram participant U as 用户 participant C as 第三方应用 participant AS as 授权服务器 participant RS as 资源服务器 U->>C: 1. 点击"授权登录" C->>AS: 2. 跳转至授权页 AS->>U: 3. 用户登录并确认授权 U->>C: 4. 返回授权码 (code) C->>AS: 5. 用 code 换取 access_token AS->>C: 6. 返回 access_token C->>RS: 7. 携带 token 请求资源 RS->>C: 8. 返回受保护资源

为什么不用密码直连？ Link to heading

传统方式：第三方应用直接索要用户名和密码 → 密码泄露风险、无法精细化控制权限、用户无法单独撤销第三方访问。