我们知道直播间的弹幕消息是通过websocket传输的，而且传输的并不是明文数据，而是protobuf消息，至于为什么使用这个protobuf消息，因为它是二进制传输，更快更稳，相对于直播这种实时性比较高的要求，使用这种消息传输是非常合适的。

websocket连接

我们先要在web直播端看一下websocket的连接是在哪里建立的，至于怎么看这个websocket在哪里建立的，可以监听发送的ws请求，找到这个发送请求的代码位置：

监听消息

找到onMessage这个方法，这里面就是给这个socket实例添加了 this.socket.addEventListener("message", e) 方法，然后看一下这个e就是目标监听函数，这个函数在哪里呢？继续debug往下找：

再看看这个_receiveMessage函数里面是啥：

这里面还嵌套了一层es函数，这个es其实就是一个promise：

_receiveMessage里面就是处理收到消息的逻辑了，比较复杂，我们可以单独把它拿出来，然后添加上备注看一下大概都是什么意思。把代码拿出来，我们单独看一下里面的逻辑是啥：

会到debug状态，看一下这个e此时怎么像一个消息呢？没错，它就是一个消息：

再来看看t是啥？这怎么那么像弹幕或者聊天或者礼物或者观众的消息呢？是的，它就是：

每一个消息内容都有一个payload，里面就是真正的消息：

这里的ack消息里面就是需要使用PushFrame这个消息，里面添加payload_type + payload+LogID编码来的。

 

解析消息

上面的消息和payload内容都是二进制，怎么显示出来二进制的呢？

查看一下调用栈，发现这些消息都是送s里面导出来的，那这个s是从哪里来的？

s是这个 transport.decode(new Uint8Array(e.data)) 解析出来的：

那这个transport是啥，怎么解析的呢？找到了：

我们把代码折叠一下：这里就是创建了一个class e，其实这个e就是transport的类

看代码：

var g = f;

.....

而这个f就是下面的代码，也就是我截图的那个class e：
f = class e {
            constructor() {
                this.cachedType = {},
                this.loading = null,
                this.loadSchema = ()=>{
                    "undefined" != typeof window && window.requestIdleCallback(()=>{
                        this._loadSchema()
                    }
                    )
                }
                ,
                this._loadSchema = ()=>(this.loading || (this.loading = (0,
                n.C)(this, null, function*() {
                    if (u.roots.transport) {
                        this.root = u.roots.transport,
                        this.loading = Promise.resolve();
                        return
                    }
                    yield(0,
                    o.y)(),
                    yield r.e(2986).then(r.bind(r, 69949)),
                    this.root = u.roots.transport,
                    this.loading = Promise.resolve()
                })),
                this.loading)
            }
            static get instance() {
                return e.__instance ? e.__instance : e.__instance = new e
            }
            static addRelation(t, r) {
                e.relation[t] = r,
                e.relation[r] = t
            }
            static setRelation(t) {
                e.relation = (0,
                n.i)((0,
                n.i)({}, e.relation), null != t ? t : {})
            }
            getType(t) {
                let r = t.replace(a.nl, "")
                  , i = this.cachedType[r];
                if (i)
                    return i;
                try {
                    let i = [e.relation[t], e.relation[r], r, t].filter(e=>e)
                      , n = i.map(t=>e.typeHintPrefix.map(e=>`${e}.${t}`)).reduce((e,t)=>e.concat(t)).concat(i);
                    d("search types", n);
                    let o = n.reduce((e,t)=>e && "function" == typeof e ? e : t.split(".").reduce((e,t)=>null == e ? void 0 : e[t], this.root), void 0);
                    if ("function" != typeof o)
                        throw Error("cannot find type");
                    return o
                } catch (e) {
                    return d(`no current schema[${String(r)}]`),
                    null
                }
            }
            // 这里就是transport的decode代码
            decode(e, t) {
                return (0,
                n.C)(this, null, function*() {
                    var r, i, n, o, a, s, l, c, u;
                    if (yield this._loadSchema(),
                    t)
                        return this._decode(e, t);
                    let[p,h] = yield this._decodeFrameOrResponse(e)
                      , d = null != (o = null != (n = null == (i = null == (r = null == h ? void 0 : h.headers) ? void 0 : r.find(e=>"im-cursor" === e.key)) ? void 0 : i.value) ? n : p.cursor) ? o : ""
                      , m = null != (c = null != (l = null == (s = null == (a = null == h ? void 0 : h.headers) ? void 0 : a.find(e=>"im-internal_ext" === e.key)) ? void 0 : s.value) ? l : p.internal_ext) ? c : "";
                    return {
                        response: p,
                        frame: h,
                        needAck: null != (u = p.need_ack) && u,
                        cursor: d,
                        internalExt: m
                    }
                })
            }
            encode(e, t) {
                return (0,
                n.C)(this, null, function*() {
                    return yield this._loadSchema(),
                    this._encode(e, t)
                })
            }
            ack(e, t) {
                return (0,
                n.C)(this, null, function*() {
                    var r, i, n, o;
                    let l = null != (o = null != (n = null == (i = null == (r = e.headers) ? void 0 : r.find(e=>"im-internal_ext" === e.key)) ? void 0 : i.value) ? n : t.internal_ext) ? o : "";
                    return yield this.encode({
                        payload_type: a.AG.Ack,
                        payload: s(l),
                        LogID: e.LogID
                    }, "PushFrame")
                })
            }
            ping() {
                return this.encode({
                    payload_type: a.AG.Hb
                }, "PushFrame")
            }
            _decodeFrameOrResponse(e) {
                return (0,
                n.C)(this, null, function*() {
                    try {
                        let t = this._decode(e, "PushFrame")
                          , r = yield this._extractResponse(t);
                        return [this._decode(r, "Response"), t]
                    } catch (t) {
                        return [this._decode(e, "Response")]
                    }
                })
            }
            _extractResponse(t) {
                return (0,
                n.C)(this, null, function*() {
                    var r;
                    return (null == (r = t.headers) ? void 0 : r.some(e=>"compress_type" === e.key && "gzip" === e.value)) ? yield e.unGzip(t.payload) : t.payload
                })
            }
            _decode(e, t) {
                let r = this.getType(t);
                if (!r)
                    return;
                let i = r.decode(e);
                return d("decoded success", t, i),
                m("decoded success", e),
                i
            }
            _encode(e, t) {
                let r = this.getType(t);
                if (!r)
                    return;
                let i = r.encode(e).finish();
                return d("encoded success", t, e),
                m("encoded success", i),
                i
            }
        }

那这个decode里面怎么解析数据的？看代码，找到_decode和_decodeFrameOrResponse这两个函数的内容，看到了什么？原来解码的就在这里啊：

到这里我觉得你应该就知道怎么解析了吧，下课