前端弹幕控制方法及装置与流程

本发明涉及互联网技术领域，具体涉及一种前端弹幕控制方法及装置。

背景技术：

随着网络通信技术的进步和宽带网络的提速，网络视频应用在各个行业得到了越来越广泛的发展。直观而生动的高清视频应用，可以极大拉近用户之间的距离，并达到最好的交流效果。

弹幕时互联网视频的一大特色。弹幕指直接显现在视频上的评论，可以以滚动、停留甚至更多动作特效方式出现在视频上，是观看视频的任发送的简短评论。弹幕视频，顾名思义，即带有弹幕的视频。很多网站提供视频发送弹幕的功能，例如，影视视频网站、直播网站，等等。

以直播网站弹幕为例，在直播间实现前端弹幕渲染的效率一般较差，特别是在用户高峰期，海量的弹幕使用户在观看视频时会感觉网页特别卡顿，影响视频播放效果。

技术实现要素：

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的前端弹幕控制方法及装置。

依据本发明的一个方面，提供一种前端弹幕控制方法，包括：前端接收服务器发送的弹幕数据，对弹幕数据进行格式转换，得到超文本代码；将所述超文本代码注入到预置的弹幕池中；从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。

优选的，所述前端接收服务器发送的弹幕数据，包括：所述前端通过套接字方式接收服务器发送的弹幕数据；所述对弹幕数据进行格式转换，得到超文本代码，包括：解析所述弹幕数据，得到JSON数据对象；根据所述JSON数据对象，并结合网站业务类型，转换得到html代码。

优选的，所述将所述超文本代码注入到预置的弹幕池中，包括：预先定义弹幕池为一维数组；将所述超文本代码存入所述一维数组中。

优选的，还包括：设置推送迭代器，通过启动所述推送迭代器，将所述多条超文本代码一次性插入到前端的弹幕显示区域。

优选的，当将所述超文本代码注入到预置的弹幕池中时，启动所述推送迭代器；和/或，轮询所述弹幕池，并判断所述弹幕池中是否存在预定数目的超文本代码，如果有，启动所述推送迭代器，从而将所述预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。

根据本发明的另一个方面，提供一种前端弹幕控制装置，包括：接收单元，用于接收服务器发送的弹幕数据；转换单元，用于对弹幕数据进行格式转换，得到超文本代码；缓冲单元，用于将所述超文本代码注入到预置的弹幕池中；控制单元，用于从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。

优选的，所述接收单元具体用于：通过套接字方式接收服务器发送的弹幕数据；所述转换单元具体用于：解析所述弹幕数据，得到JSON数据对象；根据所述JSON数据对象，并结合网站业务类型，转换得到html代码。

优选的，所述缓冲单元具体用于：预先定义弹幕池为一维数组；以及，将所述超文本代码存入所述一维数组中。

优选的，该装置还包括：推送迭代单元，用于设置推送迭代器，通过启动所述推送迭代器，将所述多条超文本代码一次性插入到前端的弹幕显示区域。

优选的，当所述缓冲单元将所述超文本代码注入到预置的弹幕池中时，启动所述推送迭代器；和/或，轮询所述弹幕池，并判断所述弹幕池中是否存在预定数目的超文本代码，如果有，启动所述推送迭代器，从而将所述预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。

本发明实施例的有益效果分析如下：

由于在浏览器中，弹幕数据所基于的JavaScript是单线程语言，DOM结构的变化会非常消耗性能，本发明之前的现有方案中，一般是采取将html代码一条一条的插入到弹幕显示区域中，并完成视图渲染，每次弹幕的html代码在弹幕显示区域的插入都会触发一次DOM的重绘，在网站的数量高峰期，前端可能在1秒钟内接收到几千条弹幕，这种单次插入的方式会极大消耗浏览器性能，甚至会导致浏览器卡顿，影响视频观看。

通过本发明提供的前端弹幕控制方法，将弹幕数据进行缓冲并且后续从弹幕池中选取多条弹幕数据进行一次性显示的方式，例如，当弹幕数据单位时间内量级特别大时(比如：200毫秒内有1000条弹幕数据)，前端将弹幕数据缓冲在自定义的弹幕池中，然后每隔一定时间(例如200毫秒)去递归渲染缓冲的弹幕数据，从而可以避免逐条插入弹幕数据带来的浏览器性能消耗。本发明采用缓冲之后，实现了弹幕消息类实时展示，因为200毫秒的延时对于用户来说无感知，降低了前端渲染大量数据的压力，避免直接渲染浏览器的卡顿和视频卡顿的问题。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明的弹幕实现系统架构示意图；

图2示出了根据本发明的前端弹幕控制方法流程图；

