-
Notifications
You must be signed in to change notification settings - Fork 62
/
wsTest.html
123 lines (113 loc) · 4.75 KB
/
wsTest.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="Author" content="Anles">
<title>websocket案例测试</title>
</head>
<body>
<script>
// let token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjF9.0eNTeq2GYzOhxGeNLj8pmozE-F4cGeuWn8Wx97fAhFo"
var socket;
let loginUrl = "/user/login/byPwd"
let wsLoginUrl = "/ws-route/connection/login"
let msgUrl = "/user/user-friend/msg"
let token
let memberId
let wsId
let type = 2
function post(url, jsonObj, callback) {
var xhr = new XMLHttpRequest;
xhr.open('POST', 'http://127.0.0.1:9001' + url);
xhr.setRequestHeader('content-type', 'application/json');
xhr.setRequestHeader('x-token', token);
var stringData = JSON.stringify(jsonObj);
xhr.send(stringData);
xhr.onreadystatechange = function () {
//complete
if (xhr.readyState == 4 && xhr.status == 200) {
callback(JSON.parse(xhr.responseText))
} else {
//请求失败的回调函数
console.log('保存失败');
}
}
}
function login(tel, pwd) {
post(loginUrl, {tel: tel, pwd: pwd}, resToken => {
if (resToken.code === 0) {
// 登录成功
token = resToken.data.token
type = 1
}
post(wsLoginUrl, {token: token}, res => {
console.log(res)
if (res.code !== 0) {
alert(res.message)
return false
}
memberId = res.data.memberId
//判断当前浏览器是否支持websocket
if (window.WebSocket) {
//go on
socket = new WebSocket(`ws://${res.data.url}:${res.data.wsPort}/ws`);
//相当于channelReado, ev 收到服务器端回送的消息
socket.onmessage = function (ev) {
var rt = document.getElementById("responseText");
rt.value = rt.value + "\n" + ev.data;
}
//相当于连接开启(感知到连接开启)
socket.onopen = function (ev) {
var rt = document.getElementById("responseText");
rt.value = "连接开启了.."
let obj1 = {
type: type,
memberId: memberId,
data: token,
}
socket.send(JSON.stringify(obj1))
setInterval(() => {
let obj = {
type: 0,
data: new Date(),
}
console.log(obj)
socket.send(JSON.stringify(obj))
}, 2000)
}
//相当于连接关闭(感知到连接关闭)
socket.onclose = function (ev) {
var rt = document.getElementById("responseText");
rt.value = rt.value + "\n" + "连接关闭了.."
}
} else {
alert("当前浏览器不支持websocket")
}
})
})
}
function msg(message, receiveId) {
post(msgUrl, {msgType: 1, msgContent: message, receiveId: receiveId}, res => {
})
}
</script>
<form onsubmit="return false">
<input type="input" name="tel" value="15213230873" placeholder="手机号"></br>
<input type="input" name="pwd" value="admin" placeholder="密码"></br>
<input type="button" value="登录" onclick="login(this.form.tel.value, this.form.pwd.value)"></br></br>
<input type="input" name="receiveId" placeholder="接收者ID"></br>
<textarea name="message" style="height: 300px; width: 300px"></textarea>
<input type="button" value="发送消息" onclick="msg(this.form.message.value, this.form.receiveId.value)">
<textarea id="responseText" style="height: 300px; width: 300px"></textarea>
<input type="button" value="清空内容" onclick="document.getElementById('responseText').value=''">
</form>
</body>
</html>