-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage.html
143 lines (132 loc) · 4.27 KB
/
page.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
132
133
134
135
136
137
138
139
140
141
142
143
<html>
<head>
<meta charset="utf-8">
<script>
window.addEventListener("load", function(evt) {
var output = document.getElementById("output");
var input = document.getElementById("input");
var ws;
var print = function(message) {
var d = document.createElement("div");
d.innerHTML = message;
output.appendChild(d);
};
document.getElementById("open").onclick = function(evt) {
if (ws) {
return false;
}
ws = new WebSocket("ws://localhost:3101/push?roomid=1");
ws.onopen = function(evt) {
print("OPEN");
}
ws.onclose = function(evt) {
print("CLOSE");
ws = null;
}
ws.onmessage = function(evt) {
const reader = new FileReader();
reader.onload = function (event) {
var content = reader.result;
var results = content.split('\n')
console.log(results)
results.forEach(function (cur, idx, arr) {
if (idx == 0) {
} else {
print("RESPONSE: " + cur);
}
})
}
reader.readAsText(evt.data)
}
ws.onerror = function(evt) {
print("ERROR: " + evt.data);
}
return false;
};
document.getElementById("send").onclick = function(evt) {
httpPost("localhost:2333")
print("SEND: " + input.value);
return false;
};
document.getElementById("close").onclick = function(evt) {
if (!ws) {
return false;
}
ws.close();
return false;
};
function httpPost() {
// 发送ajax
// （1） 获取 XMLHttpRequest对象
console.log("Initiaing")
xmlHttp = new XMLHttpRequest();
console.log("clicked!")
// (2) 连接服务器
// get
//xmlHttp.open("get","/sendAjax/?a=1&b=2");
var message = document.getElementById("input").value
console.log(message)
// post
xmlHttp.open("post","http://localhost:2333/bdim/push?room=1&user=1");
// 设置请求头的Content-Type
// var ele_csrf=document.getElementsByName("csrfmiddlewaretoken")[0];
xmlHttp.setRequestHeader("Content-Type","application/json");
//xmlHttp.setRequestHeader("X-CSRFToken",ele_csrf.value);
xmlHttp.send(message) ; // 请求体数据
// （4） 回调函数 success
xmlHttp.onreadystatechange = function() {
if(this.status==200){
console.log("responseText",this.responseText)
}
};
function unPack(input) {
var left = 0
while (left < input.length) {
var mid = left + 4
var right = mid + 2
var v1 = toInt32(input.slice(left, mid))
var v2 = toInt16(input.slice(mid, right))
var msglen = v1 - v2
var str = input.slice(right, right + msglen)
left = right + msglen
}
}
//构建一个视图，把字节数组写到缓存中，索引从0开始，大端字节序
function getView(bytes) {
var view = new DataView(new ArrayBuffer(bytes.length));
for (var i = 0; i < bytes.length; i++) {
view.setUint8(i, bytes[i]);
}
return view;
}
//将字节数组转成有符号的16位整型，大端字节序
function toInt16(bytes) {
return getView(bytes).getInt16();
}
//将字节数组转成有符号的32位整型，大端字节序
function toInt32(bytes) {
return getView(bytes).getInt32();
}
}
}
});
</script>
</head>
<body>
<table>
<tr><td valign="top" width="50%">
<p>Click "Open" to create a connection to the server,
"Send" to send a message to the server and "Close" to close the connection.
You can change the message and send multiple times.
<p>
<form>
<button id="open">Open</button>
<button id="close">Close</button>
<p><input id="input" type="text" value="Hello world!">
<button id="send">Send</button>
</form>
</td><td valign="top" width="50%">
<div id="output"></div>
</td></tr></table>
</body>
</html>