保护环境从我做起，大家好，我是魔方12139。

这篇文章是我在弹幕互动游戏开发过程中的心得和感想记录，有一些教学内容，不能确保高可靠性，请读者朋友们谨慎参考。

所谓的弹幕互动游戏，即是指在直播时，观众可以用弹幕来操作的游戏。常规游戏的操作者只有玩家，而弹幕互动游戏的操作者还有愿意参与的观众。

毫无疑问，弹幕互动游戏的技术基础和核心是弹幕消息的获取和处理。通常情况下，看弹幕的都是观众，且弹幕消息都显示在网页或者手机应用界面上，和游戏程序无关。不过，借助某些技术，可以用自己的程序获取并处理弹幕，从而实现用弹幕操作游戏。

WebSocket

以下内容摘自RUNOOB：

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

简单来说WebSocket就是一个【服务器往我这儿发东西的通道】。

B站直播的弹幕信息就是通过WebSocket进行传输的。知道了这一点，只需要用一个WebSocket和B站发送信息的端口建立连接，就能收到发来的弹幕信息，然后再进行处理了。

HTML5提供了这个协议，那就用HTML+JavaScript编一段程序来看看。

创建index.html文件，用文本编辑程序打开，输入如下内容：

以上HTML文档创建了一个空页面，并在其中运行一个脚本。这个脚本创建一个WebSocket，与地址wss://broadcastlv.chat.bilibili.com:2245/sub建立连接（wss前缀表明这是一个WebSocket地址）。

当连接建立时，它发送一段信息。其中包含两部分：

第一部分是信息头。

第二部分是信息体。这部分中比较重要的是要连接的直播间号。在电脑端上用浏览器随便打开一个直播间，可以在地址栏中看到如下内容：

红框部分"22908468"就是直播间号。

在弹幕互动游戏中，要连接的直播间号当然是自己的。如果要更改，修改对象data的属性roomid的值即可。

初始信息发送后，它启动一个循环计时器，每隔30000毫秒，也就是30秒，发送一次心跳信息。这是一种B站直播时使用的协议，需要每隔30秒发送一次，否则会认为连接断开。

当收到信息时，它把收到的信息打印到控制台上，暂时不做其他事。

用浏览器打开index.html，按F12打开开发人员工具，转到Console（控制台）选项卡，观察输出。输出如下：

看不懂，不过能收到东西就表明这是成功的第一步。

为了避免混淆，把JavaScript代码单独存在其他文件里。在index.html所在目录中创建文件index.js，把index.html中标签中的所有东西都剪切到index.js中，保存。修改标签如下：

这代表它执行的js脚本来自index.js文件。

接下来重点处理WebSocket收到的信息。收到的信息分为若干段，每段由两部分组成。

第一部分是信息头。其中有用的信息主要是第二部分的长度和消息类型。

第二部分是信息体。弹幕互动游戏需要的弹幕信息就在这部分中。

信息体在传输中会被压缩，需要解压才能恢复成正常信息。解压所需的程序代码太多了，我在这里写不下，大家可以去这个地址下载：

https://raw.githubusercontent.com/mcube-12139/danmaku-game/main/pako.js

复制所有内容，存为文件pako.js，放在工作目录（即index.html所在目录）下，在index.js的标签之前添加一个标签，执行pako.js，这样就能在后面的index.js中使用其中的东西了。

修改index.js中消息接收部分。逐段处理消息，对其中的信息体进行解压并打印到控制台。

刷新页面重新载入index.html，观察控制台。

如果此时指定的直播间中有观众发送弹幕，可观察到输出如下：

是一些可读的JSON文本。

信息体的类型主要包括弹幕、礼物、通知、人气刷新等，在弹幕互动游戏中需要进一步判断类型，如果是弹幕再做后续处理。对收到的JSON文本进行解析，如果键"cmd"的值是"DANMU_MSG"，那就表明这是弹幕信息。弹幕内容在info数组中，其中info[1]是弹幕内容，而info[2]则是弹幕发送者的相关信息。据此修改index.js如下：

只把弹幕信息打印到控制台。刷新，观察输出：

这样我们就完成了从直播间抓取弹幕的全部操作。只要把收到的弹幕消息与游戏逻辑进行连接，就实现了弹幕互动游戏。

大家可以从GitHub找到我之前开发的弹幕互动扫雷和数独游戏的全部源码，如果有我没有说清的东西也可以进行下载和进一步阅读。地址如下：

https://github.com/mcube-12139/danmaku-game

鸣谢

Bilibili UP主红色xyz（322954448）。本文所述大部分内容来自他的专栏：B站直播弹幕礼物采集器。

EOF