websocket demo

最新推荐文章于 2024-08-15 15:48:47 发布

原创最新推荐文章于 2024-08-15 15:48:47 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

websocket

2 篇文章

订阅专栏

本文展示了如何在HTML5客户端和Node.js服务端实现WebSocket的连接与消息传递，包括握手、数据发送和接收。通过实例代码，读者将理解WebSocket在现代Web开发中的关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ws</title>
</head>
<body>
    <div id="mess">正在连接...</div>
    <div>
        <button id="state1" >发送</button>
        <a> 已发送：</a>
        <a id="sendnews"></a><br>
        <a>已接收:</a>
        <a id="receivenews"></a>
    </div>

    <script>
        // var mess = document.getElementById("mess");
        // if(window.WebSocket){
        //     var ws = new WebSocket('ws://127.0.0.1:9999');

        //     ws.onopen = function(e){
        //         console.log("连接服务器成功");
        //         mess.innerHTML = "连接成功"
        //         ws.send("连接成功",function(e){
        //           console.log('这里偶吗')
        //         });
        //     }

        //     ws.onclose = function(e){
        //         console.log("服务器关闭");
        //         mess.innerHTML = "服务器关闭"
        //     }

        //     ws.onerror = function(){
        //         console.log("连接出错");
        //         mess.innerHTML = "连接出错"
        //     }

        //     //收到服务器数据后的回调函数
        //     ws.onmessage = function(e){
        //         document.getElementById("receivenews").innerHTML=e.data;
        //     }

        //     //设置点击事件
        //     document.getElementById("state1").onclick = function(e){
        //         // console.log('之前',ws.readyState)   //这个是websocket的状态
        //         // console.log('之前',ws.bufferedAmount)   //这个是数据发送的状态
        //         ws.send("客户端发送的");
        //         // console.log('发送之后',ws.bufferedAmount)   //这个是数据发送的状态
        //         document.getElementById("sendnews").innerHTML="客户端发送的"
        //     }
        // }

        if (window.WebSocket) {
            console.log("支持");
        } else {
            console.log("不支持");
        }
        let ws = new WebSocket('ws://127.0.0.1:9999');
        ws.onopen = () => {
            console.log('open');
            ws.send('hekko');
        };
        ws.onmessage = (evt) => { console.log(evt) };
        ws.onclose = (evt) => { console.log('close') };
        ws.onerror = (evt) => { console.log('error') };
    </script>
</body>

</html>

服务端node :

const WebSocketServer = require("ws").Server;
const wss = new WebSocketServer({ port: 9999 });

wss.on('connection', ws => {
  console.log('websocket链接成功');
  ws.on('message', message => {
    console.log(message);
    setInterval(() => {
      ws.send(1122)
    }, 5000)
  })
})

// ws.createServer(function(conn){
//   conn.on("text",function(str){
//       //服务端接收到的数据
//       console.log("服务端收到:" + str);
//       //接收到的数据再发送回客户端
//       conn.sendText("服务端发回-来自前端的"+str);
//       let input = {
//         code:200,
//         parkingName:'GGGGGGG测试库',
//         plateNUmber:"贵A55555"
//       }
//       setTimeout(()=>{
//         input = JSON.stringify(input)
//         conn.send(input,function(){
//           console.log('如果说后端想要监听发送状况，能走进来是否意味着发送成功')
//         });
//         console.log(conn.readyState)   //ws状态
//       },2000)
//   });


//   conn.on("close",function(code,reason) {
//       console.log("服务端监听到关闭连接.");
//   });

//   conn.on("error",function(code,reason) {
//       console.log("服务端监听到连接失败.")
//   });

//   conn.on("pong",function(res){
//     console.log(res)
//   })
// }).listen(9999);