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

监听抖音直播间评论,主要是动态监听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.mfbz.cn/a/456123.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

交流回馈老化测试负载如何实现这些功能的

交流回馈老化测试负载是一种用于模拟电力系统中各种负载特性的装置&#xff0c;它可以对电力设备进行长时间的老化测试&#xff0c;以确保其在实际运行中的稳定性和可靠性。交流回馈老化测试负载主要通过以下几个方面实现这些功能&#xff1a; 1. 模拟负载特性&#xff1a;交流…

科普:防泄密软件下载(实用+收藏篇)

防泄密软件是企业构建安全信息环境、保障业务稳定发展的重要工具。是一种专门用于保护数据安全、防止信息泄露的软件工具。 它能够监控和管理电脑的使用行为&#xff0c;防止敏感数据被非法获取、篡改或传播。 防泄密软件通过实时监控、加密技术、访问控制等手段&#xff0c;…

C# EPPlus导出dataset----Excel2绘制图像

一、生成折线图方法 /// <summary> ///生成折线图 /// </summary> /// <param name="worksheet">sheet页数据 </param> /// <param name="colcount">总列数</param> /// &l…

LarkXR上新了 | Apollo多终端与XR体验的优化创新

作为领先的数字平行世界产品技术提供方&#xff0c;「Paraverse平行云」一直致力于为企业和开发者提供企业级实时云渲染解决方案。其多终端接入产品LarkXR Apollo&#xff0c;基于底层Runtime技术&#xff0c;实现了在Windows、Linux、MacOS、Android、iOS等多种操作系统下&…

mysql中文乱码解决方案

mysql中文乱码解决方案 现象 查看配置时&#xff0c;字符编码已经全是utf8&#xff0c;但查询时中文还是乱码&#xff1a; 原因 虽然查看字符编码时已经是utf8&#xff0c;但当数据库被连接时&#xff0c;可能还会是协商出其他的编码。 解决 需要强制将协商的编码都变成…

机试:成绩排名

问题描述: 代码示例: #include <bits/stdc.h> using namespace std;int main(){cout << "样例输入" << endl; int n;int m;cin >> n;int nums[n];for(int i 0; i < n; i){cin >> nums[i];}// 排序for(int i 0; i < n; i){//…

[c++] 右值引用

1 左值和左值引用 在说右值引用之前&#xff0c;需要先说一下左值引用。当然&#xff0c;在右值引用出现之前&#xff0c;左值引用也不叫左值引用&#xff0c;就叫引用。现在一般也直接将左值引用称作引用&#xff0c;将右值引用称作右值引用。左值引用类似于 c 语言中经常使用…

算法详解——图的深度优先遍历和广度优先遍历

目录 一、图结构二、深度优先遍历2.1 图的遍历2.2 深度优先遍历过程2.3 深度优先遍历核心思想2.4 深度优先遍历实现 三、广度优先遍历3.1 广度优先遍历过程3.2 广度优先遍历核心思想3.3 广度优先遍历实现 参考文献 一、图结构 图结构指的是如下图所示的由节点和边组成的数据。 …

力扣刷题Days18-190颠倒二进制位(js)

目录 1&#xff0c;题目 2&#xff0c;代码 1&#xff0c;逐位颠倒 800001011 循环过程&#xff1a; 最终结果&#xff1a; 3&#xff0c;学习与总结 1&#xff0c;<< 位运算符 1&#xff0c;题目 颠倒给定的 32 位无符号整数的二进制位。 2&#xff0c;代码 1…

高频:spring知识

1、bean的生命周期&#xff1f; 主要阶段 初始化 org.springframework.context.support.ClassPathXmlApplicationContext prepareRefresh 信息: Refreshing org.springframework.context.support.ClassPathXmlApplicationContext67424e82: startup date []; root of context hi…

代码原理文献阅读(4)_3.12

