1. page fix: log the visit record
2. add testdata page and give the data images 3. rebname welcome.jsp to overview.jsp and fix the page
This commit is contained in:
martji
parent
da5a8eaa66
commit
36ff0648ec
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -201,7 +201,7 @@ margin-left: 0;
|
|||
}
|
||||
.topmenu {
|
||||
background-color: #666;
|
||||
width: 300px;
|
||||
width: 600px;
|
||||
}
|
||||
.menuitem {
|
||||
height:40px;
|
||||
|
|
@ -216,15 +216,19 @@ margin-left: 0;
|
|||
.menuitem:hover {
|
||||
background-color: #CCC;
|
||||
}
|
||||
#welcome {
|
||||
#overview {
|
||||
border-left: 1px solid silver;
|
||||
width: 120px;
|
||||
width: 128px;
|
||||
}
|
||||
#experience {
|
||||
border-left: 1px solid silver;
|
||||
border-right: 1px solid silver;
|
||||
width: 150px;
|
||||
}
|
||||
#testdata {
|
||||
border-right: 1px solid silver;
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
.middle {
|
||||
background-color: #FFF;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 922 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 959 KiB |
|
|
@ -39,8 +39,9 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
|
|||
<div class="fluid top" id="top">
|
||||
<div class="fluid toptitle"><a href="#">R-Memcached Demo</a></div>
|
||||
<div class="fluid topmenu">
|
||||
<div class="fluid menuitem" id="welcome"><a href="welcome.jsp">Welcome</a></div>
|
||||
<div class="fluid menuitem" id="overview"><a href="overview.jsp">Overview</a></div>
|
||||
<div class="fluid menuitem" id="experience"><a href="experience.jsp">Experience</a></div>
|
||||
<div class="fluid menuitem" id="testdata"><a href="testdata.jsp">TestData</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -169,17 +170,21 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
|
|||
}
|
||||
function reset(){
|
||||
document.location.reload();
|
||||
$('#chart1-1').html('');
|
||||
$('#chart1-2').html('');
|
||||
$('#chart2').html('');
|
||||
$('#chart3').html('');
|
||||
}
|
||||
function setprogress(count1, count2){
|
||||
var para1 = document.getElementById("para1").value;
|
||||
var para2 = document.getElementById("para2").value;
|
||||
progresslength1 += 180*count1/para1/para2;
|
||||
progresslength2 += 180*count2/para1/para2;
|
||||
if (progresslength1 < 180){
|
||||
progresslength1 += 20*count1/1000;
|
||||
progresslength2 += 20*count2/1000;
|
||||
if (progresslength1 < 170){
|
||||
document.getElementById("processbar1").style.width = progresslength1 + 'px';
|
||||
$("#progresslabel1").text((progresslength1/180*100).toFixed(2) + "%");
|
||||
}
|
||||
if (progresslength2 < 180){
|
||||
if (progresslength2 < 170){
|
||||
document.getElementById("processbar2").style.width = progresslength2 + 'px';
|
||||
$("#progresslabel2").text((progresslength2/180*100).toFixed(2) + "%");
|
||||
}
|
||||
|
|
@ -376,6 +381,11 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
|
|||
var data3 = [innerdata31, innerdata32];
|
||||
}
|
||||
|
||||
document.getElementById("processbar1").style.width = progresslength1 + 'px';
|
||||
$("#progresslabel1").text(progresslength1/180*100 + "%");
|
||||
document.getElementById("processbar2").style.width = progresslength2 + 'px';
|
||||
$("#progresslabel2").text(progresslength2/180*100 + "%");
|
||||
|
||||
jQuery.jqplot.config.enablePlugins = true;
|
||||
var plot1_1 = $.jqplot('chart1-1', [data1_1], {
|
||||
title:'R-Memcached VS Asfmemcached',
|
||||
|
|
@ -488,11 +498,6 @@ String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.
|
|||
});
|
||||
document.getElementById("parabutton").setAttribute("value", "start");
|
||||
document.getElementById("parabutton").disabled = '';
|
||||
|
||||
document.getElementById("processbar1").style.width = progresslength1 + 'px';
|
||||
$("#progresslabel1").text(progresslength1/180*100 + "%");
|
||||
document.getElementById("processbar2").style.width = progresslength2 + 'px';
|
||||
$("#progresslabel2").text(progresslength2/180*100 + "%");
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
|
||||
<%
|
||||
String path = request.getContextPath();
|
||||
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
||||
%>
|
||||
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
<!-- <base href="<%=basePath%>">-->
|
||||
|
||||
<title>R-Memcached-experience</title>
|
||||
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta http-equiv="cache-control" content="no-cache">
|
||||
<meta http-equiv="expires" content="0">
|
||||
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
|
||||
<meta http-equiv="description" content="This is my page">
|
||||
|
||||
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/memcache.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="gridContainer clearfix">
|
||||
<div class="fluid top" id="top">
|
||||
<div class="fluid toptitle"><a href="#">R-Memcached Demo</a></div>
|
||||
<div class="fluid topmenu">
|
||||
<div class="fluid menuitem" id="overview"><a href="overview.jsp">Overview</a></div>
|
||||
<div class="fluid menuitem" id="experience"><a href="experience.jsp">Experience</a></div>
|
||||
<div class="fluid menuitem" id="testdata"><a href="testdata.jsp">TestData</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fluid middle">
|
||||
<div class="fluid result">
|
||||
<div class="fluid title1">Overview</div>
|
||||
<div class="introduce" style="height:274px;">
|
||||
<p> In this work we aim at designing a distributed caching middleware, R-Memcached, which can save multiple replicas of data in different nodes to prevent a large number of concurrent requests from sending to a single node.
|
||||
</p>
|
||||
<p> It can deal with the single point failure and hotspot issues. R-Memcached is based on asfmemecached open-source Memcached client. We first design and implement a consistent hashing to organize the Memcached severs and the placement of data replicas. Second, replicas consistency is our major concern. For different application scenarios, R-Memcached support three different protocols including 2-PC (two phase commit), Paxos and eventual consistency. Third, we design the read/write strategies corresponding to the three consistency protocols. Fourth, we incorporate non-block IO and Google's protocol buffer to optimize the communication efficiency between clients and Memcached servers.
|
||||
</p>
|
||||
<p> Experiments show that, compared with asfmemcached, the maximum throughput of R-Memcached increases by 2~3x when we cached 4 copies per data.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fluid result">
|
||||
<div class="fluid title1">Structure</div>
|
||||
<div class="introduce" style="text-align:center; height:880px;">
|
||||
<img alt="" src="data/images/struct.png" style="height:800px; margin-top:20px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fluid result">
|
||||
<div class="fluid title1">Hashing in R-Memcached</div>
|
||||
<div class="introduce" style="text-align:center; height:550px;">
|
||||
<div style="width:100%; height:180px; text-align:left;"><p>
|
||||
we design a special consistent hashing in R-Memcached. Each R-Memcached maintains the same global hash table that records where the replicas are. Consistent hashing maps both the objects and the cache nodes to a ring, as shown in Figure 2. As we see, those large circles represent cache nodes, and the small circle represents the data requested by users. We can determine where data is stored based on those big circles in a clockwise direction. For example, the number of replicas is 3, object1 must be stored in nodes A, B and C. This hashing support nodes' dynamic addition or deletion. When it adds a cache node D in Figure 3, by the method of looking up nodes clockwise, the object1 should be stored in nodes A, B and D, and object1 in nodes A, B doesn't need to be transferred. Hence, this hashing can cut down the transferred data by a large degree. In the same way, the deletion of any node will not have severe impact on the system.
|
||||
</p></div>
|
||||
<img alt="" src="data/images/figure5.png" style="height:320px; margin-top:20px;">
|
||||
</div>
|
||||
</div>
|
||||
<!-- div class="fluid result">
|
||||
<div class="fluid title1">Test Data</div>
|
||||
<div class="introduce" style="text-align:center; height:2160px;">
|
||||
<img alt="" src="data/images/figure7.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure8.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
<img alt="" src="data/images/figure9.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure10.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
<img alt="" src="data/images/figure11.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure12.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
<img alt="" src="data/images/figure13.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure14.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
<img alt="" src="data/images/figure15.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure16.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fluid result">
|
||||
<div class="fluid title1">Introduction</div>
|
||||
<div class="introduce">
|
||||
<h3 style="padding:0px; margin:2px">基本说明</h3>
|
||||
R-Memcached是基于Memcached的Java客户端的改进，通过添加副本机制均衡负载。
|
||||
<h3 style="padding:0px; margin:2px">主要功能</h3>
|
||||
R-Memcached的主要功能是
|
||||
<h3 style="padding:0px; margin:2px">创新点</h3>
|
||||
R-Memcached的主要创新点是
|
||||
</div>
|
||||
</div-->
|
||||
</div>
|
||||
|
||||
<div class="fluid bottom">
|
||||
<p>R-Memcached@ACT.BUAA</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script language="JavaScript">
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
|
||||
<%
|
||||
String path = request.getContextPath();
|
||||
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
||||
%>
|
||||
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
<!-- <base href="<%=basePath%>">-->
|
||||
|
||||
<title>R-Memcached-experience</title>
|
||||
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta http-equiv="cache-control" content="no-cache">
|
||||
<meta http-equiv="expires" content="0">
|
||||
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
|
||||
<meta http-equiv="description" content="This is my page">
|
||||
|
||||
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/memcache.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="gridContainer clearfix">
|
||||
<div class="fluid top" id="top">
|
||||
<div class="fluid toptitle"><a href="#">R-Memcached Demo</a></div>
|
||||
<div class="fluid topmenu">
|
||||
<div class="fluid menuitem" id="overview"><a href="overview.jsp">Overview</a></div>
|
||||
<div class="fluid menuitem" id="experience"><a href="experience.jsp">Experience</a></div>
|
||||
<div class="fluid menuitem" id="testdata"><a href="testdata.jsp">TestData</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fluid middle">
|
||||
<!-- div class="fluid exp">
|
||||
<div class="fluid title1">How to Use?</div>
|
||||
<div class="expout" style="background:black;">
|
||||
<video src="" controls="controls" style="height:518px;width:100%;margin-top:8px;">
|
||||
</div>
|
||||
</div-->
|
||||
<div class="fluid result">
|
||||
<div class="fluid title1">Overview</div>
|
||||
<div class="introduce" style="height:174px;">
|
||||
<p> The evaluation has been performed in a cluster of 10 machines connected through a 100 Mbps switch. Each has 4GB of RAM, Intel(R) 82567LM-3 Gigabit Network Connection. The operating system in 10 machines is Debian 6.
|
||||
The purpose of this experiment is to compare the read and write performance between R-Memcached and traditional Memcached clients (such as spymemcached, asfmemcached, repcached), and display the advantages and disadvantages of R-Memcached. We assume that each data caches 4 replicas. The test scheme is shown as follows:
|
||||
1) Test throughput of R-Memcached and traditional Memcached clients under the different workloads, i.e. the number of threads is 1, 10, 50, 100, 500, 1000, and 2000. Each thread sends 1000 requests. Based on the different proportion of read and write, tests are divided into five scenario: read-only, write-only, 95% read and 5% write, 80% read and 20% write, and 50% read and 50% write.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fluid result">
|
||||
<div class="fluid title1">Test Data</div>
|
||||
<div class="introduce" style="text-align:center; height:2160px;">
|
||||
<img alt="" src="data/images/figure7.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure8.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
<img alt="" src="data/images/figure9.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure10.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
<img alt="" src="data/images/figure11.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure12.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
<img alt="" src="data/images/figure13.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure14.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
<img alt="" src="data/images/figure15.png" style="height:400px; margin-top:20px; margin-right:30px;">
|
||||
<img alt="" src="data/images/figure16.png" style="height:400px; margin-top:20px; margin-left:30px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fluid bottom">
|
||||
<p>R-Memcached@ACT.BUAA</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script language="JavaScript">
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -30,7 +30,7 @@ public class MemcachedServer {
|
|||
private static final int RESULTTHROLD = 1000;
|
||||
|
||||
public static void main(String[] args) {
|
||||
MemcachedServer.run(new String[]{"100","1000","1","64","0.8"});
|
||||
MemcachedServer.run(new String[]{"100","1000","0","64","0.8"});
|
||||
}
|
||||
|
||||
@SuppressWarnings("rawtypes")
|
||||
|
|
@ -202,7 +202,7 @@ public class MemcachedServer {
|
|||
aResult.put("key", keyword);
|
||||
Object out = mc.get(keyword);
|
||||
if (out == null){
|
||||
System.err.println("hehe");
|
||||
//System.err.println("hehe");
|
||||
String value = DatabaseCon.getInstance().queryKey(keyword);
|
||||
if (value == null){
|
||||
value = object;
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ public class RMemcachedServer {
|
|||
// //System.out.println(webSession.results.length());
|
||||
// }
|
||||
|
||||
RMemcachedServer.run(new String[]{"1000","1000","1","64","0.8"});
|
||||
RMemcachedServer.run(new String[]{"100","1000","1","64","0.8"});
|
||||
System.exit(0);
|
||||
}
|
||||
|
||||
|
|
@ -173,8 +173,12 @@ public class RMemcachedServer {
|
|||
for (int i = startIndex; i < endIndex && i < startIndex + RESULTTHROLD; i++){
|
||||
try {
|
||||
JSONObject aResult = (JSONObject) arrays.get(i);
|
||||
try {
|
||||
int nodeNum = Integer.parseInt((String) aResult.get("node"));
|
||||
aResult.put("node", getOriginNode(nodeNum));
|
||||
} catch (Exception e){
|
||||
aResult.put("node", "unknow");
|
||||
}
|
||||
//aResult.remove("node");
|
||||
results.put(aResult);
|
||||
} catch (Exception e) {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import dao.RMemcachedServer;
|
|||
|
||||
@SuppressWarnings("serial")
|
||||
public class GetInfoServlet extends HttpServlet {
|
||||
private static boolean flag = true;
|
||||
|
||||
/**
|
||||
* Constructor of the object.
|
||||
|
|
@ -103,7 +104,21 @@ public class GetInfoServlet extends HttpServlet {
|
|||
// MemcachedServer.run(args);
|
||||
// }
|
||||
// }).start();
|
||||
// if (args[2].equals("0")){
|
||||
// flag = true;
|
||||
// MemcachedServer.run(args);
|
||||
// flag = false;
|
||||
// RMemcachedServer.run(args);
|
||||
// } else {
|
||||
// flag = true;
|
||||
// RMemcachedServer.run(args);
|
||||
// flag = false;
|
||||
// MemcachedServer.run(args);
|
||||
// }
|
||||
|
||||
flag = true;
|
||||
RMemcachedServer.run(args);
|
||||
flag = false;
|
||||
MemcachedServer.run(args);
|
||||
|
||||
while (!(RMemcachedServer.status && MemcachedServer.status)) {
|
||||
|
|
@ -121,6 +136,20 @@ public class GetInfoServlet extends HttpServlet {
|
|||
}
|
||||
break;
|
||||
case 1:{
|
||||
if(flag) {
|
||||
JSONObject result = new JSONObject();
|
||||
try {
|
||||
result.put("R", new JSONArray());
|
||||
result.put("M", new JSONArray());
|
||||
} catch (JSONException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
|
||||
out.println(result.toString());
|
||||
out.flush();
|
||||
out.close();
|
||||
break;
|
||||
}
|
||||
while (!RMemcachedServer.initFlag && !MemcachedServer.initFlag ) {
|
||||
try {
|
||||
Thread.sleep(100);
|
||||
|
|
|
|||
Loading…
Reference in New Issue