JS案例：Ajax实现简单局域网聊天室

利用Ajax将数据提交到后台，再由后台发送到前端，渲染内容

代码如下：

HTML：

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{margin: 0;padding: 0;}
    #textBox{width: 800px;height: 600px;border: 1px solid black;margin: 50px 0;font-size: 20px;}
    </style>
    </head>

    <body>
        <textarea id="textBox"></textarea><br>
        <input type="text">:<input type="text" style="width:600px;"><button>Send</button>
        <script>
            var names = document.querySelectorAll("input")[0];
            var msgs = document.querySelectorAll("input")[1];
            var box = document.getElementById("textBox");
            var btn = document.querySelectorAll("button")[0];
            //设置刷新时间为一秒一次
            setInterval(loadHandler, 1000);
            // 点击发送。监听事件
            btn.addEventListener("click", sendText);
            // 点击后执行Ajax
            function loadHandler(data) {
                if (!data) {
                    data = {
                        id: 2
                    };
                }
                var xhr = new XMLHttpRequest();
                xhr.addEventListener("load", startPost);
                xhr.open("POST", "http://10.9.48.155:1024/"); //这里一定是主机的IP地址
                xhr.send(JSON.stringify(data));

            }



            function startPost(e) {
                box.value = (JSON.parse(this.response)).resu.join("\n"); //将后台拼接好的数据返回到聊天面板
            }

            function sendText(e) {
                // 将从输入框获取的内容添加到对象发送到后端
                if (names.value.length === 0) return;
                if (msgs.value.length === 0) return;
                var obj = {
                    id: 1,
                    user: names.value,
                    mas: msgs.value
                }
                loadHandler(obj);
            }
        </script>
    </body>

</html>

node代码：

var http = require("http");//获取http请求（前面的文章有详细注释）
var arr = []; //新建消息容器，存放消息集

var server = http.createServer(function (req, res) {
    var data = "";
    req.on("data", function (d) {
        data += d;
    });
    req.on("end", function () {
        var obj = JSON.parse(data);
        //解析对象，将user和msg取出
        if (obj.id === 1) {
            arr.push(obj.user + ":" + obj.mas);
        }
        // 返回数组和错误信息（没有则为空）
        var result = {
            resu: arr,
            error: null
        };
        res.writeHead(200, {
            "Content-Type": "text/plain",
            "Access-Control-Allow-Origin": "*"
        });
        res.write(JSON.stringify(result));//将打包好的对象传到前端
        res.end();
    });
});
// 监听服务
server.listen(1024, "10.9.48.155", function () {
    console.log("侦听开始");
})

 

posted @   阿宇的编程之旅  阅读(1201)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示