websocket

最新推荐文章于 2024-12-03 20:39:29 发布

原创最新推荐文章于 2024-12-03 20:39:29 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs

本文介绍了一个使用WebSocket进行实时数据推送的实例，包括服务器端和客户端的实现代码。服务器使用Node.js和ws模块，定时向客户端推送数据；客户端通过HTML和JavaScript接收并显示服务器发送的数据，同时可以将输入的数据发送回服务器。

var WebSocketServer = require("ws").Server; // npm i ws -S
let wss = new WebSocketServer({port:8989});

wss.on("connection",function(ws){
    let obj = {
        name:"光达",
        age: 20
    }
    //推送数据
    setInterval(()=>{
        //查询数据库中的信息，并推送给页面
        ws.send(JSON.stringify(obj));
    },1000);
    
    ws.onmessage = function(d){
        //插入到数据中
        console.log(d.data);
    }    

    //错误信息
    ws.onerror = function(err){
        console.log(err);
    }

    // 关闭
    // ws.close();
});

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>websocket的主页</h1>
    评论：<input type="text" class="ipt">
    <button class="btn">点我推送数据到服务器</button>

    <script>
        //同源： 协议  域名  端口号  必须全部一致
        //非同源： 跨域

        //连接服务器
       let ws = new WebSocket("ws://localhost:8989");
       ws.onopen = function(){
           console.log("连接成功");
       }

       ws.onmessage = function(d){
            console.log(d.data);
       };
       
    //    ws.addEventListener("message",function(e){

    //    })

    document.querySelector(".btn").onclick = function(){
        let iptValue = document.querySelector(".ipt").value;
        // console.log(iptValue);
        ws.send(iptValue);
    }
    </script>
</body>
</html>