抖音直播Web端框架及消息处理流程分析(2022年12月更新)_抖音 x-bogus

本文仅供个人研究学习，请勿用于任何非法及商业用途，否则后果自负。转载前请联系本人。

目前有不少工具在做抖音截流获客，最近碰到个类似需求，于是花了些时间分析了抖音直播web端的相关技术，借助chrome强大的调试功能，web端的胴体就慢慢呈现出来了。

一、结构分析

先简单介绍下抖音web端数据收发的流程

抖音直播web端目前数据传输使用的google的brotli压缩算法，类似传统gzip，但是压缩比更高。

在数据发送和解析时加了一层protobuf，目的也是压缩传输内容节省带宽，这个东西也是出自google。它的定义文件在代码中也不难找到，你所要做的就是把相关定义抠出来。

function decode(e:Buffer){
    e instanceof a || (e = new a(e));
    for (var n = t === undefined ? e.len : e.pos + t, r = {}; e.pos < n;) {
        var o = e.uint32();
        switch (o >>> 3) {
            case 1:
                r.common = c.webcast.im.Common.decode(e, e.uint32());
                break;
            case 2:
                r.user = c.webcast.data.User.decode(e, e.uint32());
                break;
            case 3:
                r.content = e.string();
                break;
            case 4:
                r.visibleToSender = e.bool();
                break;
            case 5:
                r.backgroundImage = c.webcast.data.Image.decode(e, e.uint32());
                break;
            case 6:
                r.fullScreenTextColor = e.string();
                break;
            case 7:
                r.backgroundImageV2 = c.webcast.data.Image.decode(e, e.uint32());
                break;
            case 9:
                r.publicAreaCommon = c.webcast.im.PublicAreaCommon.decode(e, e.uint32());
                break;
            case 10:
                r.giftImage = c.webcast.data.Image.decode(e, e.uint32());
                break;
            default:
                e.skipType(7 & o)
        }
    }
    return r
}

数据解析完成后使用react渲染，这个东西出自Facebook(脸书)，最后就是抖音自己的签名加密了,都是js实现，花点时间也不是什么大问题。

另外web端返回的数据里涉及id的都是Long型，结构如下,你需要稍微做下转换，将其变成整型

{low:111111,high:0,unsigned:false}

二、思路整理

无论哪个web平台，你要获取页面渲染的数据通常有3种思路：

1、通过对显示文本的dom节点的解析直接获取渲染在页面的内容。

 2、通过所使用开发框架的特性找到绑定在组件上的数据。

 3、截获http请求直接解析数据

究竟选择哪种方式其实并没有一个固定标准，例如：如果页面渲染的数据就能满足你的要求，那直接解析页面是最省事的，不需要再去考虑的什么加密解密反爬策略。如果有些数据并没有在页面渲染出来，但是调用接口时又是必须的，比如用户id等，这是就需要用后两种思路了。又或者你要在服务端运行大量的采集，那么只有第三种思路。条条大路通罗马，选择合适自己的就可以。

4、X-Bogus

如果要直接请求接口， X-Bogus是没法绕过的，如果按关键字搜索，很容易就查到，但其实这个方法是不会调用的，可能是废弃或者混淆。

实际调用需要找一个带X-Bogus参数的请求，从发起程序跟进去，耐心的找到调用方法，然后将其还原，由于代码抖音混效果的，隔短时间参数名都会变，所以贴出来其实没什么意义。

 三、代码实现、价值体现

在知道抖音用到的这些技术后，其实代码实现并不是什么难事，大部分人其实是困在了本文的第二步，无从入手，当你确定好用那种思路后，接下来就是坚定的走下去，用你熟练的任何一种开发语言都可以达到目的。

其实拿到数据到让数据产生价值当中还是一段不短的距离，就拿我做的这个项目来说，你还需要考虑：

1、数据的清洗(ETL)，比如去重、归类。

2、高频的写操作、大量结构化数据的存储，数据检索的优化，因此数据库的选择也很重要。

3、从数据中提炼出用户情绪、趋势，这就需要AI的加持。

4、如何将数据的价值以直观的方式呈现给用户，数据可视化也很重要！

5、当用户看到了数据呈现的结果，还应告诉他怎么做，最好是直接帮他做掉一部分工作，因此自动化操作也需要了解，比如自动加好友、发私信等。

6、任何系统都需要考虑的用户管理、权限等balabala...

7、系统的部署，你可能会想找个服务器挂上不就完事了，但是这类数据采集的系统可没你想的那么简单，起码反爬的策略你懂的吧，ip限制、硬件限制等等，所以采集部分，通常不会放在云端，大都是本地部署，或者部署在手机上，设备量一旦比较多，就必须得考虑运维部署的自动化(ci/cd)。

总之拿到数据是万里长征第一步，但也是很重要的一步，希望你能有机会走完整个流程，这样你就 本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】