Angular Socket.IO 聊天应用教程

Angular Socket.IO 聊天应用教程

angular-socket-io-chatAn example Angular chat app, made on top of ExpressJS & Socket.io.项目地址:https://gitcode.com/gh_mirrors/an/angular-socket-io-chat

1. 项目的目录结构及介绍

angular-socket-io-chat/
├── client/
│   ├── e2e/
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/
│   │   │   ├── models/
│   │   │   ├── services/
│   │   │   ├── app.component.css
│   │   │   ├── app.component.html
│   │   │   ├── app.component.ts
│   │   │   ├── app.module.ts
│   │   ├── assets/
│   │   ├── environments/
│   │   ├── index.html
│   │   ├── main.ts
│   │   ├── styles.css
│   ├── angular.json
│   ├── package.json
│   ├── tsconfig.json
├── server/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── sockets/
│   │   ├── app.js
│   ├── package.json
│   ├── tsconfig.json
├── .gitignore
├── README.md

目录结构介绍

• client/: Angular 客户端项目目录。
  • e2e/: 端到端测试目录。
  • src/: 源代码目录。
    • app/: 应用模块目录。
      • components/: 组件目录。
      • models/: 数据模型目录。
      • services/: 服务目录。
      • app.component.css: 主组件样式文件。
      • app.component.html: 主组件模板文件。
      • app.component.ts: 主组件逻辑文件。
      • app.module.ts: 应用模块配置文件。
    • assets/: 静态资源目录。
    • environments/: 环境配置目录。
    • index.html: 应用入口 HTML 文件。
    • main.ts: 应用入口 TypeScript 文件。
    • styles.css: 全局样式文件。
  • angular.json: Angular 配置文件。
  • package.json: 客户端依赖管理文件。
  • tsconfig.json: TypeScript 配置文件。
• server/: Node.js 服务器项目目录。
  • node_modules/: 服务器依赖包目录。
  • public/: 静态文件目录。
  • src/: 服务器源代码目录。
    • models/: 数据模型目录。
    • routes/: 路由目录。
    • sockets/: 套接字处理目录。
    • app.js: 服务器入口文件。
  • package.json: 服务器依赖管理文件。
  • tsconfig.json: TypeScript 配置文件。
• .gitignore: Git 忽略配置文件。
• README.md: 项目说明文件。

2. 项目的启动文件介绍

客户端启动文件

• client/src/main.ts:

  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

服务器启动文件

• server/src/app.js:

  const express = require('express');
  const http = require('http');
  const socketIo = require('socket.io');
  
  const app = express();
  const server = http.createServer(app);
  const io = socketIo(server);
  
  // 设置路由和套接字处理逻辑
  
  const PORT = process.env.PORT || 3000;
  server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
  });
  

3. 项目的配置文件介绍

angular-socket-io-chatAn example Angular chat app, made on top of ExpressJS & Socket.io.项目地址:https://gitcode.com/gh_mirrors/an/angular-socket-io-chat