基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发

项目概述

本项目旨在实现一个实时聊天应用，通过集成Node.js作为服务器端框架，Express用于处理HTTP请求，MongoDB作为数据库存储消息记录，Socket.io确保客户端与服务器之间的实时通信。

项目目录结构

• config: 包含应用程序配置文件。
• public: 存放静态资源文件，如HTML、CSS和图片。
• scripts: 包含框架自带的Javascript脚本。
• server: 包含所有服务端代码。
• src: 客户端源代码目录，具体包括：
  • components: React组件文件。
  • containers: 页面级组件文件。
  • redux: Redux相关文件，如常量、actions和reducers。
  • App.js 和 index.js: 应用程序入口文件。
  • reducer.js: 合并所有的reducer。
  • store.js: 配置Redux store，并扩展其他中间件。

演示截图

注意：由于录制工具的问题，发送消息时可能会出现重复现象。实际上只发送一次消息，但录屏软件触发了两次广播事件。

依赖包说明

Ant Design (antd)

蚂蚁金服推出的企业级UI设计语言和React组件库。为了按需加载组件，需要执行以下步骤：

1. 安装antd：npm install antd --save
2. 暴露eject命令：npm run eject
3. 安装babel-plugin-import：npm install babel-plugin-import --save
4. 修改package.json中的Babel配置：

   {
     "babel": {
       "presets": ["react-app"],
       "plugins": [["import",{"libraryName": "antd","style": "css"}]]
     }
   }

React Router (react-router-dom)

用于管理React应用中的路由导航。
在浏览器中使用：import {BrowserRouter, Route} from 'react-router-dom'

Node-Sass

允许create-react-app支持Sass预处理器。
安装：npm install node-sass --save

Mongoose

提供了一个简洁、高效的接口来操作MongoDB数据库。

React-Redux

使Redux与React无缝协作，简化状态管理。

Redux Thunk

允许编写异步逻辑来处理action。

CryptoJS

用于加密和解密数据。

Body-parser

解析HTTP请求体，方便处理POST请求。

COOKIE-parser

解析HTTP请求中的COOKIE头。

Browser-COOKIEs

用于管理和操作浏览器中的COOKIEs。

Socket.IO

实现实时双向通信，支持WebSocket协议。

Socket.IO-Client

为前端提供Socket.IO客户端库。

Github仓库地址：https://github.com/kavience/react-zhaopin