当前位置: 首页 > news >正文

监听抖音直播间的评论并实现存储

监听抖音直播间评论,主要是动态监听dom元素的变化,如果评论是图片类型的,获取alt的值

主要采用的是MutationObserver:https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

index.js如下所示:function getPL() {var targetElement = document.querySelector('.webcast-chatroom___items');targetElement = targetElement.children[0];// 创建 MutationObserver 对象var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObservervar observer = new MutationObserver(function (mutations) {mutations.forEach(function (mutation) {// console.log("元素已经发生了变化");// console.log(mutation.addedNodes[0].innerHTML);var html = mutation.addedNodes[0].innerHTML;var tempElement = document.createElement('div');tempElement.innerHTML = '<div id="zbjdiv">' + html + '</div>';//获取名称var name = tempElement.querySelector('.u2QdU6ht').innerText;name = name.split(':')[0];// 获取评论内容var b = tempElement.querySelector('.WsJsvMP9');b = b.childNodes;var ctext = '';for (var i = 0; i < b.length; i++) {var cname = b[i].getAttribute('class');if (cname == 'webcast-chatroom___content-with-emoji-emoji ') {if (b[i].childNodes) {var c = b[i].childNodes;for (var j = 0; j < c.length; j++) {ctext += c[j]['alt'];}}}if (cname == 'webcast-chatroom___content-with-emoji-text') {ctext += tempElement.querySelector('.webcast-chatroom___content-with-emoji-text').innerText;}}if (mutation.addedNodes && mutation.addedNodes[0].innerText) {content.push({nickname: name,content: ctext,zbj: zbj})// 这里可以添加处理逻辑localStorage.setItem('key1', JSON.stringify(content))}// content.push(mutation.target.innerText)});});// 配置选项var config = { attributes: false, childList: true, subtree: true };// 开始监听observer.observe(targetElement, config);
}
function sendData() {var params = {type: 'save_barrage',barrage_data: content}var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象xhr.open("post", "存储数据接口"); //设置请求类型为POST并指定URL地址// xhr.setRequestHeader('Content-Type', 'application/json'); //设置请求头部信息(可选)xhr.onreadystatechange = function () { //处理服务器返回结果的函数if (xhr.readyState === 4 && xhr.status === 200) { //当状态变为4且HTTP状态码为200时表示请求成功// console.log(xhr); //输出服务器返回的内容var res = JSON.parse(xhr.responseText);// console.log(res, typeof res)if (res.code == 0) {// console.log('发送成功');content = [];localStorage.setItem('key1', JSON.stringify(content))}} else {// console.log("正在发送"); //若请求失败则打印错误消息}};xhr.send(JSON.stringify(params));
}var time = 10000;
// var content = localStorage.getItem('key1');
// if (content) {
//     content = JSON.parse(content);
// } else {
var content = [];
// }
var zbj = document.querySelector(".aH7KWm2V").innerText;
// if (zbj.indexOf('(')) {
//     zbj = zbj.split('(')[0]
// }
var zbjname = '';
function initZBJ(bool = false, zbjname) {  //发送数据   zbjname = zbjname;if (!zbjname || zbjname == '直播' || zbjname == '直播间') {console.log('请检查是否已输入直播间名称或是否正确输入直播间名称');return false;}if (zbj.indexOf(zbjname) != -1) {if (bool) {getPL();setInterval(function () {if (content.length > 0) {sendData();}}, time)} else {console.log(zbj + '数据没有存储');}} else {console.log('请检查是否已输入直播间名称或是否正确输入直播间名称');}
}

运行index.js

第一种方式:将下面的代码运行在浏览器的console中,缺点:每一次都需要复制下面代码
第二种方式:
在这里插入图片描述

运行代码:
var script = document.createElement('script');
script.src = 'XXX/index.js';  //index.js在服务器存放的位置
document.head.appendChild(script);var bool=true; //true:监听评论并存储,false:不监听不存储script.onload = function () {initZBJ(bool,'监听的直播间名称');//第二个参数:直播间名称(必填)
}

相关文章:

监听抖音直播间的评论并实现存储

监听抖音直播间评论&#xff0c;主要是动态监听dom元素的变化&#xff0c;如果评论是图片类型的&#xff0c;获取alt的值 主要采用的是MutationObserver&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver index.js如下所示:function getPL() {…...

一体机电脑辐射超标整改

电脑一体机是目前台式机和笔记本电脑之间的一个新型的市场产物&#xff0c;它将主机部分、显示器部分整合到一起的新形态电脑&#xff0c;该产品的创新在于内部元件的高度集成。随着无线技术的发展&#xff0c;电脑一体机的键盘、鼠标与显示器可实现无线链接&#xff0c;机器只…...

重学SpringBoot3-路径匹配机制

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-路径匹配机制 AntPathMatcherPathPatternParser 和 PathPattern演示AntPathMatcher 示例PathPattern 示例性能和精确度的提升 选择使用哪一种 在 Spring…...

【贪心算法】摆动序列

如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;如果存在的话&#xff09;可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。 例如&#xff0c; [1, 7, 4, 9, 2, 5] 是一个 摆动序列 &…...

Unload-labs