图3示出了根据本发明的前端弹幕控制方法实例示意图；

图4示出了根据本发明的前端弹幕控制方法实例中弹幕缓冲模块结构示意图；

图5示出了根据本发明的前端弹幕控制装置结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

以互联网直播网络为例，弹幕是其一个比较重要的功能。如图1所示，为弹幕实现系统架构示意图。实时弹幕系统主要包括三个功能装置(角色)：服务端：监听客户端连接、弹幕事件等并响应；弹幕发送前端(客户端)：由用户发送弹幕；弹幕接收前端(客户端)：接收弹幕并显示。

弹幕实现过程是：用户进入直播网站的视频直播间，前端在初始化过程中，通过socket或管道方式与网站服务器建立长连接；用户在弹幕发送框输入弹幕内容并触发弹幕发送框的发送功能，弹幕发送前端将弹幕发送框中的弹幕内容通过socket或管道发送给网站服务器，服务器会对所有上报的弹幕进行整理和分组，再分别将弹幕通过socket或管道推送给弹幕接收前端的各个直播间，弹幕接收前端会被动接收弹幕并在网页的弹幕区域进行渲染。

本发明实施例提供一种前端弹幕控制方法，主要是针对弹幕接收前端进行弹幕的显示控制(本领域技术人员理解，弹幕接收前端和弹幕发送前端都是指客户端，一定条件是互换角色的)。

参见图2，为本发明提供的一种前端弹幕控制方法流程图，主要包括步骤S201-S203。

S201：前端接收服务器发送的弹幕数据，对弹幕数据进行格式转换，得到超文本代码。

前端(即前述的：弹幕接收前端)可通过socket或管道接收服务器推送的弹幕数据。

网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socket。Socket的英文原义是“孔”或“插座”，通常也称作"套接字"，用于描述IP地址和端口，是一个通信链的句柄，可以用来实现不同虚拟机或不同计算机之间的通信。

除了socket之外，还可以采取管道通信(Communication Pipeline)实现弹幕数据接收。管道通信，即发送进程以字符流形式将大量数据送入管道，接收进程可从管道接收数据，二者利用管道进行通信。管道作为一种通信方法，有其独特的优越性，这主要表现在它不完全依赖于某一种协议，而是适用于任何协议，只要能够实现通信即可。

前端接收到弹幕数据之后，需要转换为超文本代码，才能在弹幕区域进行渲染。弹幕数据一般是一个JSON字符串，该JSON字符串包括弹幕文本内容以及弹幕类型。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，它基于ECMAScript的一个子集，JSON采用完全独立于语言的文本格式。前端首先解析弹幕数据(即：JSON字符串)，得到JSON数据对象，具体的，由于JSON是JavaScript的通用数据格式，可以采用JSON.parse函数将JSON字符串转换为JSON数据对象；然后基于JSON数据对象，并结合网站业务类型，转换得到html代码。

S202：将超文本代码注入到预置的弹幕池中。

预先定义一维数组作为弹幕池，每当接收到弹幕数据并完成数据转换后，将转换的超文本代码存入到该一维数组中。

S203：从弹幕池中选取多条超文本代码，将多条超文本代码一次性插入到前端的弹幕显示区域。

优选的，通过设置一个推送迭代器，通过启动该推送迭代器，实现将多条超文本代码一次性插入到前端的弹幕显示区域。推送迭代器的启动条件包括多种，例如，当将所述超文本代码注入到预置的弹幕池中时，触发启动所述推送迭代器。另外，还可以对弹幕池进行定期轮询，并通过判断弹幕池中超文本代码的数量，来进行推送。具体的，轮询弹幕池，并判断弹幕池中是否存在预定数目的超文本代码，如果有，启动推送迭代器，从而将预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。

本发明实施例的有益效果分析如下：

由于在浏览器中，弹幕数据所基于的JavaScript是单线程语言，DOM(Document Object Model，文档对象模型)结构的变化会非常消耗性能，本发明之前的现有方案中，一般是采取将html代码一条一条的插入到弹幕显示区域中，并完成视图渲染，每次弹幕的html代码在弹幕显示区域的插入都会触发一次DOM的重绘，在网站的数量高峰期，前端可能在1秒钟内接收到几千条弹幕，这种单次插入的方式会极大消耗浏览器性能，甚至会导致浏览器卡顿，影响视频观看。

