技术领域
[0001] 本
发明涉及互联网教学领域，具体而言，涉及一种多端课件实时互动方法及一种多端课 件实时互动系统。
背景技术
[0002] 在PC端启动客户端
软件，加载互动课件，利用程序实现多端的互动实时同步教学(包 括点击、拖动等动画效果的展示同步以及音视频的播放同步)，高效方便地实现了多端的互 动教学。当前比较普遍的做法是录屏，将教师的界面通过
媒体流的形式分享出去，这样会带 来很高的带宽需求。另外其他的一些实施方式中，如果将老师端的页面操作动画转换为图像 进行显示，容易造成失真现象，且用户看不到动画的执行过程，上课过程较为枯燥，缺乏趣 味性；如果音视频播放依赖于flash实现，将会极大的加大了cpu的占用，且安全性不高， 如果用户的电脑配置不高且任务量过大，将造成音视频播放的卡顿现象，为用户的学习带来 了些许不便；如果将老师端的页面操作动画转换为视频进行显示，较强依赖于网络环境的传 输，且用户看不到实时的效果，且用户无法参与整个过程，缺少
互动性；如果将老师端的页 面操作动画转换为swf进行显示，需要客户端具有flash播放功能，另外swf不具有跨平台 的能
力，即手机端不支持swf文件，跨平台及可移植性较差。
发明内容
[0003] 本发明为了解决现有课件分发过程中实时性差，特别是分发带有动画音频的课件时，占 用CPU、带宽大的问题，提供了一种多端课件实时互动方法，包括教师端、学生端，所述 方法包括如下步骤：
[0004] 教师端和学生端分别加载html格式的
控制器controller.html和h5互动课件，所述控制器 controller.html包括工具包模
块sdk.js、属性模块status.js、队列模块queue.js，所述h5互动 课件是指通过html5、css3以及js编写完成的html页面；
[0005] 所述控制器controller.html利用属性模块status.js进行信息初始化，完成信息初始化后利 用队列模块queue.js序列化信息队列，序列化队列以后，
请求加载所述h5互动课件；
[0006] 教师端获取对所述h5互动课件的操作数据，并将所述操作数据发送给所述工具包模块 sdk.js，所述工具包模块sdk.js中的动画效果模块执行动画效果播放，动画效果播放完成后， 所述工具包模块sdk.js中的消息构造模块根据所述操作数据生成消息，发送所述消息给所述 学生端中的工具包模块sdk.js，所述学生端中的工具包模块sdk.js中的事件触发模块触发所 述学生端中的h5互动课件根据所述操作数据进行动画播放。
[0007] 进一步地，还包括
服务器，所述教师端和学生端还包括客户端，所述发送所述消息给所 述学生端中的工具包模块sdk.js的步骤具体包括：所述工具包模块sdk.js中的消息构造模块 发送所述消息给教师端的客户端，所述教师端的客户端将所述消息发送给服务器，所述服务 器将所述消息发送给学生端的客户端，学生端的客户端将所述消息发送给所述学生端的工具 包模块sdk.js。
[0008] 进一步地，所述教师端和学生端分别加载html格式的控制器controller.html和h5互动课 件的步骤之前，还包括：初始化教师端和学生端的步骤或者初始化教师端、学生端和服务器 的步骤。
[0009] 进一步地，所述消息为json数据格式的消息。
[0010] 进一步地，所述学生端的数量为多个。
[0011] 进一步地，所述操作数据包括点击按钮、拖拽按钮和对课件中元素的操作。
[0012] 本发明另一方面还提供了一种多端课件实时互动系统，包括教师端、学生端，所述教师 端和学生端分别包括控制器，所述控制器中包括工具包模块、属性模块和队列模块；
[0013] 所述教师端、学生端用于加载所述控制器和h5互动课件，所述h5互动课件是指通过 html5、css3以及js编写完成的html页面；
[0014] 所述控制器用于利用属性模块进行信息初始化，完成信息初始化后利用队列模块序列化 信息队列，序列化队列以后，请求加载所述h5互动课件；
[0015] 所述教师端还包括课件操作数据获取模块，所述课件操作数据获取模块用于获取用户对 所述h5互动课件的操作数据，并将所述操作数据发送给所述工具包模块；
[0016] 所述教师端中的所述工具包模块中的动画效果模块执行动画效果播放，动画效果播放完 成后，所述工具包模块中的消息构造模块根据所述操作数据生成消息，发送所述消息给所述 学生端中的工具包模块，所述学生端中的工具包模块中的事件触发模块触发所述学生端中的 h5互动课件根据所述操作数据进行动画播放。
[0017] 进一步地，还包括服务器，所述教师端和学生端还包括客户端，所述教师端中的工具包 模块中的消息构造模块发送所述消息给教师端的客户端，所述教师端的客户端将所述消息发 送给服务器，所述服务器将所述消息发送给学生端的客户端，学生端的客户端将所述消息发 送给所述学生端的工具包模块。
[0018] 进一步地，所述消息为json数据格式的消息。
[0019] 进一步地，所述学生端的数量为多个。
[0020] 本本发明与
现有技术相比能够保证了多端动画效果的执行的一致性、有序性；保证了多 端上课过程的互动性；同时占用较小的cpu的情况加载音视频。
附图说明
[0021] 通过参考附图会更加清楚的理解本发明的特征和优点，附图是示意性的而不应理解为对 本发明进行任何限制，在附图中：
[0022] 图1为本发明一些
实施例中的多端课件实时互动方法的流程示意图；
[0023] 图2为本发明一些实施例中的多端课件实时互动方法的流程示意图；
[0024] 图3为本发明一些实施例中的多端课件实时互动系统的结构示意图；
[0025] 图4为本发明一些实施例中的多端课件实时互动系统的结构示意图；
[0026] 图5为本发明一些实施例中的多端课件实时互动系统的结构示意图。
具体实施方式
[0027] 为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式 对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本
申请的实施例及实 施例中的特征可以相互组合。
[0028] 在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用 其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实 施例的限制。
[0029] 本发明克服现有中多端分发课件占用带宽大，加载音视频占用CPU高的问题，提出了 一种基于html(超文本
标记语言)课件分发系统，可直接在浏览器上进行运行，不需额外的 软件，将课件中的动作(如，点击、拖拽按钮，对课件中元素(小动物、
植物)的点击，移 动等信息)预先建立好事件函数，在客户端中安装的sdk文件中接收到这些动作触发信息 后，解析形成动画，在客户端上显示，不需要将远程的动作信息转换为动画格式文件进行传 递，这时占用的带宽较小，同时，动画在本端实时生成，不需要加载，占用内存和CPU较 小，使得实时性更加提高，流畅性、一致性较好。
[0030] 实施例一
[0031] 如图1所示，本发明提供了一种多端课件实时互动方法，包括教师端、学生端，所述教 师端、学生端为可连接网络的计算机或者控制器，所述方法包括如下步骤：
[0032] S110教师端和学生端分别加载html格式的控制器controller.html和h5互动课件；所述 控制器controller.html包括工具包模块sdk.js、属性模块status.js、队列模块queue.js，所述 h5互动课件是指通过html5、css3以及js编写完成的html页面；
[0033] S120所述控制器controller.html利用属性模块status.js进行信息初始化，完成信息初始化 后利用队列模块queue.js序列化信息队列，序列化队列以后，请求加载所述h5互动课件；
[0034] S130教师端获取对所述h5互动课件的操作数据，并将所述操作数据发送给所述工具包 模块sdk.js，所述工具包模块sdk.js中的动画效果模块执行动画效果播放，动画效果播放完 成后，所述工具包模块sdk.js中的消息构造模块根据所述操作数据生成消息，发送所述消息 给所述学生端中的工具包模块sdk.js，所述学生端中的工具包模块sdk.js中的事件触发模块 触发所述学生端中的h5互动课件根据所述操作数据进行动画播放。所述操作数据包括点击 按钮、拖拽按钮和对课件中元素的操作。
[0035] 本发明实施例中通过工具包模块sdk.js获取操作数据后在本端进行动画显示，然后将操 作数据形成特定格式的消息发送给远端，如发送给学生端，学生端中的工具包模块sdk.js接 收到上述的信息后进行解析，生成动画进行显示。所述序列化队列的步骤能够将显示数据、 操作数据按照时间顺序进行排列，保证了本端和远端的信息有序性，[0036] 本发明的方法可在小网络中运行，即教师端直接将消息发送给学生端；也可在较大网络 中运行，便于多个学生端同时接收数据，进行课件互动，如这时，还包括服务器，所述教师 端和学生端还包括客户端，所述步骤S130中，所述发送所述消息给所述学生端中的工具包 模块sdk.js的步骤具体包括：所述工具包模块sdk.js中的消息构造模块发送所述消息给教师 端的客户端，所述教师端的客户端将所述消息发送给服务器，所述服务器将所述消息发送给 学生端的客户端，学生端的客户端将所述消息发送给所述学生端的工具包模块sdk.js。
[0037] 本发明的方法在初始运行时还需进行初始化的步骤，具体地，所述教师端和学生端分别 加载html格式的控制器controller.html和h5互动课件的步骤之前，还包括：初始化教师端 和学生端的步骤或者初始化教师端、学生端和服务器的步骤。
[0038] 本发明中控制器发送的消息或者接收的消息格式应为易于解析的消息，例如所述消息为 json数据格式的消息。
[0039] 本发明实施例中所述学生端的数量为多个，这样可保证在多个学生端之间的数据统一、 一致，保证了实时性。
[0040] 保证了多端动画效果的执行的一致性、有序性；保证了多端上课过程的互动性；占用较 小的cpu的情况加载音视频。
[0041] 实施例二
[0042] 本发明提供了一种多端课件实时互动方法，其基本思想是，通过controller.html完成与 客户端的通信，进行队列控制，并循环执行队列。抽离出独有的sdk文件，绑定各个事件 函数。加载课件，课件中执行各个行为，展示动画效果；如图2所示，具体流程方法步骤 包括，
[0043] S210加载controller.html；学生端和教师端都进行加载。
[0044] S220请求信息初始化、序列化队列；学生端和教师端同步进行。
[0045] S230功能绑定，将动作信息与SDK中函数对应；
[0046] S240本端接收到动作信息后进行SDK解析；
[0047] S250解析之后进行本端显示；
[0048] S260显示后将本端接收到动作信息转换成特定格式信息传递给远端(如、学生端)，也 可传递给服务器；
[0049] S270服务器将接收到数据进行分发；
[0050] S280各个远端利用SDK解析器进行解析展示。
[0051] 本发明实施例中方法，其运用的
硬件环境如图3所示。
[0052] 本发明实施例中的的方法，具体运用到计算机中的步骤如下：
[0053] 1.初始化服务端及客户端，客户端包括教师端和学生端。教师端和学生端分别加载 controller.html以及h5互动课件。注：h5互动课件是指html页面。
[0054] 2.controller.html中的status.js请求信息初始化，完成信息初始化以后通过queue.js序列化 信息队列。
[0055] 3.queue.js序列化队列以后请求加载h5互动课件。注：h5互动课件是指通过html5、css3 以及js编写完成的具有的html页面。
[0056] 4.教师端上课时候对于h5课件上的点击、拖拽等按钮以及元素的操作会触发sdk.js中动 画效果模块即有动画效果的播放，当每个动画效果播放完成时候会通过sdk.js消息构造模 块，将操作的指令发送给客户端，再通过svc服务器下发到学生端的客户端。当学生端的 客户端接收消息后会触发sdk.js中的事件触发方法，进而触发学生端h5课件的动画播放。
[0057] 发送消息、接收消息都是通过json数据格式进行传输。
[0058] 通过html的方式完成课件的实时同步教学，可以在最接近实时同步的状态下快速、便捷 的完成对课件的各项互动操作。
[0059] 实施例四
[0060] 另一方面，本发明还提供了一种运行上述实施例的系统，如图4所示，即提供了一种多 端课件实时互动系统100，包括教师端110、学生端120，所述教师端110和学生端120分 别包括控制器130，所述控制器130中包括工具包模块131、属性模块132和队列模块 133；
[0061] 所述教师端110、学生端110用于加载所述控制器130和h5互动课件，所述h5互动课 件是指通过html5、css3以及js编写完成的html页面；
[0062] 所述控制器130用于利用属性模块132进行信息初始化，完成信息初始化后利用队列模 块133序列化信息队列，序列化队列以后，请求加载所述h5互动课件；
[0063] 所述教师端110还包括课件操作数据获取模块111，所述课件操作数据获取模块111用 于获取用户对所述h5互动课件的操作数据，并将所述操作数据发送给所述工具包模块 131；
[0064] 教师端110中的所述工具包模块131中的动画效果模块1311执行动画效果播放，动画效 果播放完成后，所述工具包模块131中的消息构造模块1312根据所述操作数据生成消息， 发送所述消息给所述学生端120中的工具包模块131，所述学生端中的工具包模块131中的 事件触发模块1313触发所述学生端中的h5互动课件根据所述操作数据进行动画播放。
[0065] 本发明可直接端到端传递数据，也可通过服务器将数据分发到各个端，实现各个端数据 的统一、一致。具体地，如图5所示，还包括服务器140，所述教师端110和学生端120还 包括客户端150，所述教师端110中的工具包模块131中的消息构造模块1312发送所述消息 给教师端110的客户端150，所述教师端110的客户端150将所述消息发送给服务器140， 所述服务器140将所述消息发送给学生端120的客户端150，学生端120的客户端150将所 述消息发送给所述学生端120的工具包模块131。所述消息为json数据格式的消息。
[0066] 在本发明的一些实施例中所述学生端120的数量为多个。
[0067] 本发明实施例中的系统保证了多端动画效果的执行的一致性，保证了上课效果的实时互 动性。
[0068] 实施例五
[0069] 如图5所示，本发明提供了一种一种多端课件实时互动系统，包括学生端、教师端、 html格式控制器controller.html、客户端、svc服务器，所述教师端和学生端分别和控制器 controller.html连接传递操作数据和显示数据，所述控制器controller.html与客户端之间发送 信息和接受信息，所述客户端和svc服务器之间发送信息和接受信息，所述控制器 controller.html中包括sdk.js模块、queue.js模块和status.js模块，所述sdk.js模块中包括事件 触发模块、队列解
锁模块和消息构建模块；所述教师端和学生端中加载所述控制器 controller.html和h5互动课件，接收用户的操作数据如对button按钮的操作，在本端进行动 画显示，同时创递给远端(学生端)，远端通过控制器controller.html进行sdk解析，生成 动画进行显示。
[0070] 本发明实施例中系统保证了多端动画效果的执行的一致性、有序性；保证了多端上课过 程的互动性；占用较小的cpu的情况加载音视频。
[0071] 在本发明中，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示 相对重要性。术语“多个”指两个或两个以上，除非另有明确的限定。
[0072] 以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员 来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何
修改、等 同替换、改进等，均应包含在本发明的保护范围之内。
