-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmobile_wc.html
131 lines (125 loc) · 4.29 KB
/
mobile_wc.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mobile_wc</title>
<style type="text/css">
#show{
/*border: 1px solid;*/
background-color: black;
border-radius: 50%;
width:1em;
height: 1em;
position: fixed;
left: 50px;
top:50px;
}
body{
width: auto;
height: auto;
font-size: 2em;
font-weight: bold;
}
#ck {
position: fixed;
left: 50px;
top: 100px;
font-size: 1.5em;
border: none;
background-color: #dd0000eb;
}
#ck:active{
background-color: rgba(202, 255, 117, 0.85);
}
</style>
</head>
<body>
<div id="show"></div>
<p></p>
<p></p>
<p></p>
<p></p><!--[3]-->
<button id="ck">点击</button>
<script>
var wc=new WebSocket("ws://192.168.0.105:4399");
var init_x=50,init_y=50;//初始坐标 与CSS保持一致
wc.onopen=function () {
console.log("wc opened");
};
wc.onmessage=function(e){
var msg=e.data;
console.log("received :"+msg);
}
wc.onerror=function () {
console.error("wc error occured");
alert("建立连接失败");
};
wc.onclose=function () {
console.log("wc closed");
};
var v=document.getElementById("show");
var ck=document.getElementById("ck");
var pre_x=50,pre_y=50;//上个轨迹点坐标坐标 初始值跟CSS保持一致
document.ontouchmove=function (e) {
e.preventDefault();
e.stopPropagation();
var x=e.changedTouches[0].clientX;
var y=e.changedTouches[0].clientY;
x = parseInt(x);
y = parseInt(y);
// var temp=`x:${x},y:${y}`;
var dvx=x-pre_x;
var dvy=y-pre_y;//计算轨迹点偏移量
init_x+=dvx;
init_y+=dvy;//更新初始值
v.style.left =init_x + 'px';
v.style.top =init_y + 'px';//进行偏移
ck.style.left=x-30+'px';
ck.style.top=y-50+'px';//点击按钮的位置随手指变化
pre_x=x;
pre_y=y;//这里也要更新!
document.querySelector("p").innerText=`(${x},${y}) window.innerHeight:${window.innerHeight},window.innerWidth:${window.innerWidth},
changedTouches.length:${e.changedTouches.length},init_x:${init_x},init_y:${init_y}`;
var temp=`{"ins":"point","x":${init_x},"y":${init_y},"mh":${window.innerHeight},"mw":${window.innerWidth}}`;//把mobile h w也带过去
wc.send(temp);
};
document.ontouchstart=function (e) {
// e.preventDefault();
e.stopPropagation();
var x=e.touches[0].clientX;
var y=e.touches[0].clientY;
x = parseInt(x);
y = parseInt(y);
pre_x=x;
pre_y=y;//触摸开始 保存上个点坐标(此时move还未) 触摸结束的坐标无意义(因为每次是从touchstart开始的)
document.querySelectorAll("p")[1].innerText = `(${x},${y}) window.innerHeight:${window.innerHeight},window.innerWidth:${window.innerWidth},
touches.length:${e.touches.length}`;
};
document.ontouchend=function (e) {
e.preventDefault();
e.stopPropagation();
var x=e.changedTouches[0].clientX;
var y=e.changedTouches[0].clientY;
x = parseInt(x);
y = parseInt(y);
document.querySelectorAll("p")[2].innerText = `(${x},${y}) window.innerHeight:${window.innerHeight},window.innerWidth:${window.innerWidth},
changedTouches.length:${e.changedTouches.length}`;
};
ck.ontouchend=function(e){
// e.preventDefault();
// e.stopPropagation();
// document.querySelectorAll("p")[3].innerText=`ck click (${parseInt(e.changedTouches[0].clientX)},${parseInt(e.changedTouches[0].clientY)})`;
//v.click();
var temp=`{"ins":"click"}`;
wc.send(temp);//发送点击指令
}
/*v.onclick=function(){
v.style.backgroundColor = "yellow";
}*/
window.onbeforeunload = function() {//正确关闭websocket 避免服务器报错
wc.onclose = function () {};
wc.close()
};
</script>
</body>
</html>