电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Google Gears 开发离线应用（3）检测网络状况 [打印本页]

作者: look_w 时间: 2018-8-9 09:57 标题: 使用 Google Gears 开发离线应用（3）检测网络状况

检测网络状况要为传统的基于 Ajax 的 Web 应用添加离线应用的功能，首先要让它拥有实时检测网络状况的能力。
一，我们将编写 js 代码用于检测用户的网络状况。
在 common.js 原有代码的基础上添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

//-------------------------------------------------------------------------
/*
* 以下方法用于检测网络状况
*/

  /**
* sendRequestForCheck
* 定期向服务器上的home.jsp发送请求，用来检测网络状况
* home.jsp是空代码文件，在应用中不做任何操作
*/
function sendRequestForCheck() {

  createXMLHttpRequest();

  var url = "home.jsp";
  request.open("GET", url, true);
  request.onreadystatechange = processCurrentResponse;
  request.send(null);

}

  /**
* processCurrentResponse
*
* 根据请求的状态参数来判断网络状况
*/
function processCurrentResponse() {
  if(request.readyState == 4) {
try{
   if(request.status == 200) {
      setPageStatus("online");
   } else{
      setPageStatus("offline");
   }
}catch(ex) {
   setPageStatus("offline");
}
  }
}

  /**
* setPageStatus
* 页面上显示出网络状况（离线状态或者在线状态）
*/
function setPageStatus(sta){
  if(sta=="online"){
addStatus("online");
document.getElementById('sync').disabled = false;
setTimeout("sendRequestForCheck()", 1000);
  }else{
addStatus("offline");
document.getElementById('sync').disabled = true;
setTimeout("sendRequestForCheck()", 1000);
  }
}
  /**
* addStatus
* 显示出数据
*/
function addStatus(message){
  var status = document.getElementById("status");
  status.innerHTML = message;
}

二，修改 index.jsp 代码，在 <div id="buttom" class="frame"> </div> 内添加代码如下：

1
2
3
4

<div id="buttom" class="frame">
status:<span id="status"></span>
<input type="button" value="sync" onclick="asyncExc()" id="sync"/>
</div>

在 <body> 标签里加上：

1	<body onLoad="sendRequestForCheck();">

三，创建相应文件。
选中 gears 项目单击右键，New->Other 里选择 JSP，命名为“home.jsp”。在 home.jsp 里把所有的源代码都删除掉，即 home.jsp 是空代码文件。
图 10. 创建 JSP 文件

四，测试。启动 Tomcat，打开 index.jsp。网页的底部将出现网络状态的显示。暂时先不理睬 sync 按钮的用途。
图 11. 网络状态显示

如果是单机版的测试运行（服务器和客户端是同一台机器），我们可以关闭 Tomcat 服务器来模拟客户端断线的情景（服务器与客户端失去连接，即网线离线）。关闭 Tomcat 后，您将看到网页显示的状态变为 offline。
图 12. 关闭 Tomcat 后的网络状态

在解释一下 JS 代码的用途：在服务器端有一个 home.jsp（空代码文件），是为了让客户端的 js 代码发送请求检测而用，如果客户端与服务器失去连接，则客户端无法访问到服务器的 home.jsp，根据请求的返回参数可以判断客户端是离线状态。而 home.jsp 在应用中没有任何用途。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)