# webrtc

**Repository Path**: firepower-boy/webrtc

## Basic Information

- **Project Name**: webrtc
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2024-08-18
- **Last Updated**: 2025-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 实时聊天系统

## README

# webrtc项目简介

实时聊天系统是由本人完全独立设计的一个项目，目前仍处于开发阶段，本项目在企业级的开发规范上结合了node.js的express框架和MySQL数据库开发了后端服务器接口，通过使用cors包解决后端的跨域问题。

1. 登录功能实现了登录权限token获取验证，数据库储存用户信息，保存用户的账户数据。
2. 聊天功能结合了本地储存、http请求、webSocket，实现了不同用户间一对一的消息实时转发。
3. 语音和视频通讯功能利用webSocket以及webRTC结合了Vue3的pinia仓库，通过Vue3的watch监听仓库数据变化实现用户间的来电显示和通话。
4. 语音聊天和文件传输功能结合了服务器本地的文件储存解决了储存空间占用大的文件不易通过数据库保存的问题。
5. 正在开发通讯录页。

# 项目下载运行

1. 本项目的node版本为20.4.0，需要先下载对应版本的node（推荐下载nvm进行node版本管理）
2. 项目使用的包管理工具为pnpm，需要先全局安装pnpm，运行命令

```sh
npm i -g pnpm
```

3. 下载完成后，如果想要项目在本地运行，首先分别在项目主目录webrtc目录和webrtc/server目录下执行分别执行一次下面的命令

```sh
pnpm i
```

### 项目运行

1. 项目首先需要运行服务器，执行命令

```sh
nodemon server
```

2. 服务器运行成功后，运行命令开启客户端（在不同的终端下运行多次即可打开多个客户端）

```sh
npm run dev
```

### 项目打包

```sh
npm run build
```

# 项目成果展示

1. 用户登录界面（后端实现了用户登录注册，前端可以通过账号登录）
   ![alt text](./src/assets/images/readme-images/image.png)

2. 首页（用户登录后进入首页，左侧菜单是好友列表，上方菜单栏左侧是好友名称，右侧是全局功能和用户信息及退出登录功能区）
   ![alt text](./src/assets/images/readme-images/image-1.png)

3. 聊天页面（后端实现了消息发送http请求服务以及webSocket即时通讯服务，实现了好友聊天信息的实时转发，同时发送语音功能也已实现）
   ![alt text](./src/assets/images/readme-images/image-2.png)

4. 视频通话与语音通话（利用webRTC技术实现了网页通话功能，结合pinia仓库监听数据变化和webSocket实现通话状态更新，目前已实现在同一局域网中两台主机间的通话，图片演示仅在同一主机上）
   ![alt text](./src/assets/images/readme-images/image-3.png)
   ![alt text](./src/assets/images/readme-images/image-4.png)

5. 文件功能已完成图片和视频发送及预览查看，用户将文件上传给服务器，服务器进行保存，用户需要时发送请求给服务器，服务器返回base64数据给客户端，客户端请求用户本地文件系统权限将文件保存到本地以便后续用户访问。
   ![alt text](./src/assets/images/readme-images/image-5.png)
   ![alt text](./src/assets/images/readme-images/image-6.png)

6. 未来预计还会开发朋友圈等功能，对页面美观度进一步完善。