nodejs搭建websocket（前后端交互小demo）

最新推荐文章于 2024-04-22 09:48:52 发布

_小郑有点困了

最新推荐文章于 2024-04-22 09:48:52 发布

阅读量752

点赞数 3

分类专栏： javascript 文章标签： websocket js javascript

本文链接：https://blog.csdn.net/qq_44706619/article/details/118680498

版权

javascript 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

服务端代码：

var ws = require("nodejs-websocket");

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(8848);

客户端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ws demo</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:8848');

            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="客户端发送的呵呵哈哈哈"
            }
        }
    </script>
</body>

</html>

心跳机制：

这里我并没有写心跳机制以及重连机制。

websocket
心跳机制是哪一端做的怎么做到定时发送的
心跳是客户端与服务端约定的，客户端发送特定东西，服务端接收识别回应指定的东西，就形成了我“Ping”你“Pong”的效果。
另外服务端在send之后的回调，能走进回调是否就意味着send成功.

但是我发现，ws有个状态。无论是客户端还是服务端都有。是可以描述两端连接状态的。
那么两端各自在连接成功之后写一个定时任务，不停地去判断这个状态是不是也可以变相的达到心跳的目的，因为初衷都是判断当前连接状态如何。

 //每次send或其他的监听函数之后可以去看这个状态
 console.log(ws.readyState)   //这个是websocket的状态

在这里插入图片描述

_小郑有点困了

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
nodejs搭建websocket（前后端交互小demo）

效果：服务端代码：var ws = require("nodejs-websocket");ws.createServer(function(conn){ conn.on("text",function(str){ //服务端接收到的数据 console.log("服务端收到:" + str); //接收到的数据再发送回客户端 conn.sendText("服务端发回-来自前端的"+str); let input = {
复制链接

扫一扫