function checkFile() {var file document.getElementsByName(upload_file)[0].value;if (file null || file "") {alert("请选择要上传的文件!");return false;}//定义允许上传的文件类型var allow_ext ".jpg|.png|.gif";//提取上传文件的类…...

SRS-220VDC-4Z-10A静态中间继电器 额定电压DC220V 四副转换触点 JOSEF约瑟

系列型号&#xff1a; SRS-24VDC-4Z-8A静态中间继电器&#xff1b;SRS-24VDC-4Z-10A静态中间继电器&#xff1b; SRS-24VDC-4Z-16A静态中间继电器&#xff1b;SRS-24VAC-4Z-8A静态中间继电器&#xff1b; SRS-24VAC-4Z-10A静态中间继电器&#xff1b;SRS-24VAC-4Z-16A静态中…...

解决electron打包vue-element-admin项目页面无法跳转的问题

解决electron打包vue-element-admin项目页面无法跳转的问题 说明之前通过这个教程已经打包成功&#xff0c;但是发现进行账号密码登录后页面无法跳转的问题。现在已经解决&#xff0c;所以记录一下。 1、检查路由模式是否为hash模式&#xff0c;如果不是改成hash模式。 new Ro…...

Uniapp Vue2 image src动态绑定static目录下的图片

报错的static地址写法&#xff1a; this.url ../static/img.png this.url /static/img.png 正确的static地址写法&#xff1a; this.url /static/img.png 动态绑定 <image :src"url"></image>...

【UE5】动画混合空间的基本用法

项目资源文末百度网盘自取 什么是动画混合空间 混合空间分为两种: 通过一个数值控制通过两个数值控制 下面通过演示让大家更直观地了解 在Character文件夹中单击右键,选择动画(Animation),选择旧有的混合空间1D 然后选择骨骼&#xff08;动画是基于骨骼显示的,所以需要选择…...

用红黑树封装实现map和set

目录 1、map和set的底层 2、map与set中的key关键值 3、红黑树迭代器的实现。 1、操作 2、-- 操作 3、和!操作 4、在红黑树中封装迭代器 5、map和set对迭代器的封装 1、map map中[]的重载 2、set 1、map和set的底层 map和set都是基于红黑树实现的。红黑树是一种自平衡…...

【阿里云系列】-部署ACK集群的POD应用日志如何集成到日志服务(SLS)中

介绍 我们在实际部署应用到阿里云的ACK集群后&#xff0c;由于后期应用服务的持续维护诉求可能需要跟踪排查问题&#xff0c;此时就要具备将应用的历史日志存档便于后期排查问题 处理方式 为了解决以上的普遍需求&#xff0c;需要将ACK中的应用日志采集到SLS的Logstore中,然…...

Vue中给当前页面传递参数并重新加载,vue使用this.$router.push跳转页面,给跳转过去的页面传参不一致时重新加载

vue通过this.$router.push给url传参&#xff0c;改变url但是当前页面不会自动刷新 跳转页面代码 this.$router.push({name: allbusiness,query: {pw_id: item.id} });1.使用 watch 监听 $route 对象的变化&#xff0c;当路由发生变化时重新加载数据或执行其他操作。 2.利用路…...

【扩散模型(一)】综述:扩散模型在文本生成领域应用

一、论文信息 1 标题 Diffusion models in text generation: a survey 2 作者 Qiuhua Yi, Xiangfan Chen, Chenwei Zhang, Zehai Zhou, Linan Zhu, Xiangjie Kong 3 研究机构 1 College of Computer Science and Technology, Zhejiang University of Technology, HangZho…...

K8S Pod

基本概念 Pod是K8S中非常重要的概念之一&#xff0c;是整个K8S架构的基础和核心。Pod是K8S调度的最小单位&#xff0c;是一个不可拆分的独立个体&#xff0c;K8S将多个业务上相关联的容器&#xff08;Docker容器&#xff09;合并到一起&#xff0c;组合成一个Pod&#xff0c;这…...

反向传播(backward propagation,BP) python实现

BP算法就是反向传播&#xff0c;要输入的数据经过一个前向传播会得到一个输出&#xff0c;但是由于权重的原因&#xff0c;所以其输出会和你想要的输出有差距&#xff0c;这个时候就需要进行反向传播&#xff0c;利用梯度下降&#xff0c;对所有的权重进行更新&#xff0c;这样…...

简单算命脚本

效果展示 文件内容 main.py文件 import json import random import time# 别挂配置数据 gua_data_path "data.json"# 别卦数据 gua_data_map {} fake_delay 10# 读取别卦数据 def init_gua_data(json_path):with open(gua_data_path, r, encodingutf8) as fp:gl…...

Lua-掌握Lua语言基础1

Lua是一种轻量级的脚本语言&#xff0c;广泛应用于游戏开发、嵌入式系统和其他领域。下面是Lua语言基础的介绍&#xff1a; 数据类型&#xff1a;Lua支持基本的数据类型&#xff0c;包括nil、boolean、number、string和table。其中&#xff0c;table是一种关联数组&#xff0c;…...

python-0003-pycharm开发虚拟环境中的项目

前言 在虚拟环境中创建好了python项目&#xff0c;使用pycharm进行开发 打开项目 使用pycharm打开项目 设置虚拟环境的解释器 File–>Settings–>Project(项目名)–>Python Interpreter–>添加解释器–>添加已经存在的解释器–>选择虚拟环境的解释器 …...

修改 MySQL update_time 默认值的坑

由于按规范需要对 update_time 字段需要对它做默认值的设置 现在有一个原始的表是这样的 CREATE TABLE test_up (id bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT 主键id,update_time datetime default null COMMENT 操作时间,PRIMARY KEY (id) ) ENGINEInnoDB DEF…...

基于亚马逊云EC2+Docker搭建nextcloud私有化云盘

亚马逊云科技EC2云服务器&#xff08;Elastic Compute Cloud&#xff09;是亚马逊云科技AWS&#xff08;Amazon Web Services&#xff09;提供的一种云计算服务。EC2代表弹性计算云&#xff0c;它允许用户租用虚拟计算资源&#xff0c;包括CPU、内存、存储和网络带宽&#xff0…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...