一种基于Web技术的多屏实时交互系统

摘要

本发明公开了一种基于Web技术的多屏实时交互系统，包括至少一个客户端、静态资源WEB服务器、实时通讯服务器、数据接口API服务器、认证服务器、大屏控制器，所述客户端支持Html5网页浏览；所述静态资源WEB服务器提供给客户端网页代码、图片、样式定义和/或脚本程序；实时通讯服务器提供实时通讯服务，将监控数据实时推送到客户端，且共享客户端间的操作数据，且根据预定方案将控制指令发送到大屏控制器；数据接口API服务器提供业务数据给实时通讯服务器，并推送至客户端，使得客户端通过Ajax请求获取数据；认证服务器提供客户端接入认证；大屏控制器与大屏硬件对接，接收soket指令，并切换大屏投屏模式。

说明书

技术领域

本发明属于计算机显示控制技术领域，特别涉及一种基于Web技术的多屏 实时交互系统。

背景技术

传统的监控中心一般由PC客户端、桌面显示器和大屏组成。大屏的内容是 由PC客户端视频输出，通过大屏控制器在大屏中显示。一个大屏控制器可已接 入1个以上的视频源。

PC客户端输出到大屏显示有两种模式：一种是PC客户端画面与大屏相同， 既复制模式；另一种方式由一台电脑输出两个(或以上)的视频源，大屏与桌 面显示内容相对独立，既扩展模式；

通常，由监控人员操作PC客户端。如果采用复制模式，对于软件界面的交 互操作虽然方便，但是由于桌面显示器和大屏内容相同，展示的信息量是有限 的；如果采用扩展模式，展示内容更多，但操作人员需要在桌面电脑屏幕的界 面和大屏界面之间移动鼠标来操作不同内容，大屏上的操作也因为距离远很难 定位鼠标的位置，因此非常不便。同时，由于在一个监控平台中一般会使用1 台以上的PC客户端，当PC客户端配备2台以上时，操作变得更加困难，操作 人员需要换键盘和鼠标以操作不同客户端。

对于监控中心的大屏幕视频显示控制，目前没有能够将复制模式和扩展模 式相结合的解决方案。

发明内容

本发明的目的是提供一种基于Web技术的多屏实时交互系统，针对大型监 控中心相关应用，使用现代Web开发技术(包括Html5,NodeJs等)，打通各个 屏幕(终端设备)，使得除了大屏和PC客户端桌面显示外，还可以接入壁挂电 视以及移动终端，实现实时交互数据共享。

本发明的技术方案是，一种基于Web技术的多屏实时交互系统，该系统包 括至少一个客户端、静态资源WEB服务器、实时通讯服务器、数据接口API服 务器、认证服务器、大屏控制器，

所述客户端支持Html5网页浏览；

所述静态资源WEB服务器提供给客户端网页代码、图片、样式定义和/或 脚本程序；

实时通讯服务器提供实时通讯服务，将监控数据实时推送到客户端，且共 享客户端间的操作数据，且根据预定方案将控制指令发送到大屏控制器；

数据接口API服务器提供业务数据给实时通讯服务器，并推送至客户端， 使得客户端通过Ajax请求获取数据；

认证服务器提供客户端接入认证；

大屏控制器与大屏硬件对接，接收soket指令，并切换大屏投屏模式，

所述多屏实时交互系统基于NodeJs和Html5技术，使用Socket和 WebSocket标准通讯协议。

所述客户端包括PC、移动终端、智能电视和/或电视盒。

该系统的运行过程包括：

整个系统运行分为初始化阶段和交互与同步阶段，

初始化阶段又分为：页面加载、权限检测与数据加载三个过程，

交互与同步阶段又分为路由切换与焦点数据切换：

其中，初始化阶段，

页面加载过程包括，客户端从静态资源WEB服务器获取构成Web页面所需 的资源，包括HTML、CSS、JS以及图片，用以在客户端呈现用户界面；

