前后端websocket交互流程

前端陽哥

已于 2022-09-08 15:05:05 修改

阅读量3.3k

点赞数 3

分类专栏： Node.js深入浅出文章标签： websocket javascript 前端

于 2022-08-31 18:07:24 首次发布

本文链接：https://blog.csdn.net/weixin_44600358/article/details/126629279

版权

Node.js深入浅出专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用Node.js的'nodejs-websocket'库创建WebSocket服务器，并与HTML前端进行实时通信。后端通过监听不同事件来处理来自前端的消息，前端则利用WebSocket对象与服务器保持连接，实现数据的双向传输。当接收到特定消息时，后端会向前端发送相应的人物名称。

摘要由CSDN通过智能技术生成

node作为后端需使用中间件nodejs-websocket

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

console.log("开始建立连接...");

var server = ws.createServer(function (conn) {

  conn.on("connect", function (code) {
    console.log("开启连接" + code);
  });

  conn.on("text", function (result) {
    console.log("收到的信息为:" + result); //由Webtest.html中传来data 
    let a=''
    if (result == 1) {
      a="飞哥" //发送"success"至Webtest.html
    } else if (result == 2) {
      a="帆姐" //发送"success"至Webtest.html
    } else if (result == 3) {
      a='东哥'
    }else if(result==4){
      a="阳哥"
    }

//向前端发送消息
    conn.sendText(a);
  });

  conn.on("close", function (code) {
    console.log("关闭连接")
  });

  conn.on("error", function (code) {
    console.log("异常关闭")
  });
}).listen(8001);

console.log("WebSocket连接建立完毕");

前端

<!Doctype html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket -- test</title>
</head>
<style>
    .block {
        text-align: center;
        margin-top: 200px;
    }
 
    #mess {
        text-align: center
    }
 
    .value {
        width: 200px;
        height: 200px;
        border: 1px solid;
        text-align: center;
        line-height: 200px;
        display: inline-block;
    }
</style>
<body>
    <div id="mess">正在连接...</div>
    <div class="block">
        
     
            <textarea name="" id="value3" cols="30" rows="10"></textarea>
            <button id="cc">测试提交</button>

            <div id="ku"></div>
            
      
    </div>
 
    <script>
        var mess = document.getElementById("mess");
        var ku = document.getElementById("ku");
 
        if (window.WebSocket) {
            var ws = new WebSocket('ws://localhost:8001');
 
            ws.onopen = function (e) {
                console.log("连接服务器成功");
                ws.send("route"); //可以传递信息，进行连接确认
            }
            ws.onclose = function (e) {
                console.log("服务器关闭" + e.code); //服务器关闭1006
            }
            ws.onerror = function (e) {
                console.log("连接出错" + e.code); //连接出错 undefined
            }
 
            ws.onmessage = function (e) {
                mess.innerHTML = "连接成功";
                console.log("node 返回信息： " + e.data); //若连接成功，为 success
                let p=document.createElement('p')
                p.innerHTML=e.data
                ku.appendChild(p)

                document.getElementById("cc").onclick =  (e) =>{
                    let kk=window.document.getElementById("value3").value
                 //发送消息
                    ws.send(kk);
                }
            }
        }
    </script>
</body>
</html>