【直播数据分析】2022年 9月 最新抖音wss 分析

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最近朋友给我推荐了一个直播互动游戏，比如互动蹦迪，火车游戏. 互动游戏里面的角色和操作根据用户直播的头像和评论指定文字进行匹配。

---

本文主要讲解的是抖音直播Web的数据分析方式（普通的短视频分析方式类似）。APP的Hook-xposed 比较复杂，后续文章再单独介绍。

---

话多不如贴图一张（以下是抖音的网页版直播互动评论数据）

开始分析

1. 分析开始，找到数据解析后的入口

第一步：打开网址

抖音web直播打开后。随便进入一个用户的直播，
美女我就马赛克了，重点是→_→右边的评论数据和礼物数据。
这边提个醒: 抖音的直播会根据用户是否开启隐私，则评论的用户昵称***出现。

第二步：打开debug工具

打开当前页面后，我们Chrome浏览器按F12,切换到Network（网络）栏
根据正常思路，这种

第三步：猜测入口

评论和点赞前端的实时更新不可能走api循环，都是走socket，网页版本的websocket， ws接口如果 带证书是wss接口。
既然是ws接口，那ws的基本方法贴个简单的如下：

这里我们最重要的是要找到onmessage消息

第四步：搜索入口

能看到这部wss有一个，参数右边，初始化wss的时候他的参数需要携带，那么我们就一个一个来查找看看这个wss是哪个js文件去连接，首先我们用app_name：douyin_web参数

键盘快捷键：Ctrl+Shift+F ,输入搜索词：douyin_web

可以找到的js文件有3个，那怎么确定这三个文件是哪个文件的哪一行代码呢？

第五步：找到入口方法后定位

思路：

1. ws的消息获取是onmessage，那我们就去看看哪个js文件有这个，这里我们发现只有Living.7ef91113.js这个文件里出现

2. 因为ws评论数据解析的最后要输出到网页上显示给我们看，那么我们就可以根据网页上的显示Html代码或是ID字段去判断是代码里的具体哪行代码生成
   
   可以看到这里的class: webcast-chatroom___item webcast-chatroom___enter-done 一个评论一个，那我们就匹配搜索这个字符：enter-done
   
   找到了指定的方法，那就准备断点吧

第六步：继续定位具体的想要方法

断完点后右边就有了method的方法：WebcastRoomMessage，我们在这个Living.7ef91113.js 找到这个方法：

第七步：入口找到成功

发现这个地方就是我们要的onmessage 解析后的入口了。（可以断点，然后发现每次有用户的消息过来就会触发断点）

以上的就是找到直播的评论wss 入口数据方式。

2. 如何在入口 Hook 自己代码

刚刚我们在第一个步骤里已经找到了Living.7ef91113.js这个入口文件，那怎么样可以让数据解析后的每次结果打印或是发到我们的ws | API 入口上呢?

方法一： 使用Fiddler 工具，指定url的js替换为自己的js

方法二：编写Chrome插件工具，匹配 Living.7ef91113.js （抖音这个文件名会每天变一次） 规则，然后在指定的方法上Hook为自己的代码。

直接贴代码：background.js

var ReplaceMap = [
//这边2022.9月20号后的地址规则有变化-包括Living.**.js的文件要对应的下载更换
//2022.9.20变化为:{req:"webcast/douyin_live/async/Living",res:chrome.extension.getURL("/lib/dyLive.js"),checked:true}
    {req:"resource/async2/Living",res:chrome.extension.getURL("/lib/dyLive.js"),checked:true}
];

function getLocalFileUrl(url) {
    var arr = url.split('.');
    var type = arr[arr.length-1];
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, false);
    xhr.send(null);
    var content = xhr.responseText || xhr.responseXML;
    if (!content) {
        return false;
    }
    content = encodeURIComponent(
        type === 'js' ?
            content.replace(/[\u0080-\uffff]/g, function($0) {
                var str = $0.charCodeAt(0).toString(16);
                return "\\u" + '00000'.substr(0, 4 - str.length) + str;
            }) : content
    );
    return ("data:" + (typeMap[type] || typeMap.txt) + ";charset=utf-8," + content);
}

chrome.webRequest.onBeforeRequest.addListener(function (details) {
        var url = details.url;
        for (var i = 0, len = ReplaceMap.length; i < len; i++) {
            var reg = new RegExp(ReplaceMap[i].req, 'gi');
            if (ReplaceMap[i].checked && typeof ReplaceMap[i].res === 'string' && reg.test(url)) {
                do {
                    url = ReplaceMap[i].res;
                } while (reg.test(url))
            }
        }
        return url === details.url ? {} : { redirectUrl: url };
    },
    {urls: ["<all_urls>"]},
    ["blocking"]
);

对应文件 dyLive.js 这个文件就是步骤一里获取的 Living.7ef91113.js （

改文件名抖音每一段时间都会变化，可以根据文章方法最新的方式再获取

） 其中一段代码改写
可以自己下载文件后加个日志打印测试下。

推荐一个写好的插件下载地址（当前下载地址受版权影响已下架）

文章提供的思路或是方案请作学习使用，勿用于非法用途，如果出现风险请自行承担。