精易论坛

标题: 嵌入式网站聊天系统,前端+服务端+行为追踪+数据可视化分析 [打印本页]

作者: 驱动玩家 时间: 2025-5-30 01:17
标题: 嵌入式网站聊天系统,前端+服务端+行为追踪+数据可视化分析
本帖最后由驱动玩家于 2025-5-30 02:10 编辑

公司官网要加在线客服，但外面的都收费太贵。所以自己就写了一个，新鲜出炉，分享出来。

嵌入式网站聊天系统，前端 + WebSocket 服务端 + 用户行为追踪+数据可视化分析
支持文本、图片、文件传输、多标签同步、行为追踪、热力分析、数据存储与可视化等功能

文件介绍：
1、widget.js（前端 UI 控制）放自己服务器，给个wai网地址
2、chat-core.js（前端通信逻辑）放自己服务器，给个wai网地址
3、server.py（WebSocket 服务端）  爱放哪放哪，现在默认的服务器地址时 192.168.1.3:8002 自己改一下吧
4、user_behavior_visual.py（可视化热力图+行为动画回放生成脚本）
5、文件夹uploads 储存用户上传的图片和文件（用户上传的文件都会以【123.txt_911970.f】这个格式命名，123.txt是用户的原文件名，后面加的随机数字和.f是为了防重和防误点击）
6、文件夹track储存生成的行为分析报告
7、chat_history.db 数据库文件
其他操作看我传的图片

给自己的前端页面插入以下代码就可以调用（放在body体里面，cs.src地址自己更换）：

<script>
  (function() {
var cs = document.createElement('script');
cs.src = "http://192.168.1.3:8080/widget.js";
cs.async = true;
document.body.appendChild(cs);
  })();
</script>

一、前端聊天功能（网页嵌入模块）
1、漂浮按钮入口       固定左下角聊天图标，点击弹出聊天窗口，带动画缩放
2、消息支持类型       文本、图片、任意文件（分包传输）
3、消息记录       本地储存记录。只要用户不清理浏览器数据，刷新或关闭页面不丢失聊天记录。
4、多标签页同步       消息广播以保持多个标签页消息一致性
5、发送与接收音效反馈（send.wav / received.wav）
6、震动提醒       有新消息时悬浮图标按钮自动抖动
7、图片预览       聊天图片可点击放大，支持缩放拖动、hk控制
8、发送状态提示       发送成功/失败后展示状态文字
9、客服头像与用户头像区分       左右对话框显示不同角色头像
10、消息去重       多标签页间避免重复渲染消息

二、用户行为收集模块（前端内置行为追踪）

1、鼠标轨迹，每次移动记录 x, y, timestamp
2、点击行为，记录点击位置与时间
3、滚动记录，记录滚动高度与时间
4、页面可见性，使用document.visibilityState判断是否活跃
5、页面停留时间
6、用户设备信息，收集 IP、userAgent、系统、网络、屏幕等参数
7、数据上报频率，每 30 秒向服务端上报一次行为数据（页面被关闭时会立即上传）

三、后端服务功能（Python WebSocket 服务）

1、WebSocket通讯，异步支持多客户Duan同时在线
2、用户识别，每位访客自动生成唯一userId
3、数据存储，使用 SQLite 存储消息、用户信息、行为日志
4、消息分发，一对一收发，支持多客户Duan同步（多浏览器/设备）
5、文件支持，分片上传大文件（每片 1MB）并重组保存
6、用户初始化，接收用户基本信息 user_info 和初始连接标识 init
7、异常处理，自动重连、错误日志打印、连接中断处理

四、可视化功能（Python 脚本分析用户行为）
1、鼠标轨迹热力图，可绘制鼠标集中区域的热点图
2、点击以及鼠标轨迹动画回放，可生成用户行为动态视频（带点击标记）
4、行为数据导出，从 SQLite 中读取 JSON 格式行为轨迹做数据分析

除了server.py之外其他的代码我都没写注释,自己找AI帮忙给加吧，用的时候把我的logo和小图标都换掉！！！我公司的官网用的这些不要和我撞车！谢谢！！有什么不明白的帖子留言吧。对了生成行为动画需要ffmpeg的支持，下载下来以后配置bin目录的系统变量就可以，下载地址:https://www.gyan.dev/ffmpeg/builds/ 下载 ffmpeg-git-full.7z 这个。不喜欢python服务端的自己对接易语言的吧

嵌入式聊天系统.rar (307.42 KB, 下载次数: 55, 售价: 1 枚精币)

作者: 菜鸟2022 时间: 2025-5-30 07:42
这个要深深的给你点赞！很棒

作者: 菜鸟2022 时间: 2025-5-30 07:43
建议模拟QQ聊天窗口，右边可以展示公司广告（图文模式）

作者: 非常猥锁 时间: 2025-5-30 08:02
收下，说不定哪天用得上

作者: qqmqqg 时间: 2025-5-30 08:10
666666666666666666

作者: Fate 时间: 2025-5-30 08:18

感谢分享

作者: 半睡半醒 时间: 2025-5-30 08:21
谢谢分享功能不错

作者: bianyuan456 时间: 2025-5-30 08:32
已经顶贴，感谢您对论坛的支持！

作者: wuqingg 时间: 2025-5-30 08:32
感谢分享，很给力~~

作者: kyo9766 时间: 2025-5-30 09:40
学习一下，感谢分享

作者: cf2006a 时间: 2025-5-30 09:57
好高级的样子！

作者: fyh505099 时间: 2025-5-30 10:30
感谢分享，给力!

作者: 皮皮君 时间: 2025-5-30 11:00
精易模块大漠模块

作者: 一指温柔 时间: 2025-5-30 11:27
感谢分享

作者: pipicool 时间: 2025-5-30 13:14
学习一下

作者: hbtudou 时间: 2025-5-30 13:26
功德+1

作者: rensheng2021 时间: 2025-5-30 14:03
好东西，感谢分享！

作者: renhe2018 时间: 2025-5-30 16:06
看着真不错。感觉回到了网易聊天室的时代啊

作者: xshn 时间: 2025-5-30 20:43
感谢分享！！

作者: 亿万 时间: 2025-5-30 21:31
感谢分享

作者: year1970 时间: 2025-5-31 08:49
感谢分享

作者: jable 时间: 2025-5-31 18:49
进来看看俺

作者: JYYeah 时间: 2025-5-31 20:54
开源精神必须支持~

作者: 恩赐 时间: 2025-5-31 23:50
这玩意不是有现成开源的吗

作者: pipicool 时间: 2025-6-1 02:23
学习一下

作者: shareol25 时间: 2025-6-1 12:45
发的网址能不能直接超链接的

作者: 铭焱 时间: 2025-6-2 00:02

感谢分享

作者: please 时间: 2025-6-2 09:36
感谢分享，支持开源！！！

作者: wh1234567 时间: 2025-6-3 08:57
感谢分享..

作者: byronzhj 时间: 2025-6-9 10:42
明文还是加密的呀？

欢迎光临精易论坛 (https://125.confly.eu.org/)