美文网首页
长短轮询

长短轮询

作者: 鑫的盒蛋真厉害 | 来源:发表于2018-11-14 22:08 被阅读0次

长短轮询、协商

短轮询

短轮询：客户端不断发送请求，服务端接到请求后立刻响应之

image

服务器代码，使用express：

const express = require('express')
const app = express()

class CodeGenerator {
    constructor () {
        this.code = undefined
        this.previousCode = undefined
    }
    check (code) {
        return code === this.code || code === this.previousCode ? '验证通过' : '验证不通过'
    }
    setNewCode () {
        this.code = ('' + Math.random()).slice(-8)
        setTimeout(() => {
            this.previousCode = this.code
        }, 2000)
    }
    update (time) {
        setInterval(() => this.setNewCode(), time)
    }
}

let code_generator = new CodeGenerator()
code_generator.update(10000)

app.get('/qrcode', function (req, res) {
    res.setHeader('Access-control-Allow-Origin', '*')
    res.send({code: code_generator.code})
})

app.get('/check/:code', function (req, res) {
    let checkCode = req.params.code
    let msg = code_generator.check(checkCode)
    res.setHeader('Access-control-Allow-Origin', '*')
    res.send(msg)
})

app.listen(9999)

客户端代码：

<!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>
    <style>
        div{
            margin: 10px;
            padding: 10px;
            border: 2px solid;
        }
        p {
            margin: 5px;
            padding: 5px;
            border: 1px solid;
        }
        span {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <p id="time"></p>
        <p id="code"></p>
        <p>
            <input type="text" id="inputCode">
            <button id="button">发送</button>
            <span id="tips">还未发送</span>
        </p>
    </div>
</body>
<script>
    let code = document.querySelector("#code")
    let codePrevious
    setInterval(() => {
        time.innerHTML = new Date().toLocaleString()
    }, 1000)
    function poll () {
        const xhr = new XMLHttpRequest(),
            method = 'GET',
            url = 'http://localhost:9999/qrcode'
        xhr.open(method, url)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    let xhrData = JSON.parse(xhr.responseText)
                    if (codePrevious !== xhrData.code) {
                        codePrevious = xhrData.code
                        code.innerHTML = codePrevious
                    }
                }
            }
        }
        xhr.send()
    }
    setInterval(poll, 1000)
    function check (code) {
        const xhr = new XMLHttpRequest(),
            method = 'GET',
            url = `http://localhost:9999/check/${code}`
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                tips.innerHTML = xhr.responseText
            }
        }
        xhr.open(method, url)
        xhr.send()
    }
    button.addEventListener('click', function () {
        let code = inputCode.value
        check(code)
    })
</script>
</html>

长轮询

长轮询：客户端发请求，服务器接收到请求后不立即响应，挂起一段时间以后再响应；同时客户端收到响应后立刻请求

image

客户端代码：

<!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>
    <style>
        div{
            margin: 10px;
            padding: 10px;
            border: 2px solid;
        }
        p {
            margin: 5px;
            padding: 5px;
            border: 1px solid;
        }
        span {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <p id="time"></p>
        <p id="code">请等待</p>
        <p>
            <input type="text" id="inputCode">
            <button id="button">发送</button>
            <span id="tips">还未发送</span>
        </p>
    </div>
</body>
<script>
    let code = document.querySelector("#code")
    setInterval(() => {
        time.innerHTML = new Date().toLocaleString()
    }, 1000)
    function longPoll () {
        const xhr = new XMLHttpRequest(),
            method = 'GET',
            url = 'http://localhost:8065/qrcode'
        xhr.open(method, url)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    longPoll()
                    let xhrData = JSON.parse(xhr.responseText)
                    code.innerHTML = xhrData.code
                }
            }
        }
        xhr.send()
    }
    longPoll()
    function check (code) {
        const xhr = new XMLHttpRequest(),
            method = 'GET',
            url = `http://localhost:8065/check/${code}`
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                tips.innerHTML = xhr.responseText
            }
        }
        xhr.open(method, url)
        xhr.send()
    }
    button.addEventListener('click', function () {
        let code = inputCode.value
        check(code)
    })
</script>
</html>

服务端代码：

const express = require('express')
const app = express()

