|
|
|
|
WebChat聊天室
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
WebChat聊天室是一个基于nodejs+express+socket.io模块构建的
|
|
|
|
|
网页聊天室工具。前端使用Vue作为前端框架。服务端使用express搭建web服务,使用socket.io
|
|
|
|
|
来创建服务端socket服务,实现了一些基本的聊天功能。
|
|
|
|
|
|
|
|
|
|
![](https://img.shields.io/github/stars/cleverqin/node-websocket-Chatroom?label=Star&style=flat&logo=github)
|
|
|
|
|
![](https://img.shields.io/github/forks/cleverqin/node-websocket-Chatroom?label=Fork&style=flat&logo=github)
|
|
|
|
|
![](https://img.shields.io/badge/Version-1.0.0-blue)
|
|
|
|
|
|
|
|
|
|
功能介绍
|
|
|
|
|
---
|
|
|
|
|
[✔]支持表情发送
|
|
|
|
|
|
|
|
|
|
[✔]支持键盘回车发送信息
|
|
|
|
|
|
|
|
|
|
[✔]支持在线用户统计和用户列表
|
|
|
|
|
|
|
|
|
|
[✔]支持在线用户搜索
|
|
|
|
|
|
|
|
|
|
[✔]支持在线用户的私聊
|
|
|
|
|
|
|
|
|
|
[✔]支持消息声音提示
|
|
|
|
|
|
|
|
|
|
[✔]支持消息显示设置
|
|
|
|
|
|
|
|
|
|
[✔]未读消息条数显示
|
|
|
|
|
|
|
|
|
|
[✔]支持发送小于1M的图片
|
|
|
|
|
|
|
|
|
|
[✔]支持移动端
|
|
|
|
|
|
|
|
|
|
相关技术站点
|
|
|
|
|
---
|
|
|
|
|
[Vue官方文档](https://cn.vuejs.org/v2/api/)
|
|
|
|
|
|
|
|
|
|
[Socket.io官方文档](https://socket.io/docs/)
|
|
|
|
|
|
|
|
|
|
使用手册
|
|
|
|
|
---
|
|
|
|
|
1. 下载代码并安装nodejs
|
|
|
|
|
2. 使用`npm install`安装项目依赖模块
|
|
|
|
|
3. 使用`npm run serve`启动开发服务
|
|
|
|
|
4. 使用`npm run prod`启动后台服务
|
|
|
|
|
5. 最后打开浏览器访问 `http://localhost:8080`
|
|
|
|
|
6. 开发完成后打包前端代码`npm run build`
|
|
|
|
|
|
|
|
|
|
项目预览截图
|
|
|
|
|
---
|
|
|
|
|
<img src='./public/static/img/screenshot/screen_01.png' width='400px'>
|
|
|
|
|
|
|
|
|
|
<img src='./public/static/img/screenshot/screen_02.png' width='400px'>
|
|
|
|
|
|
|
|
|
|
<img src='./public/static/img/screenshot/screen_03.png' width='400px'>
|
|
|
|
|
|
|
|
|
|
<img src='./public/static/img/screenshot/screen_04.png' width='400px'>
|
|
|
|
|
|
|
|
|
|
<img src='./public/static/img/screenshot/screen_pc_01.png' width='400px'>
|
|
|
|
|
|
|
|
|
|
<img src='./public/static/img/screenshot/screen_pc_02.png' width='400px'>
|
|
|
|
|
|
|
|
|
|
<img src='./public/static/img/screenshot/screen_pc_03.png' width='400px'>
|