# anonymous-chatroom

**Repository Path**: forevercyril/anonymous-chatroom

## Basic Information

- **Project Name**: anonymous-chatroom
- **Description**: 该项目是一个网页版匿名聊天室。后端采用Django进行开发，前端使用React构建。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-24
- **Last Updated**: 2022-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 匿名聊天室

> 该项目是一个网页版匿名聊天室。后端采用Django进行开发，前端使用React构建。部分素材来自[yachen168/React-Chat-Room](https://github.com/yachen168/React-Chat-Room)

## 项目结构

- 前端：
  - 采用react构建，通过`react-dom-router`实现单页面应用。使用webpack打包静态页面。
- 后端：（由于前后端分离，需要采用csrf跨站请求保护）
  - Http: 使用Django Rest Framework 为前端提供相应的接口。
  - WebSocket: 使用Django Channel为聊天提供实时的消息接收与发送。
  - 目录结构：
    - `/api`: 接口部分相关实现
    - `/chat`: 聊天部分相关实现
    - `/chatroom_server`: 项目整体设置
- Nginx:
  - 将接口相关部分转发至Django端口
  - 页面部分由Nginx自身提供服务

## 如何运行

### 前端

```shell
cd web # 进入目录
npm install # 安装依赖库
npm run build # 生成打包后的文件
# 也可以使用node来直接提供服务
# npm run start
```

### 后端

```shell
cd server # 进入目录
pip install -r requirements.txt # 安装依赖库
python manage.py runserver # 运行服务
```

### Nginx配置

```c
upstream backend { // Django运行地址及端口
    server 127.0.0.1:8000;
}

server {
    listen 80;

    server_name chat.cyril.tech; //域名

    root /var/www/chat; // 根目录，前端打包生成的静态页面
    index index.html;
    // 接口以及Django相关请求由Django自身处理
    location ~ ^/(ws|api|admin|django)/ {
        proxy_pass              http://backend;
        proxy_http_version  1.1;
        proxy_redirect      default;
        proxy_set_header    Upgrade $http_upgrade;
        proxy_set_header    Connection "upgrade"; // 启用websocket
        proxy_set_header    Host $host;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Host $server_name;
    }

    location / {
        // 允许直接使用<域名>而不用加上index.html
        try_files $uri $uri/ /index.html; 
    }
}
```

## TODO

- 记录并保存用户聊天记录至本地，以维护聊天室内容
- 使用Redis替换后端缓存
- 用户注册时校验

## 运行效果

![image-20211221170123698](.asset/README/image-20211221170123698.png)

![image-20211221165817215](.asset/README/image-20211221165817215.png)

![image-20211221165937011](.asset/README/image-20211221165937011.png)