权限检测过程包括，用户界面被初始化后会监测是否有权限访问数据资源， 如果没有则会引导用户进入登录界面，通过认证服务器验证并登录成功后， 在客户端保存临时访问令牌AUTH_TOKEN，作为后续访问数据的凭证；

数据加载过程包括，在HTTP请求头部携带AUTH_TOKEN，向数据接口API 服务器发起数据请求，每一次请求数据接口API服务器都会监测令牌的有 效性，如果有效则返回数据，在页面初始化过程中加载基本用户信息、联 动配置信息以及必要的业务数据；

其中，交互与同步过程，数据同步是由用户交互行为触发的，用户发生交 互行为的客户端为主客户端，其他客户端为从客户端，客户端通过 WebSocket与实时通讯服务器建立连接，并通过令牌AUTH_TOKEN进行权限 验证，

触发同步事件的用户交互分为两类：

b)路由切换：

主客户端路由发生变化后，将新的路由信息包通过实时通讯服务器分享 到从客户端，从客户端通过联动路由配置表获取路由配置并自动切换 到相应的页面，实时通讯服务器通过大屏控制器插件根据路由与大屏方 案配置表，向大屏控制器发送指令，从而切换大屏拼接模式；

b)焦点数据切换：

主客户端在发生焦点数据变化时，

当点击列表中某一设备条目，该设备条目的信息包将会通过实时通讯服 务器分享到从客户端，各个从客户端会根据各自所在的页面逻辑采取不 同的响应策略，

当详情页面的从客户端通过该设备条目的ID向数据接口API服务器发起 详情数据的请求，在页面中展示该设备的各个层面的详细信息；

当地图页面的从客户端通过设备条目数据包中的位置信息，展示该设备 所在区域的地图并自动高亮定位该设备。

本发明的系统，使得监控中心现场可以自由组合大屏、PC客户端、壁挂电 视、移动终端等硬件设备，根据业务需求自由配置控制方案与处置流程。

在日常监控状态时，大屏按照预设展示着各系统运行重要汇总数据，桌面 显示最近的报警清单及一些辅助信息；当某一被监控系统出现异常，大屏换到 预设的适用于报警的拼接模式，并发出报警提示；PC客户端将同时自动弹出报 警信息相关详细内容及地理位置信息，壁挂电视可自动切换到问题区域路径指 示或应急处理步骤提示，移动终端可以根据不同用户职责自动切换到作业指导 和联系人信息等。

相对于监控中心大屏幕显示采用传统(CS架构)方案带来的缺陷，例如大 屏和桌面显示相同内容，互相独立需要多名操作人员，或一人控制多个终端， 操作麻烦。本发明采用Web技术带来的优势包括：包括开发人员、部署、维护 和硬件的低成本；部署简单快捷；系统易于维护与扩展；可同时用于移动终端 或壁挂电视；基于标准化，可持续发展。

本发明实现了流畅地在监控中心的各种屏幕中实时展现多种信息，简化了 监管操作流程，降低监管人员工作强度，减少人为出错概率，加快了监控中心 应对突发事件的响应速度，辅助管理单位减少或避免由于未及时处置造成的巨 额损失。

附图说明

图1是本发明系统组成示意图。

具体实施方式

本发明的系统支持任意拥有Html5网页浏览能力及支持TCP/IP网络连接的 终端设备接入，实现毫秒级的数据传输和多终端实时响应(响应速度取决于网 络通讯质量)。本系统的架构描述中不包含监控中心业务处理部分，只描述多屏 实时交互的必要构成。

如图1所示，系统由客户端、静态资源服务器、实时通讯服务器、数据接 口(API)服务器、认证服务器、大屏控制器及网络基础设施(网络支持有线与 无线)组成。

1.客户端：由任意支持Html5网页浏览的终端组成，可以是PC、移动终 端、智能电视或电视盒，并保证与系统中的其他服务器链路联通；

2.静态资源服务器：提供给客户端网页代码、图片、样式定义和脚本程 序；

3.实时通讯服务器：提供实时通讯服务。

a)将监控数据实时推送到各个客户端；

