vue2+node实现全栈多人视频会议

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

项目前言

场景：实现多人视频会议。
功能：登录、注册、多人音视频（创建房间，进入房间）、会议（音频、视频、共享屏幕）。

---

一、前期准备

编辑器：vscode 地址。
多人视频会议开源框架：腾讯TUIroom 地址。
登录注册功能框架：vue+node+mysql 登录注册 地址
上述代码都fork在我的github仓库。

二、开发展示

腾讯的TUIroom是不包含登录注册的，我们的目的是开发出一套完备的包含登录注册的多人音视频会议。界面如下所示：

   登录界面

   注册界面

   主页面

   会议房间

三、开发过程

本章会详述，怎么跑通代码，并对代码进行二次开发。

1.环境配置

1. 下载编辑器VScode
2. 安装node.js（注意，不要安装新版本，和代码不兼容），下载node-v14.21.1-x64.msi版本，下载地址。
3. 利用phpstudy配置后端mysql数据库。

1.下载phpstudy软件（百度直接搜）
2.开启数据库-新建数据库
3.输入数据库名字，账号和密码
4.运行数据库

注意：数据库的名字，账号和密码要和源码目录中service问价夹中的db.js文件保持一致，也就是说你的数据库信息，要在db.js中重新配置一下。

此外：你要在数据库里建立一个表user，表中设有三个字段：username, email, password，这是因为源码执行数据库增加和查询操作。

2.源码目录

• dist文件是打包之后形成的文件，把源码打包之后，可以生成dist文件夹，部署的时候，把dist文件上传到服务器即可。
• node_modules是依赖包，里面是项目需要各种插件和依赖项，在源码中执行nom install命令自动生成。
• service 是后端配置服务器文件，本源码中主要通过node.js实现前端和后端的交互。
• src是前端的所有组件，我们主要在这个文件夹中进行修改。
• 其他的配置文件一般是不需要修改的，本项目中暂时不做修改（已经配置好了）。

3.运行

1. 把项目导入vscode中
   
2. 在vscode点击终端-新建终端
   
3. 在终端中输入cd service进入后端文件夹中，执行node app.js执行后端程序
   
4. 重新在新建终端，输入npm run serve执行整个项目
   
   5.在浏览器中输入http://localhost:8080/即可访问主页。

6.新建终端，执行npm run build打包命令，就能生成一个dist文件夹，把dist文件夹进行部署就行。

4.部署上线

因为在测试阶段，我们直接简单部署就可以了

1.开一个windows系统的云服务器
2.安装node.js
3.安装phpstudy，并开启数据库
4.下载一个Navicat Premium 16管理数据库
5.给数据库进行配置
6.把源码上传服务器，在命令行进入service文件，执行`node app.js`开启后端服务器（测试可以暂时这样操作）(PS:在真实的部署环境中，我是直接利用node serve.js开启的后端服务，因为我配置了https协议，所以进行了修改)
7.把dist部署到phpstudy上就行（dist有个index文件是访问入口）

---

总结

项目整体部署就行这样，但是对项目的二次开发，还是需要对源码进行解析。主要需要在src文件中进行修改。项目采用的是vue2+node+mysql的全栈操作，可以参考vue2的书和资料。