一.轮询

轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次

这种范式连接数会很多，一个接受，一个发送。而且每次发送请求都会有 http 的 header，会很耗流量，也会消耗 cpu 的利用率。

1.案例一：轮询时钟

• 客户端定时发送 ajax 请求后端接口，后端返回此时的时间

1.1 客户端代码

default

<template>
  <div>{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: "default",
    }
  },
  mounted() {
  let that = this
    setInterval(function() {
      let xhr = new XMLHttpRequest()
      xhr.open("GET", "http://localhost:8080/clock", true)
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
          that.text = xhr.responseText
        }
      }
      xhr.send()
    }, 1000)
  },
}
</script>

显示代码 复制代码 复制代码

1.2 服务端代码

let express = require("express")
let app = express()
app.use(express.static(__dirname))
app.get("/clock", (req, res) => {
  res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS')
  res.header('Access-Control-Allow-Origin','*')
  res.header('Content-Type','application/json;charset=utf-8')
  res.end(new Date().toLocaleString())
})
app.listen(8080)