4.2.经济调度问题(ED) 事实上&#xff0c;UC本质上也是一种ED问题。但随着电力电子技术的快速发展&#xff0c;越来越多的新型设备接入电力系统&#xff0c;调度逐渐变得"杂"、"散"、"灵活" 。此时&#xff0c;系统受到不确定性的影响更加强烈&a…

微信小程序 uniapp+vue学生考勤签到系统19j29

签到基本是没一个学生和教育工作者都要面对的一个事情&#xff0c;传统的签到都是需要单独找老师签到&#xff0c;或者老师课堂上单名来完成的&#xff0c;但是随着时代的发展这种比较落后的管理方式已经逐渐的被广大高校摒弃&#xff0c;教育工作者需要一种更加灵活且操作方便…

OCR-free相关论文梳理

⚠️注意&#xff1a;暂未写完&#xff0c;持续更新中 引言 通用文档理解&#xff0c;是OCR任务的终极目标。现阶段的OCR各种垂类任务都是通用文档理解任务的子集。这感觉就像我们一下子做不到通用文档理解&#xff0c;退而求其次&#xff0c;先做各种垂类任务。 现阶段&…

Linux系统架构----Tomcat 部署

一.Tomcat概述 Tomcat服务器是一个免费的开放式源代码的web应用服务器&#xff0c;属于轻量级应用级服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP程序的首首选。 一般来说&#xff0c;tomcat虽然和Apache或者Nginx这些…

CSS:实现择色器透明度条的两种方法(附赠一个在线图片转base64网站)

一、效果展示 二、实现方式 1.锥形渐变 .main{width: 600px;height: 20px;background: repeating-conic-gradient(rgba(1, 1, 1, 0.1) 0 25%,transparent 0 50%);background-size: 20px 20px;} 2.背景图 将一个四方格图片转为base64然后直接在css中使用 .main1 {width: 600p…

RabbitMQ 模拟实现【四】:虚拟主机设计

文章目录 虚拟主机设计虚拟主机分析交换机和虚拟主机之间的从属关系核心 API发布消息订阅消息应答消息消费者管理类 虚拟主机设计 虚拟主机分析 类似于 MySQL 的 database&#xff0c;把交换机&#xff0c;队列&#xff0c;绑定&#xff0c;消息…进⾏逻辑上的隔离&#xff0…

医学数据分析中缺失值的处理方法

医学数据分析中缺失值的处理方法 &#xff08;为了更好的展示&#xff0c;在和鲸社区使用代码进行展示&#xff09; 医学数据分析中&#xff0c;缺失值是不可避免的问题。缺失值的存在会影响数据的完整性和准确性&#xff0c;进而影响分析结果的可靠性。因此&#xff0c;在进…

php+vue+mysql公司员工薪酬工资管理系统

采用面向对象的思维方式&#xff0c;以符合实际的功能与性能要求&#xff0c;并进行了创新。为了提升小型企业工资管理的自动化和友善性的小型企业工资管理系统。 本文提出了一种基于面向对象的思想方法&#xff0c;以适应系统的实际功能与性能要求。为了使小型企业工资管理更具…

柚见第十期(后端队伍接口详细设计)

创建队伍 用户可以 创建 一个队伍&#xff0c;设置队伍的人数、队伍名称&#xff08;标题&#xff09;、描述、超时时间 P0 队长、剩余的人数 聊天&#xff1f; 公开 或 private 或加密 信息流中不展示已过期的队伍 请求参数是否为空&#xff1f;是否登录&#xff0c;未登录不…

决策树 | 分类树回归树:算法逻辑

目录 一. 决策树(Decision Tree)1. 决策树的构建1.1 信息熵(Entropy)1.1.1 信息量&信息熵 定义1.1.2 高信息熵&低信息熵 定义1.1.3 信息熵 公式 1.2 信息增益(Information Gain)1.2.1 信息增益的计算1.2.2 小节 2. 小节2.1 算法分类2.2 决策树算法分割选择2.3 决策树算…