Socket.IO TypeScript 聊天应用教程
目录结构及介绍
socket-io-typescript-chat/
├── client/
│ ├── src/
│ │ ├── app/
│ │ ├── assets/
│ │ ├── environments/
│ │ └── index.html
│ ├── angular.json
│ ├── package.json
│ ├── tsconfig.json
│ └── ...
├── server/
│ ├── src/
│ │ ├── models/
│ │ ├── routes/
│ │ ├── services/
│ │ └── index.ts
│ ├── package.json
│ ├── tsconfig.json
│ └── ...
├── .gitignore
├── LICENSE
├── Procfile
├── README.md
└── ...
-
client/: 包含前端代码,使用 Angular 框架。
- src/: 前端源代码目录。
- app/: 包含 Angular 应用的主要代码。
- assets/: 存放静态资源文件。
- environments/: 环境配置文件。
- index.html: 应用的入口 HTML 文件。
- angular.json: Angular 项目配置文件。
- package.json: 前端项目的依赖和脚本配置。
- tsconfig.json: TypeScript 编译配置。
- src/: 前端源代码目录。
-
server/: 包含后端代码,使用 Node.js 和 Express 框架。
- src/: 后端源代码目录。
- models/: 数据模型定义。
- routes/: API 路由定义。
- services/: 业务逻辑服务。
- index.ts: 后端入口文件。
- package.json: 后端项目的依赖和脚本配置。
- tsconfig.json: TypeScript 编译配置。
- src/: 后端源代码目录。
-
.gitignore: Git 忽略文件配置。
-
LICENSE: 项目许可证。
-
Procfile: 用于部署到 Heroku 的配置文件。
-
README.md: 项目说明文档。
项目的启动文件介绍
后端启动文件
后端的启动文件位于 server/src/index.ts
。该文件主要负责以下任务:
- 导入必要的模块和配置。
- 创建 Express 应用实例。
- 配置中间件,如 CORS 和 body-parser。
- 定义 API 路由。
- 启动 WebSocket 服务器。
- 监听指定端口。
前端启动文件
前端的启动文件位于 client/src/main.ts
。该文件主要负责以下任务:
- 导入 Angular 应用模块。
- 启动 Angular 应用。
项目的配置文件介绍
后端配置文件
-
server/package.json: 包含后端项目的依赖和脚本配置。例如:
{ "name": "server", "version": "1.0.0", "scripts": { "start": "ts-node src/index.ts" }, "dependencies": { "express": "^4.17.1", "socket.io": "^4.0.1", "typescript": "^4.2.4" } }
-
server/tsconfig.json: TypeScript 编译配置。例如:
{ "compilerOptions": { "target": "ES6", "module": "commonjs", "outDir": "./dist", "strict": true }, "include": [ "src/**/*" ] }
前端配置文件
- client/angular.json: Angular 项目配置文件。例如:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "client": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "