GitHub |
您所在的位置：网站首页 › 群组在线 › GitHub |
|
项目说明
这是一个基于 WebSocket 实现的简单网页聊天应用的示例项目。通过该项目，用户可以进行私聊和群聊，实时发送和接收消息。 详细设计地址：基于 Vue3 和 WebSocket 实现的简单网页聊天应用 注意 简单Demo, 功能不完善 使用 Mysql 数据库, 表结构在test_structure.sql文件中,执行命令 mysql -u your_username -p your_password your_database_name < test_structure.sql 导入数据库表结构 功能特性 私聊功能：用户可以选择联系人进行一对一私聊，发送即时消息。 群聊功能：用户可以加入群组，与群组成员进行群聊。 修改用户名：用户可以在界面上直接修改自己的用户名。 显示在线(连接)状态 重新连接: 用户可以重新连接服务器, 重新连接后, 会加载之前的聊天记录 技术栈前端框架： 该项目使用 Vue.js 作为前端框架，Element Plus 用于 UI 组件。 后端框架： 后端使用 Node.js + Mysql 实现，使用 WebSocket 库 ws 作为 WebSocket 服务端。 WebSocket： 实时通信使用 WebSocket 技术，保证消息的实时性。 如何运行克隆项目到本地： git clone https://github.com/haostart/websocket-chat.git进入项目目录： cd yourproject安装依赖： npm install启动项目： 客户端npm run serve WebSocket 服务端进入server文件夹运行 npm run dev 项目将在本地运行，你可以通过浏览器访问 http://localhost:8080 来查看应用。 项目结构 yourproject/ |-- server/ # WebSocket 服务端 |-- src/ | |-- components/ | | |-- ... # Vue 组件 | |-- assets/ | | |-- ... # 静态资源 | |-- views/ | | |-- Home.vue # 主要视图组件 | | |-- Login.vue # 登录视图组件 | |-- router/ | |-- App.vue | |-- main.js |-- public/ |-- README.md |-- ... 注意事项 请确保已经安装 Node.js 和 npm。 项目中的 WebSocket 连接地址为 ws://127.0.0.1:9000/ws，请根据实际情况修改。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |