admin管理员组

文章数量:1666532

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

文章目录

  • 项目前言
  • 一、前期准备
  • 二、开发展示
  • 三、开发过程
    • 1.环境配置
    • 2.源码目录
    • 3.运行
    • 4.部署上线
  • 总结

项目前言

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

一、前期准备

编辑器：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的书和资料。

本文标签： 视频会议node全栈多人

版权声明：本文标题：vue2+node实现全栈多人视频会议 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1730064924a1221286.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。