class CodeGenerator {
    constructor () {
        let initCode = ('' + Math.random()).slice(-8)
        this.code = initCode
        this.previousCode = initCode
    }
    check (code) {
        return code === this.code || code === this.previousCode ? '验证通过' : '验证不通过'
    }
    setNewCode () {
        this.code = ('' + Math.random()).slice(-8)
        setTimeout(() => this.previousCode = this.code, 2000)
    }
    update (time) {
        let self = this
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                this.setNewCode()
                resolve(this.code)
            }, time)
        })
    }

}

let code_generator = new CodeGenerator()

app.get('/qrcode', async function (req, res) {
    res.setHeader('Access-control-Allow-Origin', '*')
    let code = await code_generator.update(5000)
    res.send({code})
})

app.get('/check/:code', function (req, res) {
    let checkCode = req.params.code
    let msg = code_generator.check(checkCode)
    res.setHeader('Access-control-Allow-Origin', '*')
    res.send(msg)
})


app.listen(8065)

但是这里有一个很不愉快的事情：第一次请求以后必须等待很长时间才能获得结果，也就是说首次加载时页面没有数据

我们这么修改一下代码：每次客户端请求数据的时候都带上一个clientCode，这个clientCode就是服务端的code

然后我们第一次传的时候把这个clientCode置为0，此时服务端code无论如何不能是0，他俩不相等；随后始终把服务端的code赋值给clientCode，这样如果clientCode和服务端的code，他俩相等，这就区分了客户端首次请求和非首次请求

const express = require('express')
const app = express()

class CodeGenerator {
    constructor () {
        let initCode = ('' + Math.random()).slice(-8)
        this.code = initCode
        this.previousCode = initCode
    }
    check (code) {
        return code === this.code || code === this.previousCode ? '验证通过' : '验证不通过'
    }
    setNewCode () {
        this.code = ('' + Math.random()).slice(-8)
        setTimeout(() => this.previousCode = this.code, 2000)
    }
    update (time) {
        let self = this
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                this.setNewCode()
                resolve(this.code)
            }, time)
        })
    }

}

let code_generator = new CodeGenerator()

app.get('/qrcode/:clientCode', async function (req, res) {
    res.setHeader('Access-control-Allow-Origin', '*')
    let clientCode = req.params.clientCode
    let code
    if (clientCode === code_generator.code) {
        code = await code_generator.update(5000)
    } else {
        code = code_generator.code
    }
    res.send({code, updateTimes: code_generator.updateTimes})
})

app.get('/check/:code', function (req, res) {
    let checkCode = req.params.code
    let msg = code_generator.check(checkCode)
    res.setHeader('Access-control-Allow-Origin', '*')
    res.send(msg)
})


app.listen(8065)

客户端

<!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>
    <style>
        div{
            margin: 10px;
            padding: 10px;
            border: 2px solid;
        }
        p {
            margin: 5px;
            padding: 5px;
            border: 1px solid;
        }
        span {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <p id="time"></p>
        <p id="code"></p>
        <p>
            <input type="text" id="inputCode">
            <button id="button">发送</button>
            <span id="tips">还未发送</span>
        </p>
    </div>
</body>
<script>
    let code = document.querySelector("#code")
    time.innerHTML = new Date().toLocaleString()
    setInterval(() => {
        time.innerHTML = new Date().toLocaleString()
    }, 1000)
    function longPoll (clientCode) {
        const xhr = new XMLHttpRequest(),
            method = 'GET',
            url = `http://localhost:8065/qrcode/${clientCode}`
        xhr.open(method, url)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    let xhrData = JSON.parse(xhr.responseText)
                    code.innerHTML = xhrData.code
                    longPoll(xhrData.code)
                }
            }
        }
        xhr.send()
    }
    longPoll(0)
    function check (code) {
        const xhr = new XMLHttpRequest(),
            method = 'GET',
            url = `http://localhost:8065/check/${code}`
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                tips.innerHTML = xhr.responseText
            }
        }
        xhr.open(method, url)
        xhr.send()
    }
    button.addEventListener('click', function () {
        let code = inputCode.value
        check(code)
    })
</script>
</html>

协商

我觉得协商是最好的一种办法，服务器端不需要做太多改变，只是每次传code的时候在传一个过期时间，然后前端等待这么长时间再发起请求

服务端代码

const express = require('express')
const app = express()

