javascript - 根据数组中的值实时追加

Question

因此，我当前正在根据数组中存储的值附加到我的网页或从中删除。

但是为了让它们出现，我需要重新加载页面，但我需要这一切都在不重新加载页面的情况下即时发生。因此，一旦我附加我就可以看到它，当我删除它时也是如此。

我一直在使用 socket.io 服务器端代码来尝试执行此操作，但结果好坏参半。我对 socket.io 不太有经验，并且仍在尝试掌握它。

我实际上只是尝试根据数组 chanArr 中存储的内容实时发出数据，将其附加到表中。

app.js 文件

这是我的 socket.io 服务器端代码，函数 updateSip 是将数据发送回客户端的函数。

var ari = require('ari-client');
var util = require('util');
var chanArr = [];
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);

//ARI client
ari.connect('http://localhost:8088', 'asterisk', 'asterisk', clientLoaded);

function clientLoaded(err, client) {
    if (err) {
        throw err;
    }
    // find or create a holding bridges
    var bridge = null;
    client.bridges.list(function (err, bridges) {
        if (err) {
            throw err;
        }

        bridge = bridges.filter(function (candidate) {
                return candidate.bridge_type === 'mixing';
            })[0];

        if (bridge) {
            console.log(util.format('Using bridge %s', bridge.id));
        } else

            client.bridges.create({
                type : 'mixing'
            }, function (err, newBridge) {
                if (err) {
                    throw err;
                }

                bridge = newBridge;
                console.log(util.format('Created bridge %s', bridge.id));
            });
    }
    });

    // handler for StasisStart event
    function stasisStart(event, channel) {
        console.log(util.format(
                'Channel %s just entered our application, adding it to bridge %s',
                channel.name,
                bridge.id));

        channel.answer(function (err) {
            if (err) {
                throw err;
            }

            bridge.addChannel({
                channel : channel.id
            }, function (err) {
                var id = chanArr.push(channel.name)
                    updateSip();
                console.log("User: " + channel.name);
                if (err) {
                    throw err;
                }

                //If else statement to start music for first user entering channel, music will stop once more than 1 enters the channel.
                if (chanArr.length <= 1) {
                    bridge.startMoh(function (err) {
                        if (err) {
                            throw err;
                        }
                    });
                } else {
                    bridge.stopMoh(function (err) {
                        if (err) {
                            throw err;
                        }
                    });
                }

            });
        });
    }

    // handler for StasisEnd event
    function stasisEnd(event, channel) {
        console.log(util.format(
                'Channel %s just left our application', channel.name));
        console.log(channel.name);

        var index = chanArr.indexOf(channel.name);
        chanArr.splice(index, 1);
        updateSip();
    }
    client.on('StasisStart', stasisStart);
    client.on('StasisEnd', stasisEnd);
    client.start('bridge-hold');
    }

    //Socket.io logic here
    server.listen(3009, function () {
        console.log('listening on *:3009');
    });

    app.use(express.static(__dirname + '/public'));
    app.get('/', function (req, res) {
        res.sendfile(__dirname + "/testPage.html");
    });

    io.sockets.on('connection', function () {
        updateSip();
    });

    io.sockets.on('updateSip', function () {
        console.log('Being called!')
        updateSip();
    });

    function updateSip() {
        io.sockets.emit('sip', chanArr);
    }

test.js

客户端 JQuery 和 socket.io 代码以及将元素附加到网页的位置。

jQuery(function ($) {
    var socket = io.connect();
    var $sip = $('#sip');
    socket.on('sip', function (data) {
        var sip = '';
        for (i = 0; i < data.length; i++) {
            sip += data[i]
        if(sip){
        $sip.append('<tr>\
                                    <td>' + sip + '</td>\
                                    <td><input type="checkbox" data-on="Voice" data-off="Muted" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger"></td>\
                                    <td><button class="btn btn-default kick" id="kick" data-toggle="modal" data-target="#myModal" type="submit">Kick</button></td>\
                                    </tr>');
        }
        else{
            $sip.append('Currently no extensions');
        }
        sip = '';
        }

    });
});

testPage.html

我也附加了内容。

            <div class="secondary-bridge">
<h3 class="conf-head">Conference call:</h3>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Extension</th>
            <th>Mute</th>
            <th>Kick</th>
        </tr>
    </thead>
    <tbody id ="sip">
    </tbody>
</table>

编辑: 因此，目前，我必须刷新页面，以便页面运行 updateSip 函数，然后发出并显示已附加的新值，每次添加或从数组中删除一个值来处理要显示的内容必须刷新页面。

页面加载 -> Array[]-> 调用，在数组中插入值 -> Array['SIP-448']-> 重新加载页面 -> 现在可以看到它已附加。

我正在努力让它工作，所以我永远不需要刷新。

在寻求一些建议之前，我尝试的第一件事是建议的方法@show-me-the-code，并且发生了以下情况，它确实做了我想要它做的事情，但是在 1 个值之后，它中断了，并且当值它们从数组中删除后仍然显示在网页上:

1 个值

超过 1 个值

当我刷新页面时，它会转到此:

当我尝试从数组中删除一个值时，它会附加上一个值，一旦我刷新页面，就只有一个值应该保留。

这是我的大问题，我不知道为什么它会像现在这样。

Answer 1

这就是我要做的。在 chanArr 发生更改(添加或删除元素)的服务器端，触发 emit('sip', chanArr) 调用。

// right after adding channel to the array
chanArr.push(channel.name);
updateSip();

// also after removing it from the array if it is in different function
chanArr.splice(index, 1);
updateSip();