轮询与长轮询

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

Http轮询

轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。

Web Sockets

轮询与长轮询都是基于HTTP的，两者本身存在着缺陷:轮询需要更快的处理速度；长轮询则更要求处理并发的能力;两者都是“被动型服务器”的体现:服务器不会主动推送信息，而是在客户端发送ajax请求后进行返回的响应。而理想的模型是"在服务器端数据有了变化后，可以主动推送给客户端",这种"主动型"服务器是解决这类问题的很好的方案。 Web Sockets就是这样的方案。

npm init -y && npm install -S ws

Node客户端和浏览器网页客户端二选一

Web Socket Node客户端

// client.js
let WebSocket = require('ws');
let socket = new WebSocket('ws://127.0.0.1:2000/');
socket.on('open',function(){
  socket.send('你好，服务器,我是客户端');
});
socket.on('message',function(event){
  console.log(event);
})

Web Socket 浏览器网页客户端

<!-- index.html -->

<!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.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // Web Socket客户端
  var socket = new WebSocket('ws://127.0.0.1:2000');

  socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
  });

  // Listen for messages
  socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
  });
</script>

</html>

静态服务器

// server.js
let fs = require('fs');
let http = require('http');
const PORT = 3000;

//用http创建一个静态服务器
http.createServer(function (req, res) {
  fs.readFile(__dirname + req.url, function (err, data) {
    if (err) {
      res.writeHead(404);
      res.end(JSON.stringify(err));
      return;
    }
    res.writeHead(200);
    return res.end(data);
  });
}).listen(PORT);
console.log(`http://127.0.0.1:${PORT}/index.html`)

Web Socket服务端

// ws.server.js
let Server = require('ws').Server;
let wss = new Server({
  port:2000
});
wss.on('connection',function(ws){
  ws.on('message',function(buffer){
    ws.send('你好,客户端,我是服务器!');
    console.log("客户端的信息：",data.toString());
  })
});