嵌入式网站聊天系统,前端+服务端+行为追踪+数据可视化分析

驱动玩家

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

嵌入式网站聊天系统，前端 + 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, 下载次数: 32, 售价: 1 枚 精币)

昨天 01:16 上传

点击文件名下载附件

亿万

感谢分享

xshn

感谢分享！！

renhe2018

看着真不错。感觉回到了网易聊天室的时代啊

rensheng2021

好东西，感谢分享！

hbtudou

功德+1        

pipicool

学习一下

一指温柔

感谢分享

皮皮君

精易模块 大漠模块

fyh505099

感谢分享，给力!