Skip to content

Commit 9ea72a0

Browse files
wjcgithubwjcgithub
committed
添加一致性hash算法v1
1 parent 317a56a commit 9ea72a0

File tree

4 files changed

+243
-0
lines changed

4 files changed

+243
-0
lines changed

‎consistency_hash/hash.php‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
/**
3+
* Created by PhpStorm.
4+
* Author: evolution
5+
* Date: 16-7-9
6+
* Time: 下午12:22
7+
*
8+
* license GPL
9+
*/
10+
11+
function chash($key){
12+
//获取8个字符
13+
$md5 = substr(md5($key),0,8);
14+
$seed = 31;
15+
$hash = 0;
16+
17+
//计算一个hash值
18+
for($i = 0; $i<8;$i++){
19+
$hash = $hash*$seed + ord($md5{$i});
20+
}
21+
22+
//位运算, max 0x7fffffff
23+
return $hash & 0xFFFFFFFE;
24+
}
25+
26+
$key = $_GET['key'];
27+
echo chash($key);
28+
exit;
29+

‎consistency_hash/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
7+
<script src="js/canvas.js"></script>
8+
<script src="js/hash.js"></script>
9+
<style >
10+
*{
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
body{
16+
background: black;
17+
}
18+
19+
#div1{
20+
background: white;
21+
width: 300px;
22+
margin: 20px auto;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<input type="text" id="serverval"><input type="button" id="addserver" value="addserver">
28+
<input type="text" id="keyval"><input type="button" id="addkey" value="addkey">
29+
<div id="div1"></div>
30+
</body>
31+
</html>

‎consistency_hash/js/canvas.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/**
2+
* Created by evolution on 15-9-20.
3+
*/
4+
5+
function Canvas(elem){
6+
if(elem=='' || !elem){
7+
alert('请输入参数');
8+
return;
9+
}
10+
11+
this.parent = elem;
12+
}
13+
14+
Canvas.prototype.id = 'canvas';
15+
Canvas.prototype.width = 500;
16+
Canvas.prototype.height = 500;
17+
Canvas.prototype.bg = '#ff9900';
18+
Canvas.prototype.cobj = null;
19+
Canvas.prototype.ctx = null;
20+
21+
//创建canvas对象
22+
Canvas.prototype.c = function(){
23+
var elem = document.getElementById(this.parent);
24+
elem.style.width = this.width+"px";
25+
elem.style.height = this.height+"px";
26+
elem.innerHTML = "<canvas id=\""+this.id+"\" width=\""+this.width+"px\" height=\""+this.height+"px\">暂时不支持canvas</canvas>";
27+
}
28+
29+
//获取canvas实例
30+
Canvas.prototype.getInstance = function (){
31+
Canvas.prototype.cobj = document.getElementById(this.id);
32+
return this.ctx = Canvas.prototype.cobj.getContext('2d');
33+
}
34+
35+
//绘制图片
36+
Canvas.prototype.drawImg = function(){
37+
var _this = this;
38+
var img = new Image();
39+
img.src = '../img/rhino.jpg';
40+
img.onload = function(){
41+
//_this.ctx.drawImage(img,0,0);
42+
_this.ctx.transform(1,1,0,1,0,0);
43+
_this.ctx.drawImage(img,50,50,100,100);
44+
//_this.ctx.drawImage(img,10,10,100,100,10,10,100,100);
45+
//_this.ctx.drawImage(img,10,10,100,100,150,150,1000,1000);
46+
47+
}
48+
49+
50+
//参数值
51+
//参数值 描述
52+
//img 规定要使用的图像、画布或视频。
53+
//sx 可选。开始剪切的 x 坐标位置。
54+
//sy 可选。开始剪切的 y 坐标位置。
55+
//swidth 可选。被剪切图像的宽度。
56+
//sheight 可选。被剪切图像的高度。
57+
//x 在画布上放置图像的 x 坐标位置。
58+
//y 在画布上放置图像的 y 坐标位置。
59+
//width 可选。要使用的图像的宽度。（伸展或缩小图像）
60+
//height 可选。要使用的图像的高度。（伸展或缩小图像）
61+
62+
}
63+
64+
/**
65+
* 角度转换弧度公式
66+
* @constructor
67+
*/
68+
function Utils(){
69+
this.hd = function(degree){
70+
return degree*Math.PI/180;
71+
}
72+
73+
}
74+

‎consistency_hash/js/hash.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/**
2+
* Created by evolution on 15-9-19.
3+
*/
4+
window.onload = function (){
5+
//创建canvas对象
6+
var canvasObj = new Canvas('div1')
7+
var utils = new Utils()
8+
canvasObj.width = 1000
9+
canvasObj.height = 890
10+
//生成canvas标签
11+
canvasObj.c()
12+
var ctx = canvasObj.getInstance()
13+
//hash环上的点阵数量
14+
var keyNum = Math.pow(2,32)-1
15+
//每个点阵的度数
16+
var oneKeyDegree = 360/keyNum
17+
18+
//clear canvas
19+
ctx.clearRect(0,0,canvasObj.width,canvasObj.height)
20+
21+
//画外层大圆
22+
var x = canvasObj.width/2
23+
var y = canvasObj.height/2
24+
var r = canvasObj.width/2.3
25+
ctx.beginPath()
26+
ctx.arc(x,y,r,utils.hd(0),utils.hd(360))
27+
ctx.closePath()
28+
ctx.stroke()
29+
30+
//添加文字
31+
function addText(){
32+
ctx.save()
33+
ctx.font = '60px impact'
34+
ctx.textBaseLine = 'top'
35+
ctx.fillStyle = 'rgba(57,9,9,0.7)'
36+
ctx.shadowOffsetX = 10
37+
ctx.shadowOffsetY = 10
38+
ctx.shadowColor = 'rgba(5,9,9,0.7)'
39+
ctx.shadowBlur = 5
40+
var w = ctx.measureText('一致性Hash算法演示').width
41+
ctx.fillText('一致性Hash算法演示',(x*2-w)/2, y+25)
42+
ctx.restore()
43+
}
44+
45+
/**
46+
* 根据索引画圆
47+
* @param index
48+
* @param type
49+
* @constructor
50+
*/
51+
function DrawCycle(index,type){
52+
//画圆上的坐标点
53+
//圆O的圆心为(a,b),半径为R,点A与到X轴的为角α.
54+
//则点A的坐标为(a+R*cosα,b+R*sinα)
55+
56+
if(type==1){
57+
var radius = 8
58+
var cycleColor = 'rgba(255,0,0,0.7)'
59+
}else if(type==2){
60+
var radius = 4
61+
var cycleColor = 'rgba(0,255,0,0.7)'
62+
}
63+
64+
ctx.beginPath()
65+
ctx.moveTo(x,y)
66+
var linex = Math.cos(oneKeyDegree*index*Math.PI/180)*r+x
67+
var liney = Math.sin(oneKeyDegree*index*Math.PI/180)*r+y
68+
ctx.lineTo(linex,liney)
69+
ctx.arc(linex,liney,radius,utils.hd(0),utils.hd(360))
70+
ctx.fillStyle = cycleColor
71+
ctx.strokeStyle = cycleColor
72+
ctx.fill()
73+
ctx.stroke()
74+
}
75+
76+
//添加文字
77+
addText()
78+
//加载缓存
79+
80+
localStorage.setItem("key","value")
81+
//alert(localStorage.getItem("key"))
82+
//localStorage.removeItem("key")
83+
//localStorage.clear()
84+
85+
function addServer(){
86+
var val = document.getElementById('serverval').value
87+
getIndex(val,1)
88+
}
89+
90+
function addKey(){
91+
var val = document.getElementById('keyval').value
92+
getIndex(val,2)
93+
}
94+
95+
function getIndex(val,type){
96+
$.get("http://local.demo.com/php_file/hash/consistency_hash/hash.php?key=21", { "key": val },
97+
function(req) {
98+
DrawCycle(req,type)
99+
})
100+
}
101+
102+
document.getElementById('addserver').onclick = addServer
103+
document.getElementById('addkey').onclick = addKey
104+
105+
}
106+
107+
108+
109+

0 commit comments

Comments
 (0)