轮询小案例-扫码登录

最新推荐文章于 2024-03-05 10:17:44 发布

thinkasany

最新推荐文章于 2024-03-05 10:17:44 发布

阅读量914

点赞数 1

文章标签： html node.js

本文链接：https://blog.csdn.net/daddykei/article/details/109499757

版权

模拟扫码登录

代码部分

const koa = require('koa')
const koaRouter = require('koa-router')
const koaStaticCache = require('koa-static-cache')

const server = new koa()
const router = new koaRouter()
//静态资源处理
server.use(koaStaticCache('./static', {
    prefix: '/static',
    gzip: true,
    dynamic: true
}))
let user = null
router.get('/check', async ctx => {
    if (!user) {
        ctx.body = {
            code: -1,
            message: '未登录'
        }
    } else {
        ctx.body = {
            code: 0,
            message: '登录成功'
        }
    }

})
router.get('/login', async ctx => {
    user = {}
    ctx.body = 'login success'
})
server.use(router.routes())
server.listen(8081, () => {
    console.log('server start success');
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        长轮询
        <img src="二维码地址"></img>
    </div>
    <script>
        let box = document.querySelector('#box')
        let xhr = new XMLHttpRequest()
        xhr.onload = function() {
           let data = JSON.parse(xhr.responseText)
           if (data.code == -1) {
               setTimeout(r,1000)
           } else {
               document.body.innerHTML = 'login success'
           }
        }
        function r() {
            xhr.open('get','/check',true)
            xhr.send()
        }
        r()
    </script>
</body>
</html>

微云扫码登录

可以看出也是一个轮询的过程
在这里插入图片描述

本地模拟了一下

https://cli.im/
网址静态码网址跳转活码
把网址直接生成二维码，生成后无法修改，无法统计扫码量。

在这里插入图片描述

同一个局域网内都可以访问

在同一wifi下用手机和别人的电脑都测试过可以访问扫码
在这里插入图片描述

ipconfig查询ip地址

在这里插入图片描述

扫码跳转结果

在这里插入图片描述
本地电脑通过修改hosts文件实现域名本地解析
在机房课上看同学改了一下本地解析 emmm 就是可以恶搞之类的
win+r -> drivers -> etc/hosts
遇到无法更改hosts 或者无法写入保存
给其全部权限
这篇文章步骤给的不错
https://jingyan.baidu.com/article/5d6edee2ca9e2699eadeec92.html
在这里插入图片描述