CN107622009A - Log信息系统 - Google Patents

Abstract

本发明名称是Log信息系统，本发明公开了一个互联网软件开发领域的便于软件开发工具，本发明实现了软件开发过程中研发人员的log信息实时打印功能，将接收到的log信息作为数据在html页面呈现出来，极大的方便研发人员查错、纠错过程，能够达到提高研发人员的工作效率，缩短研发人员研发周期的目的。本发明运用了当下非常流行的java后台开发技术，前台采用了比较新颖的angular js作为前台框架，经由服务器进行交互，同时用mysql数据库进行数据存储，达到了PC端、移动端以及服务器Server端的交互。本发明的特征在于：（1）移动端log信息的实时打印；（2）log信息数据的无差别输出；（3）客户端与服务器端的稳定、高效交互；综上，本发明可以说是研发人员的一个好帮手，详细信息请见说明书正文。

Description

Log信息系统

技术领域

处本发明提供一种在在IT技术领域手机端调试的一种创新方法使用到的语言和语法有：java、javascript和websocket协议的通讯方式、html5。

背景技术

本发明最接近的现有技术：LOG事件管理方法

发明者：陈广元 夏振宏 郑伟 王永保

申请人：河南华南医电科技有限公司

它的框架不适合移动端的log信息输出，不适合混合式app的开发,我们的发明是解决了移动端的log信息的输出。

发明内容

log信息：软件运行时，都会把一些重要的信息记录打印到控制台。从这些信息里面可以获取许多重要的信息。

xml：可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。

serverip：字段显示了接收log信息服务器的ip地址。

clientname字段则用于配置自己的名称。使得查看log信息更方便。

websocket：websocket 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。

localStorage：在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

json: json (JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 json采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使json成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

ionic：ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。

jQuery：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

该发明是为了解决在手机调试不能看到log信息的问题。在使用手机时能在相应的网站上查看当前的手机的log信息，方便调试。极大的提升了开发效率。作为开发人员，很多时候会苦恼调试方式的不便，因为在手机上不能直接看到log信息，或者看到他人在使用过程中的log信息，这样就能更加方便的做调试工作了。

本发明的方法包括如下步骤：

1、读取xml文件中标签的serverip地址

2、打开websocket连接

3、覆写移动端log信息输出的方法，

（1）在覆写的方法中，捕获了在控制台打印的log信息

（2）判断websocket连接状态

（3）与服务器连接成功，就把捕获的log信息以json的格式发送到服务器。与服务器连接失败，则不发送log信息。

4、查看log信息

（1）需要在pc端登录log系统，在登录成功的同时，pc端需要通过websocket向服务器端发送一条指令，例如：{“FIELD”,“showLog”}，服务器接收到该条指令之后，就会把该条连接，添加到一个map集合中。

（2）只要移动端有log信息产生，服务器就会遍历Map集合，找到与服务器连接的pc端，就把log信息转发到该pc端上

（3）pc端通过用户名，再把log信息进行分类。

具体实施方式

1.如说明书附图中的图1所示，pc端经由websocket协议向服务器端发送指令来请求数据②，移动端经由websocket协议向服务器端发送log信息①，服务器端将数据经由websocket协议返回给PC端③。

2.具体实现步骤：

(1)在ionic项目www文件夹中新建一个xml配置文件，该文件路径和index.html应在同一个路径下。

说明：xml文件是用于接收log信息的服务器地址和名称。

xml文件xml标签里面可以定义服务器的ip地址、版本号等。

(2)需在所有单页index.html中引入jQuery文件。

(3)在打开应用时就需要判断localStorage中有没有serverip，如果没有则需要读取xml文件中的serverip，并利用localStorage保存serverip。

注意：该方法必须在打开websocket连接之前执行完毕。

(4)在js中配置一个可以发送log信息的websocket连接，ip地址是在LocalStorage中获取的。并初始化websocket状态，判断当前客户端是否支持websocket协议。

(5)覆写log信息输出方法并捕获log信息，再判断websocket连接状态，如果连接成功，则通过websocket把log信息发送到服务器。如果未连接，也不耽误log信息的正常输出。

(6) 在pc端查看log信息。pc端主要分三个阶段进行处理显示，详细信息如下：

数据处理阶段

当pc端接收到来自服务器端的的响应以后，只需要将收到的json字符串数据转化成json对象格式，并在前台遍历该json对象数组1里面的每一项，并同时通过利用js方法为每一项添加接收时间（毫秒级）；当遍历第一项数据时，将第一项的数据存放再一个新的数组2中，然后接着遍历数组1中的下一项，当当前项的ID不存在与新数组2中时，就将该条数据复制到新数组2中，否则继续遍历原数据1中的每一项，以此类推，直到遍历完原数组为止。

数据显示阶段

数据显示阶段需要遍历数组1里面的每一项，将该项的ID、用户名、log信息、接收时间（毫秒级）、App用户等数据值获取到，采用直接操作DOM的方式，利用js方法动态的将带有数据的html代码填充到html页面上。

同时数据显示阶段还需要遍历数组2里面的每一项，将该项的ID、用户名、App用户等数据值获取到，采用直接操作DOM的方式，利用js方法动态的将带有数据的html代码填充到html页面上，至此已经完后log信息数据的显示阶段工作。

数据分类阶段

数据分类阶段也可以说是数据的经加工，在第一阶段数据处理阶段可以获取两个数组分别是数组1和数组2，数组1中存放的是PC端收到的所有数据，而数组二中存放的是当前使用移动端发送log信息的所有用户的数据；因此在界面上当PC端用户选择查看某一个人的log信息时，只需要获取该人的ID并和数组1中的数据进行比较，将ID值相同的每一项数据显示在界面上，即达到了分类的目的。

附图说明

图1是发明逻辑梳理概要图，主要描述了本发明的逻辑思路。

Claims (4)

1.一种在移动端app代码调试的一种方法，把app内部的log信息打印到pc端，通过websocket传输，只要客户手机连接网络，就能看到该客户的log输出。

2.如权利要求1所述的移动端发送log信息，其特征是在pc端能清楚的看到log信息的发送者信息，能分找到具体客户端的log和该客户端的详细信息。

3. 如权利要求1所述的移动端发送log信息到pc端，其特征是能控制该客户端app的发送配置选项，能减少不必要的流量损耗。

4.如权利要求1所述的移动端发送log信息到pc端，其特征是可以把移动端的log进行分类整理，分类筛选。