class CodeGenerator {
    constructor () {
        this.code = undefined
        this.previousCode = undefined
        this.expire = undefined
    }
    check (code) {
        return code === this.code || code === this.previousCode ? '验证通过' : '验证不通过'
    }
    setNewCode () {
        this.code = ('' + Math.random()).slice(-8)
        setTimeout(() => this.previousCode = this.code, 2000)
    }
    update (time) {
        this.expire = time
        setInterval(() => this.setNewCode(), time)
    }
}

let code_generator = new CodeGenerator()
code_generator.update(5000)

app.get('/qrcode', function (req, res) {
    res.setHeader('Access-control-Allow-Origin', '*')
    res.send({code: code_generator.code, expire: code_generator.expire})
})

app.get('/check/:code', function (req, res) {
    let checkCode = req.params.code
    let msg = code_generator.check(checkCode)
    res.setHeader('Access-control-Allow-Origin', '*')
    res.send(msg)
})

app.listen(8066)

客户端代码

<!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>
    <style>
        div{
            margin: 10px;
            padding: 10px;
            border: 2px solid;
        }
        p {
            margin: 5px;
            padding: 5px;
            border: 1px solid;
        }
        span {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <p id="time"></p>
        <p id="code"></p>
        <p>
            <input type="text" id="inputCode">
            <button id="button">发送</button>
            <span id="tips">还未发送</span>
        </p>
    </div>
</body>
<script>
    let code = document.querySelector("#code")
    let codePrevious, expire
    setInterval(() => {
        time.innerHTML = new Date().toLocaleString()
    }, 1000)
    function poll () {
        const xhr = new XMLHttpRequest(),
            method = 'GET',
            url = 'http://localhost:8066/qrcode'
        xhr.open(method, url)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    let xhrData = JSON.parse(xhr.responseText)
                    if (codePrevious !== xhrData.code) {
                        codePrevious = xhrData.code
                        code.innerHTML = codePrevious
                        expire = parseInt(xhrData.expire, 10)
                        setTimeout(poll, expire)
                    }
                }
            }
        }
        xhr.send()
    }
    poll()
    function check (code) {
        const xhr = new XMLHttpRequest(),
            method = 'GET',
            url = `http://localhost:8066/check/${code}`
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                tips.innerHTML = xhr.responseText
            }
        }
        xhr.open(method, url)
        xhr.send()
    }
    button.addEventListener('click', function () {
        let code = inputCode.value
        check(code)
    })
</script>
</html>

相关文章

  • 长短轮询

    长短轮询、协商 短轮询 短轮询：客户端不断发送请求，服务端接到请求后立刻响应之 服务器代码，使用express： ...

  • http长短连接和长短轮询、webSocket

    本文主要介绍长连接、短连接、长轮询、短轮询 和 webSocket。长连接、短连接、长轮询、短轮询是基于http的...

  • 数据同步笔记-长短轮询

    最近在review自己的数据同步代码，不过在看自己通过消息队列取消息的时候意识到一个问题，由于数据同步的架构是将源...

  • websocket,http长短连接,http轮询

    https://www.cnblogs.com/gotodsp/p/6366163.htmlhttps://mp....

  • 长短轮询与http长连接和短链接

    一、长短轮询1、短轮询：客户端向服务器端发起请求，服务器端立即返回相关信息并且关闭链接。同时客户端再次发起请求，与...

  • 长连接-原理-场景

    长短轮询和长短连接的区别 这里简单说一下它们的区别，LZ这里只说最根本的区别。 第一个区别是决定的方式，一个TCP...

  • 负载均衡算法1--轮询

    轮询算法分为简单轮询(Round-Robin)和加权轮询(Weighted-Round-Robin)。 简单轮询(...

  • Round Robin 轮询调度算法

    Round Robin 轮询调度算法 轮询调度（Round-Robin Scheduling） 轮询调度（Roun...

  • 后台轮询service

    直接上代码 轮询服务 使用方法 开始使用轮询 结束使用轮询

  • rxjava使用小结

    1.延迟请求 延迟n秒后再去请求 然后使用flatmap转换 2.轮询请求-无限轮询 3.轮询请求-限定次数轮询 ...

网友评论

      本文标题：长短轮询

      本文链接：https://www.haomeiwen.com/subject/clmsfqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|长短轮询|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！