准备工作

安装 Node.js

参见如何安装Node.js？。

注意：
你需要 npx 来运行后文的命令。npx 自 npm 版本 5.2.0 起就预装在 npm（Node 包管理器）中。
而 npm 通常由 Node.js 安装包一起安装，所以你需要安装 Node.js。

本文项目使用 node v20.11.0 和 npm 10.2.4。

选择编辑器

选择你喜欢的编辑器或使用 Visual Studio Code。

学习 React 基础

如果你不熟悉 JavaScript，你可以尝试这个教程: 《JavaScript快速入门》。

学习 HTML 基础: HTML 简介

学习 CSS 基础: 使用 CSS 为 HTML 添加样式

如果你对 React 不熟悉，可以在这里学习: 《React快速入门》。

什么是Websocket？

WebSocket API是一项先进的技术，它使得用户的浏览器和服务器之间可以打开双向交互式通信会话成为可能。通过这个API，你可以向服务器发送消息并接收基于事件的响应，而无需轮询服务器以获取回复。

什么是Socket.IO？

Socket.IO 是一个库，它实现了在客户端和服务器之间进行低延迟、双向和基于事件的通信。在大多数情况下，连接将使用WebSocket建立。它提供了服务器和客户端之间低开销的通信渠道。如果WebSocket连接不可用，它将退回到HTTP长轮询。