个人中心
gpt4 book ai didi

javascript - 每次用户添加新数据时， Node 都会多次发回数据

转载 作者：太空宇宙 更新时间：2023-11-04 00:48:50 25 4
gpt4 key购买 nike

首先，我想为这个措辞可怕的标题道歉；在过去的 20 分钟里，我一直在想一个办法，但我不知道一种简洁的方式来描述我遇到的问题。如果有人有更好的建议，请告诉我或编辑标题。

背景:为了学习 NodeJS，我正在创建一个聊天服务器。当用户单击 createRoomBtn 时，会创建一个事件，其中包含用户刚刚创建的房间名称，并将其发送到 app 中的 socket.js 模块。在 app.js 中，app.js 然后将房间追加到房间数组中(这些房间在浏览器中显示为列表)，并向包括事件用户在内的所有用户创建广播事件。

问题:假设有一个空列表，用户添加了一个名为“NodeJS”的新房间，这将在屏幕上显示该房间，一切都很好。现在，如果我要添加另一个房间，例如 Socket.io，浏览器将呈现以下结果:Socket.io, NodeJS, NodeJS。如果我要添加“Javascript”，结果将是 Javascript、Socket.io、NodeJS、Socket.io、Node.JS。基本上，浏览器会一遍又一遍地呈现列表，并且每次列表都会缩小一。我完全不知道为什么会发生这种情况。奇怪的是，如果我按刷新，浏览器会正确呈现列表 Javascript、Socket.io、NodeJS。这是怎么回事？

socket.js:

module.exports = function(io, rooms) {
    var chatrooms = io.of('/roomlist').on('connection', function(socket) {  //io.of creates a namespace 
        console.log('Connection established on the server');
        socket.emit('roomupdate', JSON.stringify(rooms));   


        socket.on('newroom', function(data) {
            console.log(data);
            rooms.push(data);
            socket.broadcast.emit('roomupdate', JSON.stringify(rooms)); 
            socket.emit('roomupdate', JSON.stringify(rooms));   

        })      
    })

    var messages = io.of('/messages').on('connection', function(socket) {   
        console.log('Connected to the chatroom!');

        socket.on('joinroom', function(data) {
            socket.username = data.user; 
            socket.userpic = data.userPic;
            socket.join(data.room);         
        })

        socket.on('newMessage', function(data) {

            socket.broadcast.to(data.room_number).emit('messagefeed', JSON.stringify(data));  
        })
    })
}

chatrooms.html:

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{title}}</title>
        <link rel="stylesheet" href="../css/chatrooms.css">
        <script src="//code.jquery.com/jquery-1.11.0.min.js"> </script> 
        <script src="/socket.io/socket.io.js"> </script> 
        <script>
        $(function() {
            var host = '{{config.host}}';       
            var socket = io.connect(host + '/roomlist');

            socket.on('connect', function() {
                console.log('connection established');      
            })  
            socket.on('roomupdate', function(data) {
                $('.roomlist').html('');

                var procData = JSON.parse(data); 

                for (var i = 0; i < procData.length; i++) { 
                    var str = '<a href="room/' + procData[i].room_number + '"><li>'
                    + procData[i].room_name + '<li></a>'; 
                    $('.roomlist').prepend(str);

                    console.log(str);

                }
            }) 

            $(document).on('click', '#createRoomBtn', function() {
                var room_name = $('#newRoomText').val();
                console.log(room_name);
                if (room_name != '') {
                    var room_number = parseInt(Math.random() * 10000);
                    socket.emit('newroom', {room_name: room_name, room_number: room_number});
                    $('#newRoomText').val('');                  
                }
            }) 
        }) 

        </script>
    </head>  

<body>

    <div class="cr-userbox">
        <img src="{{user.profilePic}}" class="userPic">
        <h3 class="username">{{user.fullName}}| <a href="/logout">Logout</a></h3>
    </div>


    <div class="cr-container">
        <h1> ChatRooms</h1>
        <div class="cr-newroom">
            <input type="text" id="newRoomText" autocomplete="off">
            <input type="submit" id="createRoomBtn" value=" Create Room">
        </div>

        <div class="cr-roomlist">
            <ul class="roomlist">
            </ul>
        </div>
    </div>
</body>
</html>

如果需要更多信息/模块，请告诉我，我很乐意提供。

更新1:按照 alex-rokabilis 的正确建议，我已将 $('.roomlist').html() = '' 更改为 $( '.roomlist').html('')，但是问题仍然存在。

最佳答案

我不确定这是否是您问题的原因，但您正在获得嵌套列表元素，因为您有两个开放 <li> socket.on ('roomupdate') 函数中的标签

关于javascript - 每次用户添加新数据时， Node 都会多次发回数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33445849/

25 4 0
文章推荐： c - 在结构指针中访问动态内存
文章推荐： python - 在 IPython 中执行 .py 文件
文章推荐： c - 如何在 C 或 Assembly 中修改 Stack 上的返回地址
文章推荐： python - Gtk3+ Pygobject 在 TreeView 中选择列
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com