一种基于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、移动终端、智能电视或电视盒，并保证与系统本文档来自技高网...

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

【技术特征摘要】
1.一种基于Web技术的多屏实时交互系统，其特征在于，该系统包括至少一个
客户端、静态资源WEB服务器、实时通讯服务器、数据接口API服务器、认证
服务器、大屏控制器，
所述客户端支持Html5网页浏览；
所述静态资源WEB服务器提供给客户端网页代码、图片、样式定义和/或
脚本程序；
实时通讯服务器提供实时通讯服务，将监控数据实时推送到客户端，且共
享客户端间的操作数据，且根据预定方案将控制指令发送到大屏控制器；
数据接口API服务器提供业务数据给实时通讯服务器，并推送至客户端，
使得客户端通过Ajax请求获取数据；
认证服务器提供客户端接入认证；
大屏控制器与大屏硬件对接，接收soket指令，并切换大屏投屏模式，
所述多屏实时交互系统基于NodeJs和Html5技术，使用Socket和
WebSocket标准通讯协议。
2.如权利要求1所述的基于Web技术的多屏实时交互系统，其特征在于，所述
客户端包括PC、移动终端、智能电视和/或电视盒。
3.如权利要求1所述的基于Web技术的多屏实时交互系统，其特征在于，该系
统的运行过程包括：
整个系统运行分为初始化阶段和交互与同步阶段，
初始化阶段又分为：页面加载、权限检测与数据加载三个过程，
交互与同步阶段又分为路由切换与焦点数据切换：
其中，初始化阶段，
页面加载过程包括，客户端从静态资源WEB服务器获取构成Web页面所需
的资源，包括HTML、CSS、JS以及图片，用以在客户端呈现用户界面；
权限检测过程包括，用户界面被初始化后会监测是否有权限访问数据资源，
...

【专利技术属性】
技术研发人员：马晓军，
申请(专利权)人：上海建坤信息技术有限责任公司，
类型：发明
国别省市：上海;31