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 编译配置。

• server/: 包含后端代码，使用 Node.js 和 Express 框架。

  • src/: 后端源代码目录。
    • models/: 数据模型定义。
    • routes/: API 路由定义。
    • services/: 业务逻辑服务。
    • index.ts: 后端入口文件。
  • package.json: 后端项目的依赖和脚本配置。
  • tsconfig.json: TypeScript 编译配置。

• .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": {
            "