使用websocket来使得前端与后台进行连接

最新推荐文章于 2025-11-11 06:30:00 发布

原创最新推荐文章于 2025-11-11 06:30:00 发布 · 4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序 #前端

vuejs 专栏收录该内容

27 篇文章

订阅专栏

websocket（HTML5新特性）

这个j技术会让我们的前端在不需要发送请求的情况下,可以接收后台传来的数据,且可以让浏览器监听不到
使用方法如下
我们首先随便创建一个前端页面

<!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>
</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>
    <button @click="myfunc()">打卡</button>
    <script>
        let ws = new WebSocket("你想连接的网站");
        ws.onopen=()=>{
            console.log("服务已连接");
        }
        ws.onclose=()=>{
            ws=null;
            console.log("已关闭");
        }
        ws.onmessage=(ev)=>{
            let res=JSON.parse(ev.data);
            if(res.code==666){
                alert("打卡成功");
            }
        }
        function myfunc(){
           if(ws){
            let obj={
                insName:"sign",
                isDaka : true,
                username:"长沙葛乐"
            }
            let newobj=JSON.stringify(obj);
            ws.send(newobj)
           }
        }
    </script>
</body>
</html>