cooperjiang / nine-chat-frontend Goto Github PK

View Code? Open in Web Editor NEW

113.0 4.0 44.0 4.28 MB

采用socketio打造的多人实时通讯多房间在线音乐聊天室

Home Page: https://chat.jiangly.com

JavaScript 18.18% HTML 0.67% Vue 72.31% Less 8.01% CSS 0.83%

nestjs node socketio vue

nine-chat-frontend's Introduction

2.x版本已经更新

![项目图片](https://public-1300678944.cos.ap-shanghai.myqcloud.com/blog/1654005363486image.png

项目地址

github 后端项目地址：项目地址 前端模块地址：项目地址
项目线上体验地址

项目迁移

一台云服务器
一个mysql服务器即可
一个私有文件远程存储的接口项目已经提供了测试数据，拉下项目可直接运行，typeorm可自动化建表，无需额外操作，修改数据库地址即可快速迁移完成。

项目启动

项目采用了 orm 操作数据库、所以只需要在.env 配置文件中配置上自己的数据库、就会初始化成功、orm会自动创建所需要的数据库
如果不想自己建表填入带有root权限的数据库账号密码可以自动化建库，也可以填写场景好的数据库账号密码即可
项目提供了一个测试数据库、可以直接使用、账号密码都有配置、可以自行操作即可
前端部分 pnpm install pnpm dev
后端部分 pnpm install pnpm dev 启动后初次会自动创建超级管理员（ super 123456 ），自动创建888官方房间，首次默认会自动往曲库添加部分歌曲，如果想要添加到聊天室，super账号搜索歌曲，收藏就会加入官方聊天室，也可以通过接口getAlbumList传入专辑id添加歌曲，也可以在开发环境添加，也可以搜索添加。
项目为DEMO项目，未配置与验证邮箱，也没有详细配置权限装饰器，仅有基础权限。

图片文件上传说明

默认文件会上传到public下的files目录，默认basic目录下会有基础图片，所以本地开发环境不会显示图片，使用的是相对路径图片，或者自己拼接，
将前端项目打包后的dist文件内容放入public下面，即可只启动后端项目 3000端口即可同时访问前后端，图片即可正常

免责声明

平台音乐数据来源于第三方网站，仅供学习交流使用，请勿用于商业用途。

更新历史

1.x:
 1、普通文字聊天、粘贴图片发送、在线搜索表情包发送等聊天功能
 2、在线搜索歌曲、点歌、切割、收藏歌曲
 3、歌曲实时播放，所有人共享一个实时歌单、一起听歌
 4、实时修改个人信息资料
 5、支持自定义专属背景
 6、快捷键等待你的探索

2.x: 2022051
 1.新增个人私有房间，支持用户创建自己独立的房间了
 2.新增图片或文件发送，可直接粘贴到输入框即可
 3.支持消息引用，点击引用的消息会自动滚动到指定位置
 4.上拉平滑加载更多[修复1.0]上拉抖动问题
 5.新增消息两分钟内可撤回
 6.划分三级权限 超级管理员>房主>普通用户 支持加密房间
 7.新增夜间主题和透明主题，支持部分快捷操作
 8.新增部分快捷键

更多功能等你来提...

项目部分截图

基础技术栈

前端采用 vue + socker-io 未使用ui框架
后端采用 nestjs + typeorm + mysql + socket.io

佛系更新有需要请 issues提看到有需要就更新、没有就GG

关于更新

详情功能看预览地址，有bug就留言，基础模型功能都有，可以自己二次开发。

有时间也会更新部分功能上去、尽量做到简洁、方便各位移植和部署。

有创意或想法可以提issues，采纳会回复更新。

nine-chat-frontend's People

Contributors

Stargazers

Watchers

Forkers

xcyn crttaz ruanjian5216 andrew-zn tang90h05h25 lanborn wangscaler pansusu zdsdevil nollieleo wa-monster kanbang kiritosan jasonlonger chentao-ct yorshkas liangshengmoran chrismk mycl lt1067066026 mayj813 all8926 crossevol forgoodthing atqq shadykingofficial lujdong zs2459733326 bin758 adanxie xincodes wsdtl ahaiyun quanxusheng xinrr weikecloud itsharex 520l github-ljrong wgl878420 zhanghanzhe666 tinge666 cgb-im

nine-chat-frontend's Issues

前端项目运行报错

前端运行之后，会提示npm install --save @/components/Popover，实际发现是没有PopOver这个组件，但在ChatHeader的index.vue中有引用这个组件，实际引用了也没有使用，去掉之后可以运行。

前端启动报错

C:\Users\Administrator\Desktop\NineChat\frontend>npm run dev

[email protected] dev
vue-cli-service serve --mode development

INFO Starting development server...
98% after emitting CopyPlugin

ERROR Failed to compile with 7 errors 19:21:41

These dependencies were not found:

@/components/Chat/ChatHeader in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/views/Chat/index.vue?vue&type=script&lang=js&
@/components/Chat/ChatLrc in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/views/Chat/index.vue?vue&type=script&lang=js&
@/components/Chat/ChatMessageFrame in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/views/Chat/index.vue?vue&type=script&lang=js&
@/components/Chat/ChatProgress in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/views/Chat/index.vue?vue&type=script&lang=js&
@/components/Chat/MessagePanel in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/views/Chat/index.vue?vue&type=script&lang=js&
@/components/Chat/MusicPlayer in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/views/Chat/index.vue?vue&type=script&lang=js&
@/components/PreImg in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/views/Chat/index.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save @/components/Chat/ChatHeader @/components/Chat/ChatLrc @/components/Chat/ChatMessageFrame @/components/Chat/ChatProgress @/components/Chat/MessagePanel @/components/Chat/MusicPlayer @/components/PreImg