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

news2024/11/17 23:33:07

监听抖音直播间评论,主要是动态监听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.MozMutationObserver
    var 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,'监听的直播间名称');//第二个参数:直播间名称(必填)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1515154.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

29网课交单平台源码最新修复全开源版本

去除论文编辑 去除强国接码 修复上级迁移 修复聚合登录 修复支付不回调 优化支付接口兼容码/易支付 优化MySQL表&#xff0c;提高网页加载速度 下载地址&#xff1a;https://pan.xunlei.com/s/VNstLrJaRtbvDyovPQ-CbISOA1?pwd622t#

数字人基础 | 3D手部参数化模型2017-2023

楔子: 2017年年底的泰国曼谷, SIGGRAPH Asia会议上, 来自马普所的 Javier Romero, Dimitrios Tzionas(两人都是 Michael J. Black的学生)发布了事实性的手部参数化模型标准: MANO [1]。 MANO的诞生意味着 Michael J. Black团队在继人体参数化模型 SMPL后, 事实性的将能够表达人…

【正则表达式】正则表达式里使用变量

码 const shuai No My Name Is ShuaiGe.match(new RegExp(shuai, gi)); //↑↑↑↑↑↑↑↑ //等同于 //↓↓↓↓↓↓↓↓ /No/.test(My Name Is ShuaiGe)用作领域 搜索的字符动态改变&#xff0c;例如↓模糊搜索例&#xff1a; 一个文本宽&#xff0c;输入文本模糊搜索用户…

【哈希映射】【 哈希集合】 381. O(1) 时间插入、删除和获取随机元素 - 允许重复

作者推荐 视频算法专题 本文涉及知识点 哈希映射 哈希集合 LeetCode 381. O(1) 时间插入、删除和获取随机元素 - 允许重复 RandomizedCollection 是一种包含数字集合(可能是重复的)的数据结构。它应该支持插入和删除特定元素&#xff0c;以及删除随机元素。 实现 Randomiz…

【漏洞复现】金和OA viewConTemplate.action RCE漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

XIAO ESP32S3部署Edge Impulse模型

在上一篇文章中我们介绍了如何使用edge impulse训练一个图片分类模型并导出arduino库文件。在这篇文章中我们将介绍如何在esp32s3中部署这个训练好的图片分类模型。 添加进Arduino库 有两种方法将下载的文件添加进Arduino库。 在Arduino IDE程序中&#xff0c;转到项目选项卡…

php apache 后台超时设置

最近在写一个thinkphp项目的时候&#xff0c;发现Ajax从后端请求数据时间比较长&#xff0c;大概需要45秒左右&#xff0c;但是一旦请求时间超过40s&#xff0c;页面就会超时500了&#xff0c;一开始以为是ajax请求时间不能太长&#xff0c;后来将Ajax请求改为同步且timeout设置…

景联文科技:提供行业垂直大模型训练数据

近年来&#xff0c;以大模型为代表的人工智能技术已成为国家科技实力竞争的焦点。其中垂直大模型作为重要方向&#xff0c;在相关政策引导及市场需求的驱动下&#xff0c;已展现出较强的发展活力。 行业垂直大模型是针对特定行业的需求和场景进行深度定制的。这意味着模型在训练…

软考高级:需求变更管理过程概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

【ARM】MDK在programming algorithm界面添加FLM

【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 解决在programming algorithm界面中无法添加想要的Flash编程算法的问题 2、 问题场景 在对于Debug进行Flash Download进行配置的时候&#xff0c;在programming algorithm界面中有对应的Flash编程算法。可以通过…

【python】anaconda安装过程

【运行环境】Windows11 文章目录 一、anaconda下载二、anaconda安装三、环境变量配置四、测试环境变量是否配置成功五、总结 一、anaconda下载 1、输入网址“https://www.anaconda.com”进入Anaconda官网。 2、找到【Free Download】点击进入&#xff1a; 3、点击对应系统的…

spring源码环境搭建问题解决

源码搭建需要提前准备的环境 jdk环境变量配置 gradle环境变量配置&#xff08;gradle安装配置详细教程(windows环境)_windows安装gradle-CSDN博客&#xff09; spring5.2.x jdk1.8 gradle5.6.4(源码对应的gradle版本查看路径&#xff0c;在源码中找对应文件配置&#xff1a…

leetcode一天一题-第1天

为了增加自己的代码实战能力&#xff0c;希望通过刷leetcode的题目&#xff0c;不断提高自己&#xff0c;增加对代码的理解&#xff0c;同时开拓自己的思维方面。 题目名称&#xff1a;两数之和 题目编号&#xff1a;1 题目介绍&#xff1a; 给定一个整数数组 nums 和一个整数…

基于恒功率PQ控制的三电平并网逆变器MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 三相 T 型三电平逆变器电路如图所示&#xff0c;逆变器主回路由三个单相 T 型逆变器组成。 直流侧输入电压为 UPV&#xff0c;直流侧中点电位 O 设为零电位&#xff0c;交流侧输出侧是三相三线制连…

【快速上手ProtoBuf】proto 3 语法详解

1 &#x1f351;字段规则&#x1f351; 消息的字段可以⽤下⾯⼏种规则来修饰&#xff1a; singular &#xff1a;消息中可以包含该字段零次或⼀次&#xff08;不超过⼀次&#xff09;。 proto3 语法中&#xff0c;字段默认使⽤该规则。repeated &#xff1a;消息中可以包含该…

【Java设计模式】十九、中介者模式

文章目录 1、中介者模式2、案例3、总结 1、中介者模式 如图&#xff1a; 同事类之间关联较多时&#xff0c;整体出现网状结构&#xff0c;耦合度极高。一个对象一变动&#xff0c;好多对象都得改。若变为右边的星形结构&#xff0c;则一个类的变动&#xff0c;只影响自身与中介…

滴滴 Flink 指标系统的架构设计与实践

毫不夸张地说&#xff0c;Flink 指标是洞察 Flink 任务健康状况的关键工具&#xff0c;它们如同 Flink 任务的眼睛一般至关重要。简而言之&#xff0c;这些指标可以被理解为滴滴数据开发平台实时运维系统的数据图谱。在实时计算领域&#xff0c;Flink 指标扮演着举足轻重的角色…

vue中ref 根据多选框所选数量,动态地变换box的高度

查看本专栏目录 关于作者 还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#x…

BufferWriter类解析

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java SE相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…

如何进行软件安全性测试?CMA、CNAS软件安全测试报告获取

软件安全性测试是保障软件应用安全的重要手段&#xff0c;通过对软件系统的安全性进行全面评估和检测&#xff0c;以确保软件能够抵御各种潜在的安全威胁和风险。那么如何进行软件安全性测试?CMA、CNAS软件安全测试报告又该如何获取呢? 软件安全性测试是一种基于黑盒测试的方…