Skip to content

Commit 3529d72

Browse files
author
浪里行舟
authored
Add files via upload
1 parent f97f23f commit 3529d72

File tree

8 files changed

+153
-0
lines changed

8 files changed

+153
-0
lines changed

‎websocket/iframe流.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div id="clock"></div>
11+
<iframe src="/clock" style="display:none"></iframe>
12+
</body>
13+
</html>

‎websocket/iframe流.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
//iframe流
2+
let express = require('express')
3+
let app = express()
4+
app.use(express.static(__dirname))
5+
app.get('/clock', function(req, res) {
6+
setInterval(function() {
7+
let date = new Date().toLocaleString()
8+
res.write(`
9+
<script type="text/javascript">
10+
parent.document.getElementById('clock').innerHTML = "${date}";
11+
</script>
12+
`)
13+
}, 1000)
14+
})
15+
app.listen(8080)

‎websocket/websocket.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>websocket</title>
8+
</head>
9+
<body>
10+
<div id="clock"></div>
11+
<script>
12+
let clockDiv = document.getElementById('clock')
13+
let socket = new WebSocket('ws://localhost:9999')
14+
//当连接成功之后就会执行回调函数
15+
socket.onopen = function() {
16+
console.log('客户端连接成功')
17+
//再向服务 器发送一个消息
18+
socket.send('hello') //客户端发的消息内容 为hello
19+
}
20+
//绑定事件是用加属性的方式
21+
socket.onmessage = function(event) {
22+
clockDiv.innerHTML = event.data
23+
console.log('收到服务器端的响应', event.data)
24+
}
25+
</script>
26+
</body>
27+
</html>

‎websocket/websocket.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
let express = require('express')
2+
let app = express()
3+
app.use(express.static(__dirname))
4+
//http服务器
5+
app.listen(3000)
6+
7+
let WebSocketServer = require('ws').Server
8+
//用ws模块启动一个websocket服务器,监听了9999端口
9+
let wsServer = new WebSocketServer({ port: 9999 })
10+
//监听客户端的连接请求 当客户端连接服务器的时候，就会触发connection事件
11+
//socket代表一个客户端,不是所有客户端共享的，而是每个客户端都有一个socket
12+
wsServer.on('connection', function(socket) {
13+
//每一个socket都有一个唯一的ID属性
14+
console.log(socket)
15+
console.log('客户端连接成功')
16+
//监听对方发过来的消息
17+
socket.on('message', function(message) {
18+
console.log('接收到客户端的消息', message)
19+
socket.send('服务器回应:' + message)
20+
})
21+
})

‎websocket/轮询.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div id="clock"></div>
11+
<script>
12+
let clockDiv = document.getElementById('clock');
13+
setInterval(function(){
14+
let xhr = new XMLHttpRequest;
15+
xhr.open('GET','/clock',true);
16+
xhr.onreadystatechange = function(){
17+
if(xhr.readyState == 4 && xhr.status == 200){
18+
console.log(xhr.responseText);
19+
clockDiv.innerHTML = xhr.responseText;
20+
}
21+
}
22+
xhr.send();
23+
},1000);
24+
</script>
25+
</body>
26+
</html>

‎websocket/轮询.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
//轮训
2+
let express = require('express')
3+
let app = express()
4+
app.use(express.static(__dirname))
5+
app.get('/clock', function(req, res) {
6+
res.end(new Date().toLocaleString())
7+
})
8+
app.listen(8080)

‎websocket/长轮询.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div id="clock"></div>
11+
<script>
12+
let clockDiv = document.getElementById('clock')
13+
function send() {
14+
let xhr = new XMLHttpRequest()
15+
xhr.open('GET', '/clock', true)
16+
xhr.timeout = 2000 // 超时时间，单位是毫秒
17+
xhr.onreadystatechange = function() {
18+
if (xhr.readyState == 4) {
19+
if (xhr.status == 200) {
20+
//如果返回成功了，则显示结果
21+
clockDiv.innerHTML = xhr.responseText
22+
}
23+
//不管成功还是失败都会发下一次请求
24+
send()
25+
}
26+
}
27+
xhr.ontimeout = function() {
28+
send()
29+
}
30+
xhr.send()
31+
}
32+
send()
33+
</script>
34+
</body>
35+
</html>

‎websocket/长轮询.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
//长轮训
2+
let express = require('express')
3+
let app = express()
4+
app.use(express.static(__dirname))
5+
app.get('/clock', function(req, res) {
6+
res.end(new Date().toLocaleString())
7+
})
8+
app.listen(8080)

0 commit comments

Comments
 (0)