通过本发明提供的前端弹幕控制方法，将弹幕数据进行缓冲并且后续从弹幕池中选取多条弹幕数据进行一次性显示的方式，例如，当弹幕数据单位时间内量级特别大时(比如：200毫秒内有1000条弹幕数据)，前端将弹幕数据缓冲在自定义的弹幕池中，然后每隔一定时间(例如200毫秒)去递归渲染缓冲的弹幕数据，从而可以避免逐条插入弹幕数据带来的浏览器性能消耗。本发明采用缓冲之后，实现了弹幕消息类实时展示，因为200毫秒的延时对于用户来说无感知，降低了前端渲染大量数据的压力，避免直接渲染浏览器的卡顿和视频卡顿的问题。

下面通过直播网站为应用背景，对本发明一个具体实施例进行介绍。

参见图3，示出了根据本发明的前端弹幕控制方法实例示意图。图3中示出了网站服务器1将弹幕数据通过网络传输通道2(例如socket)推送给前端3，其中，数据转换模块301用户接收并完成数据转换，具体实现中，可以采用前端脚本即js代码实现数据转换模块；数据转换模块301将转换后的html代码提供给弹幕缓冲模块302；弹幕缓冲模块302在推送触发后，选取多条html代码一次性插入到弹幕显示区域303中。

下面对各个细节进行详细描述。

1、服务器1通过网络传输通道2将弹幕数据推送给前端3。

2、数据转换模块301负责接收并将弹幕数据转换为html代码。

一般的，弹幕数据是一个JSON字符串，比如：

数据转换模块301解析JSON字符串，成为一个弹幕JSON数据对象。JSON是JavaScript的通用数据格式，因此可以使用JSON.parse函数将JSON字符串转换为JSON数据对象。

数据转换模块301再结合网站自身的业务类型，将弹幕JSON数据对象转换为如下的html代码：

(1)html代码1：

<div class＝”barrage1”>弹幕1</div>

(2)html代码2：

<div class＝”barrage2”>弹幕2</div>

通过不同的html代码就可以生成多种样式的代码视图。

3、数据转换模块301将转换后的html代码提供给弹幕缓冲模块302。

4、弹幕缓冲模块302选取多条html代码插入到弹幕显示模块域303。

参见图4，示出了根据本发明的前端弹幕控制方法实例中弹幕缓冲模块302结构示意图。弹幕缓冲模块302进一步包括弹幕池3021和推送迭代器3022。从数据转换模块301接收到html代码后，添加到弹幕池3021中；并通过推送迭代器3022控制从弹幕池3021中选取一定数量的html代码插入到弹幕显示区域303。

弹幕池3021的工作过程是：例如，当数据转换模块301生成一条新的弹幕html代码后，会调用注入函数(push函数)，将html代码加入到弹幕池(pool)3021中，弹幕池3021在JavaScript中实际是一个一维数组，弹幕html代码被添加到弹幕池中，数据结构可如下所示：

推送迭代器3022的工作过程是：每次push函数被调用会触发推送迭代器(iterator)3022的冒泡函数(pop函数)，并进行如下判断：

a)如果pop正在执行中，pop将忽略push对pop的触发；

b)如果pop没有在执行，pop会执行内部逻辑。

pop执行的内部逻辑是：

a)轮询执行并每次提取pool中的预定数目(例如：前50条)弹幕html代码，并将这50条弹幕html代码一次插入到弹幕显示区域中，浏览器自身完成渲染；

b)如果pop在某一次提取pool中的前50条弹幕html代码的数量小于50条，那么就认定是最后一次提取，pop在执行完这次后便停止轮询；

c)在轮询期间，pool可以不断的添加更多的弹幕html代码。

与上述方法实施例相对应，本发明还提供一种前端弹幕控制装置。参见图5，示出了本发明前端弹幕控制装置结构示意图。

该装置包括：

接收单元501，用于接收服务器发送的弹幕数据；

转换单元502，用于对弹幕数据进行格式转换，得到超文本代码；

缓冲单元503，用于将所述超文本代码注入到预置的弹幕池中；

控制单元504，用于从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。

优选的，所述接收单元501具体用于：通过套接字方式接收服务器发送的弹幕数据；所述转换单元502具体用于：解析所述弹幕数据，得到JSON数据对象；根据所述json数据对象，并结合网站业务类型，转换得到html代码。

优选的，所述缓冲单元503具体用于：预先定义弹幕池为一维数组；以及，将所述超文本代码存入所述一维数组中。

优选的，该装置还包括：

推送迭代单元505，用于设置推送迭代器，通过启动所述推送迭代器，将所述多条超文本代码一次性插入到前端的弹幕显示区域。

优选的，

当所述缓冲单元503将所述超文本代码注入到预置的弹幕池中时，启动所述推送迭代器；和/或，

轮询所述弹幕池，并判断所述弹幕池中是否存在预定数目的超文本代码，如果有，启动所述推送迭代器，从而将所述预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的用户变身控制的系统中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。