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

压码路

已于 2022-12-13 11:08:46 修改

阅读量5.4k

点赞数 3

分类专栏：抖音文章标签：抖音

于 2022-05-18 11:22:45 首次发布

本文链接：https://blog.csdn.net/keyiis_sh/article/details/124726193

版权

抖音专栏收录该内容

1 篇文章 4 订阅

订阅专栏

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

目前有不少工具在做抖音截流获客，最近碰到个类似需求，于是花了些时间分析了抖音直播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