这是一个响应式开源Web即时聊天应用程序。该应用程序采用全新技术构建。前端使用element-plus+vue3+vite+ts+pinia+socket.io+unocss等开发，后端使用nodejs+express+socket开发。io+express-jwt等开发，数据库使用mysql，可自定义聊天主题，支持发送图片、视频等文件，在文件存储方面支持与兼容AWSs3的对象存储平台对接，文件可通过修改相应配置存储到对象存储，非常方便二次开发和集成，也非常适合初学者交流学习项目地址gitee：https://gitee.com/lingshulian/vue3-socket-chatgithub：https://github.com/lingshulian/vue3-socket-chat项目列表客户端项目chat-c??lient支持发送图片、视频、token权限登录、响应式聊天页面、可自定义主题、代码结构清晰、简单易用的服务端项目chat-service支持jwt认证、Chat权限认证、s3对象存储、提交数据校验等，代码结构清晰易用数据库chat-db项目截图功能列表主要功能功能说明、弹窗提示√用户列表当前获取所有用户列表√切换主题，可以随意修改和切换主题自动消息标记√技术栈前端说明学习网站Vue3渐进式JavaScript框架https://v3.cn.vuejs。org/TypeScriptJavaScript的超集https://www.tslang.cn/Vite前端开发构建工具https://cn.vitejs.dev/ElementPlus基于Vue3，面向设计人员和开发人员的组件库https://element-plus.gitee.io/zh-CN/Pinia新一代状态管理工具https://pinia.vuejs.org/VueRouterVue.js官方路由https://router.vuejs。组织/zh/Unocss即时按需原子CSS引擎https://github.com/unocss/unocss后端描述学习网站express是基于Node.js平台的一个快速、开放、极简的web开发框架https://www.expressjs。com。cn/socket.io支持及时、双向、基于事件的通信https://socket.io/环境准备服务器：node.js（版本推荐：>=v14.17.3），s3兼容对象存储（用于存储图片、视频等文件）web端：node.js（推荐版本：>=v14.17.3）数据库：mysql（推荐版本：>=v8.0，可以导入sql文件）拉取项目gitclonehttps:///gitee.com/lingshulian/vue3-socket-chat基础目录vue3-socket-chat├──chat-c??lient//web项目├──chat-service//服务端项目├──chat-db//数据库web启动项目的一侧是通过按需导入组件、css和图标来构建的。第一次运行的时候编译时间可能会比较长，但是这种方式不仅可以提高开发效率，而且打包后的工程体积也可以大大减小。好的开发方法进入web端目录cdvue3-socket-chat/chat-c??lient安装依赖npminstall运行项目npmrundevpackage项目（动态表达式占14M多，代码量小于1M)npmrunbuilddatabase这里我们使用的是MySQL前端导入数据表。具体可以根据自己的使用习惯导入相应的数据表。创建并连接数据库并将用户表导入MySQLFront。选择File->Import->SQLfile选择vue3-socket-chat/chat-db/importuser.sql导入聊天记录表选择vue3-socket-chat/chat-db/chat.sql导入server进入服务器项目cdvue3-socket-chat/chat-service安装依赖npminstall配置数据库入口vue3-socket-chat/chat-service/config.js配置如下//数据库配置setdbConfig:{host:"localhost",user:"lingshulian",//数据库登录用户密码:"lingshulian.com",//数据库登录密码database:"lingshulian"//数据库名称}配置对象存储（未使用发送文件功能可以跳过这一步）项目使用的存储平台为PrismChain对象存储。该存储平台最大的优势在于存储成本低，无论是存储空间还是使用流量，都远低于市场上所有的对象存储平台。活动期间，对象存储空间低至0.06元/GB，流量低至0.05元/GB。存储容量稳定可靠，传输速度快，海外传输无流。各大站长、企业、个人最佳有兴趣的可以点击www.lingshulian.com官网了解创建存储桶-官方教程获取secretId和secretKey。创建存储桶后，登录PrismChain个人中心，在功能设置区打开API开放状态。获取key获取region和endpoint登录Prism链桶列表，点击目标桶右侧的configure按钮，可以在桶信息区获取对应桶的region和endpointthebucketconfigurationpages3Config:{config:{credentials:{accessKeyId:'ff6c3c04ea43b9811ef1f9132a5a05fe',//上述获取的secretIdsecretAccessKey:'e0a4095791261062f478767c60fdc9684f21524a0b5f9f0f4c2e0d39cecb6ba4'//上述获取的secretKey},endpoint:'https://s3-us-east-1.ossfiles.com',//https://+上面获取的endpointregion:'us-east-1'//上面获取的region},path:'chat',//上传的目录，可以定制桶：“lingshuliantest"//上面创建的存储桶}启动服务节点app.js测试打开浏览器输入http://localhost:3000下面提供几个默认的测试账号账号：123@lingshulian.com，密码：123456账号：456@lingshulian.com，密码：123456账号：789@lingshulian.com，密码：123456浏览器支持本地开发，推荐使用Chrome80+浏览器支持现代浏览器，不支持IE
