#注意
- H5端测试请在HBUILDER X的内置浏览器中登录,我的服务器没有设置跨域
- 小程序真机调试会检测连接网址,需要把 ./common/config.js 中 SocketUrl BaseUrl网址加到后台 非常重要 非常重要 非常重要 如果不会的话请自己阅读小程序相关文档,不解释,而且小程序真机扫码调试会导到 webstock失败,建议使用自动真机调试。
- 不要用微信登录,因为有后台鉴权,或是你修改后台登录代码 取消鉴权部分。
- 如果要自己搭后台,推荐云主机,用虚拟主机就算了。如果不想自己搭后台,可以直接用我示例的接口。后面我将会提供一个不用登录鉴权的地址。
四端亲测可用
H5 微信小程序 支付宝小程序 APP 亲测可用。理论上QQ其它小程序也可以。因个人对界面设计能力不足,导致样式不好看,但功能绝对是现有聊天工具里最全的,现有工具都只是前端模版,我这里面是集成后台功能。
语音、图片、聊天记录保存
已集成语音聊天、图片聊天、表情包使用(小程序开发工具不支持,真机使用无问题),稍做修改可以集成到项目中做客服、私聊工具。聊天记录保存,多端同步,小程序上聊天,H5登录后也可查看聊天记录。在线用户列表,离线发送消息。
后台代码简单
前台代码配置统一,直接修改为自己后台地址,方便使用。
将后台代码分离,也就是专注聊天这一块,因为不少开发者只是要聊天这一块功能。后台没有做用户登录鉴权,开发者自己处理。
后台代码主要业务代码
用户登录还是用的原来数据,这是另一个项目。大家可以自行参考后修改。
用户登录以及相关的功能类,TP模型类。
服务器php7以上,redis,mysql/mariadb必须备,因小程序要HTTPS和WSS必须配好Nginx或Apache。推荐composer安装。如无法用Composer的可联系把文件发给你。
对服务器需求低,作者1G核阿里云,全配好运行也才50%内存,特别适合中小企业。
整体功能
- 完成用户登录 ,支持多端同时在线。
- 小程序登录,支持多端同时在线,即小程离绑定用户后,可在H5同时在线,接收消息
- 服务端JWT后台用户认证加密(分离后的后台没有此功能,主要是为了方便集成。)
- redis消息保存(可自定义保存前缀,不与现有key冲突)
- 所有用户列表,在线用户列表(这个简单,会尽快更新会完成)
- 添加好友功能,好友列表(待完成)
- 群聊/话题功能(待完成)
聊天功能
- 文字聊天
- 图片聊天
- 语音聊天
- 表情包聊天
消息记录
- 新消息提醒(离线新消息提醒暂不支持)
- 用户注销下线通知 (已完成 )
更新
0909 更新了
- plus-websocket,解决了APP重新进入后白屏的问题。
- 增加心跳功能,主动向服务端发送空包,后台代码也做了处理
- 支付宝小程序消息 rich-text优化, 对所有平台聊天数据做了Array处理
- 所有websocket只在APP.vue中调用,不会出现串页面后连接不上
0910 更新
- 独立配置文件,方便修改(同时我将服务器从阿里转到腾讯云,有需要测试的可以在近一周内私我)
- 底部导航选中项直接集成到VUEX设置
- mathc (用户列表页面新增进入页面后刷新用户列表功能)
- 新增注册,用户注销功能,提取用户功能混入mixins,后台用户注销后,前台刷新用户会消失
0912 更新
- 新增语音聊天功能,语音播放,播放进度显示
- 发送图片功能,我云主机宽带有限,1M的也就是下截最多100K/秒,所以限制上传最大图片为100K,一次一张。
- 图片预览真的不好看,再加上我的CSS写的不是太好,所以对话框难看,界面丑,但功能是全部实现了的。
0913 更新
- 完成表情包图片,至此,一对一聊天基本完成,可以集成到商城、客服系统(只要把客服ID做个图标加到客人要点的地方即可),如果要PC版客服后台,可以单独做一套页面(基于这一套修改,只需要改一下界面),以前有做过,各项功能实现是没有任何问题,但UI界面确实不是我的强项。
0916 更新
- 完成好友添加功能,(点击添加好友暂时没写添加申请页面),同意(拒绝)添加好友,(删除好友暂末添加),因为此部分主要是在后台完成,后台代码进行了多版的修订。
- 后台功能增加 ,取得好友列表、好友请求处理、返回请求列表、同意(拒绝)添加好友,因为好友聊天也是一对一,聊天功能不存在什么更新。
0922 更新