.NET斗鱼直播弹幕客户端(下)

.NET斗鱼直播弹幕客户端(下)

在上篇文章中，我们提到了如何使用.NET连接斗鱼TV直播弹幕的基本操作。然而想要做得好，做得容易扩展，就需要做进一步的代码整理。

本文将涉及以下内容：

• 介绍如何使用Reactive Extensions（Rx），演示这一系列操作用起来，就像写Hello World一样简单；
• 用我自制的“准游戏引擎”FlysEngine，只需少量代码，即可实现桌面弹幕的效果；
• 最后提供一波“伸手党”福利，文中所有可运行、完整代码，将按原样奉上。

Rx.NET

Rx，是Reactive Extensions的缩写，据说Rx发明于.NET 2.0时代的微软。那时候还没有async/await。后来，也许由于RX对编程语言要求不高（如不要求内置协程-coroutine），RX反倒在.NET之外的其它编程语言中大行其道。如rx.js、RxJava等等。

C#从.NET 2.0就提供了yield关键字，然后3.0提供了LINQ，5.0提供了async/await，因此很多时候RX的意义不大。但在某些情况下（如这种情况），就有意义了，原因请见下图：

-	单数据	多数据
同步	T	IEnumerable<T>
异步	Task<T>	Observable<T>/IAsyncEnumerable<T>

C#的协程支持同步多数据，异步单数据，但不支持异步多数据（C# 8.0现在已经支持IAsyncEnumerable<T>），本文将使用Rx来包装上一篇文章的斗鱼TV直播弹幕客户端。

来先看一波老代码：

注意剪头所指的位置，那是基础代码“出口”，或者业务逻辑“入口”，基础代码不能简单地return打断，因为它要不停地输出数据，这时就需要像协程等编程语言功能，或者Rx的支持。

Rx-Hello World

首先引入NuGet包System.Reactive，一个简单的“异步多值返回”的Rx示例代码如下：

Observable.Create<int>(async (o, cancellationToken) =>
{
	for (var i = 0; i < 5; ++i)
	{
		await Task.Delay(1000);
		o.OnNext(i);
	}
	o.OnCompleted();
})

麻雀虽小，五脏俱全，如代码所示，几乎只需在正常代码外包一层Rx，即可享受Rx的好处。

使用Rx

使用起来就更简单了，上篇展示的长达252行代码的demo，现在只需一行代码，即可无侵入式地调用：

DouyuBarrage.ChatMessageFromUrl("https://www.douyu.com/scboy")

调用结果如下（和昨天效果完全一样）：

Rx的其它好处

除了调用简单之外，Rx的扩展也非常非常简单，比如完成以下操作，以前可能非常麻烦，需要改多处代码，而使用Rx，只需像LINQ一样加几个指令即可：

同时抓多个直播间的弹幕

#load ".\barrage.linq"
DouyuBarrage.ChatMessageFromUrl("https://www.douyu.com/scboy")
	.Select(x => new  { Room = "scboy", Message = x.Message })
.Merge(DouyuBarrage.ChatMessageFromUrl("https://www.douyu.com/topic/lscs?rid=633019")
	.Select(x => new { Room = "lalala", Message = x.Message}))

效果如下：

只需一个Merge指令即可合并两个直播间的弹幕（Observable<T>）

扩展简单

比如只想提取特殊的弹幕，或者数据之前想做一些转换，可以使用Where，Select等数据过滤和转换操作符，符合LINQ的习惯，非常好用。比如我正常弹幕的提取，其实是从JObjectFromUrl转换而来，JObjectFromUrl，又是从RawFromUrl转换而来，这提高了扩展性，又无需修改老代码，正是所谓“对扩展开放，对修改封闭”的开放-封闭原则：

public IObservable<JToken> JObjectFromUrl(string url)
    => RawFromUrl(url).Select(MsgTool.DecodeStringToJObject);

public IObservable<Barrage> ChatMessageFromUrl(string url) =>
    JObjectFromUrl(url)
    .Where(x => x["type"].Value<string>() == "chatmsg")
    .Select(Barrage.FromJToken);

又比如可能我只想提取彩色弹幕，我只需ChatMessageFromUrl().Where(x => x.Color != 0xffffff)即可，非常方便。

桌面弹幕

这可能是另一个主题——实时渲染，用到了我自己写的“准游戏引擎”FlysEngine，因此需要安装NuGet包：FlysEngine.Desktop。

桌面弹幕不同于网页弹幕，只能在网页中显示，而桌面弹幕可以直接显示在屏幕最上方。有些公司年会可能用到了桌面弹幕，这无疑增加了主持人与观众们的互动，提高了群众参与的积极性。

注意：本文中所说FlysEngine的实质是Direct2D和Windows API-UpdateLayeredWindowIndirect函数。如果不想使用FlysEngine，完全可以使用其它方式代替。最简单的方式是使用WPF，然后设置AllowsTransparency=true，但这样性能会差一些。本文介绍的方法，CPU使用率将保持在0%左右！

桌面弹幕的要点

• 渲染文字 DirectWrite；
• 文字移动 将文字从屏幕右边移动到左边；
• 检测是否离开屏幕 如果屏幕上不显示弹幕，即可将弹幕删除；
• 初始位置确定 如果一行显示不下，则将弹幕放在下一行。

渲染文字

渲染文字一般是通过DirectWrite，它性能很好，功能也强大。FlysEngine将DirectWrite封装了，因此直接用便是。

注意：DirectWrite不仅渲染文字，还提供了.Metrics属性，可以计算文字渲染之后的大小，这会让事情变得容易很多。

文字移动

文字移动首先需要一个位置，随着时间变化，将该位置的X坐标不段减少即可。这可以通过FlysEngine中的UpdateLogic事件实现，它会定期调用，传入一个float dt，代码离上一次调用UpdateLogic的时间间隔。因此可以利用这个dt变量，计算是弹幕的新位置：

public void MoveLeft(float dt, float speed)
{
    Position.X -= dt * speed;
}

检测是否离开屏幕

由于我们已知弹幕是矩形，（很显然屏幕也是矩形）因此这个检测比较简单，直接判断文字的右边缘是否大于0即可。

也由于需要经常/频繁地删除在屏幕上的弹幕对象，因此最好储存弹幕的数据结构别使用O(n)的集合，如最好别使用List<T>，它是线性表。我这里使用的是链表，.NET的链表实现是LinkedList<T>（很多人以为是List<T>）。

多说一句，链接的遍历算法如下（while循环）：

var node = barrages.First;
while (node != null)
{
    var next = node.Next;
    // do work here
    node = next;
}

之所以不使用foreach来遍历，因为这样遍历可以实现高性能的“边遍历、边删除”的实现。

初始位置确定

这一点思想需要多想想，需要从第一行开始，从后往前看，看最后那一边弹幕是否大于屏幕右边。只要想清楚了，代码很容易：

float GetNewY()
{
    float y = 0;
    while (barrages.Reverse().Where(x => x.Position.Y == y).Select(x => x.Rect.Right).FirstOrDefault() > form.Width)
    {
        y += FontSize;
    }
    return y;
}

有了这些，就可以愉快地感受屏幕弹幕啦！

彩色emoji表情

Direct2D支持——但默认不显示弹幕emoji表情：

需要多加一个枚举让其支持：

target.DrawText("