Add files via upload

Fantastic-Chen · Feb 23, 2019 · 3529d72 · 3529d72
1 parent f97f23f
commit 3529d72
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 0 deletions.
diff --git a/websocket/iframe流.html b/websocket/iframe流.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <div id="clock"></div>
+    <iframe src="/clock" style="display:none"></iframe>
+</body>
+</html>
diff --git a/websocket/iframe流.js b/websocket/iframe流.js
@@ -0,0 +1,15 @@
+//iframe流
+let express = require('express')
+let app = express()
+app.use(express.static(__dirname))
+app.get('/clock', function(req, res) {
+  setInterval(function() {
+    let date = new Date().toLocaleString()
+    res.write(`
+       <script type="text/javascript">
+         parent.document.getElementById('clock').innerHTML = "${date}";
+       </script>
+     `)
+  }, 1000)
+})
+app.listen(8080)
diff --git a/websocket/websocket.html b/websocket/websocket.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>websocket</title>
+  </head>
+  <body>
+    <div id="clock"></div>
+    <script>
+      let clockDiv = document.getElementById('clock')
+      let socket = new WebSocket('ws://localhost:9999')
+      //当连接成功之后就会执行回调函数
+      socket.onopen = function() {
+        console.log('客户端连接成功')
+        //再向服务 器发送一个消息
+        socket.send('hello') //客户端发的消息内容 为hello
+      }
+      //绑定事件是用加属性的方式
+      socket.onmessage = function(event) {
+        clockDiv.innerHTML = event.data
+        console.log('收到服务器端的响应', event.data)
+      }
+    </script>
+  </body>
+</html>
diff --git a/websocket/websocket.js b/websocket/websocket.js
@@ -0,0 +1,21 @@
+let express = require('express')
+let app = express()
+app.use(express.static(__dirname))
+//http服务器
+app.listen(3000)
+
+let WebSocketServer = require('ws').Server
+//用ws模块启动一个websocket服务器,监听了9999端口
+let wsServer = new WebSocketServer({ port: 9999 })
+//监听客户端的连接请求  当客户端连接服务器的时候，就会触发connection事件
+//socket代表一个客户端,不是所有客户端共享的，而是每个客户端都有一个socket
+wsServer.on('connection', function(socket) {
+  //每一个socket都有一个唯一的ID属性
+  console.log(socket)
+  console.log('客户端连接成功')
+  //监听对方发过来的消息
+  socket.on('message', function(message) {
+    console.log('接收到客户端的消息', message)
+    socket.send('服务器回应:' + message)
+  })
+})
diff --git a/websocket/轮询.html b/websocket/轮询.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <div id="clock"></div>
+<script>
+    let clockDiv = document.getElementById('clock');
+    setInterval(function(){
+        let xhr = new XMLHttpRequest;
+        xhr.open('GET','/clock',true);
+        xhr.onreadystatechange = function(){
+            if(xhr.readyState == 4 && xhr.status == 200){
+                console.log(xhr.responseText);
+                clockDiv.innerHTML = xhr.responseText;
+            }
+        }
+        xhr.send();
+    },1000);
+</script>
+</body>
+</html>
diff --git a/websocket/轮询.js b/websocket/轮询.js
@@ -0,0 +1,8 @@
+//轮训
+let express = require('express')
+let app = express()
+app.use(express.static(__dirname))
+app.get('/clock', function(req, res) {
+  res.end(new Date().toLocaleString())
+})
+app.listen(8080)
diff --git a/websocket/长轮询.html b/websocket/长轮询.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="clock"></div>
+    <script>
+      let clockDiv = document.getElementById('clock')
+      function send() {
+        let xhr = new XMLHttpRequest()
+        xhr.open('GET', '/clock', true)
+        xhr.timeout = 2000 // 超时时间，单位是毫秒
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+              //如果返回成功了，则显示结果
+              clockDiv.innerHTML = xhr.responseText
+            }
+            //不管成功还是失败都会发下一次请求
+            send()
+          }
+        }
+        xhr.ontimeout = function() {
+          send()
+        }
+        xhr.send()
+      }
+      send()
+    </script>
+  </body>
+</html>
diff --git a/websocket/长轮询.js b/websocket/长轮询.js
@@ -0,0 +1,8 @@
+//长轮训
+let express = require('express')
+let app = express()
+app.use(express.static(__dirname))
+app.get('/clock', function(req, res) {
+  res.end(new Date().toLocaleString())
+})
+app.listen(8080)