b)共享各客户端的操作数据；

c)根据预定方案将控制指令发送到大屏切换控制器

4.数据接口(API)服务器：提供业务数据

a)提供给实时通讯服务器，并推送的客户端；

b)提供给客户端通过Ajax请求获取数据；

5.认证服务器：客户端接入认证；

6.大屏控制器：与大屏硬件对接，接收soket指令，并切换大屏投屏模 式；

7.网络技术设施：提供本系统个组成部分相互连接。

本发明基于NodeJs、Html5等技术，使用Socket、WebSocket等标准通讯 协议实现包括：

1.各个客户端的数据更新；

2.通过预设的方案实现各个客户端的内容自动切换；

3.通过预设的方案实现大屏投屏方案自动切换；

其中，客户端的功能包括：

1.Html5技术开发的网页，响应式设计，支持不同分辨率屏幕；

2.使用WebSocket协议连接实时通讯服务器接收实时推送数据；

3.使用Ajax技术通过数据接口(API)服务器获取更多数据；

4.可配置联动策略。

其中，服务端功能包括：

1.使用NodeJs开发，支持多客户端连接；

2.支持客户端使用WebSocket协议连接；

3.支持客户端使用Socket协议连接；

4.支持使用Socket协议连接大屏控制器；

5.支持获取数据接口(API)服务器数据并转发给客户端；

6.支持连接消息中间件(扩展通讯能力，可由业务处理模块触发联动策 略)。

整个系统运行分为『初始化阶段』和『交互与同步阶段』。『初始化阶段』 又分为：页面加载、权限检测与数据加载三个过程；『交互与同步阶段』又分为 路由切换与焦点数据切换两类，以下进行详细说明：

1)页面加载过程：

客户端从静态服务器获取构成Web页面所需的资源，包括HTML、CSS、JS 以及图片等，用以在客户端呈现用户界面；

2)权限检测过程： 界面被初始化后会监测是否有权限访问数据资源，如果没有则会引导用户 进入登录界面。通过认证服务器验证并登录成功后，在客户端保存临时访 问令牌AUTH_TOKEN，作为后续访问数据的凭证；

3)数据加载过程：

在HTTP请求头部携带AUTH_TOKEN，向API服务器发起数据请求，每一次请 求API服务器都会监测令牌的有效性，如果有效则返回数据；

在页面初始化过程中会加载基本用户信息、联动配置信息以及必要的业务 数据等。

4)交互与同步过程:

数据同步是由用户交互行为触发的。用户发生交互行为的客户端称之为 MasterClient，其他客户端称为SlaveClient。客户端通过WebSocket^②与实时通讯服务器建立连接，并通过令牌AUTH_TOKEN进行权限验证。 可触发同步事件的用户交互分为两类：

a.路由切换：

MasterClient路由发生变化后，将新的路由信息包通过实时通讯服务器分 享到SlaveClient，SlaveClient通过联动路由配置表获取路由配置并自 动切换到相应的页面。另外，作为实时通讯服务器的一个扩展功能，大屏 控制器插件将负责根据『路由与大屏方案配置表』，向大屏控制器发送指令， 从而切换大屏拼接模式。

b.焦点数据切换：

MasterClient在发生焦点数据变化时，例如点击列表中某一设备条目， 该设备条目的信息包将会通过实时通讯服务器分享到SlaveClient，各个 SlaveClient会根据各自所在的页面逻辑采取不同的响应策略。如详情页 面的SlaveClient会通过该设备条目的ID向API服务器发起详情数据的 请求，从而在页面中展示该设备的各个层面的详细信息；又如地图页面的 SlaveClient会通过设备条目数据包中的位置信息，展示该设备所在区域 的地图并自动高亮定位该设备。

在本发明中，大屏拼接模式是指：在拼接屏控制器中存储的，预先设置的输 入源显示排布方式。

在实施例中，客户端通过WebSocket与实时通讯服务器建立连接，如果是 在旧式浏览器将会自动采用降级方案，比如xhr-streaming或者jsonp-polling 技术。