# ChattingRoom **Repository Path**: sehunog/chatting-room ## Basic Information - **Project Name**: ChattingRoom - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2024-08-31 - **Last Updated**: 2026-04-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ZZ-chatRoom **git地址:** https://github.com/chichengryota/ChattingRoom ### 聊天室功能介绍 - 对聊天室内当前在线人数进行统计 - 新用户加入聊天室会有提示说明 - 用户退出聊天室会有提示说明 - 文件上传功能 - 显示用户在线列表 - 截图功能 - 发表情功能 - 图片的大图预览功能 - 回车发送信息 部分功能实现：[https://blog.csdn.net/weixin_43950643/article/details/107923433](https://blog.csdn.net/weixin_43950643/article/details/107923433) 项目预览地址：[http://47.107.149.243/chatroom](http://47.107.149.243/chatroom) 如果对您对此项目有兴趣，可以点 “Star” 支持一下 谢谢！ 如有问题请直接在评论中提出，或者您发现问题并有非常好的解决方案，欢迎评论 前端(chatroom文件)运行： ```javascript npm install npm run serve ``` 后端(service文件)运行： ```javascript node app.js ``` ### 截图如下： 登录： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812150953523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70#pic_center) 聊天发表情： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812151042541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70#pic_center) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812151344242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70#pic_center) 发送图片和截图功能： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812151127955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70#pic_center) 预览功能： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812151144189.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MDY0Mw==,size_16,color_FFFFFF,t_70#pic_center) ### **聊天室接口文档** | 事件名称 | 描述 | 参数 | 返回值/广播内容 | | ---------------- | -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | `login` | 用户登录事件 | `username`（用户名），`avatar`（头像URL，可选） | 登录成功：`{msg: "登录成功", ...data}`；登录失败：`{msg: "用户已存在，登录失败"}` | | `disconnect` | 用户断开连接事件 | 无 | 无 | | `sendMessage` | 发送聊天消息事件 | `username`（用户名），`message`（消息内容） | 无 | | `sendImage` | 发送图片消息事件 | `username`（用户名），`imageUrl`（图片URL） | 无 | | `userExit` | 用户已存在，登录失败时服务器广播 | `msg`（消息内容，"用户已存在，登录失败"） | 无 | | `loginsuccess` | 用户登录成功时服务器广播 | `msg`（消息内容，"登录成功"），`username`（用户名），`avatar`（头像URL，可选） | 无 | | `addUser` | 有新用户加入聊天室时服务器广播 | `username`（用户名），`avatar`（头像URL，可选） | 无 | | `leaveroom` | 有用户离开聊天室时服务器广播 | `username`（离开的用户名） | 无 | | `receiveMessage` | 接收到聊天消息时服务器广播 | `username`（发送消息的用户名），`message`（消息内容） | 无 | | `receiveImage` | 接收到图片消息时服务器广播 | `username`（发送图片的用户名），`imageUrl`（图片URL） | 无 | | `userList` | 聊天室用户列表更新时服务器广播 | 数组，包含所有在线用户的用户名和头像URL（可选） | 无 | **注意**： - 所有事件和数据传输均使用JSON格式。 - 客户端需要实现相应的事件监听和处理逻辑。 - 服务器提供静态文件服务，访问路径为`/chatroom`，静态文件存放在服务器目录下的`chatroom`文件夹中。