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

但是为了使它们出现,我需要重新加载页面,但是我需要在不重新加载页面的情况下进行所有操作。因此,只要我追加即可看到它,删除它也一样。

我一直在使用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-> Array ['SIP-448']->重新加载页面->现在可以看到附加的内容。

我正在尝试使其正常工作,因此我永远不必刷新。

在寻求建议之前,我首先尝试的方法是@ show-me-the-code建议的方法,然后发生以下情况,它确实做了我想要做的事情,但是在1个值之后,它会中断,并且在删除它们时会出现值数组中的数据仍然仍然显示在网页上:

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

大于1的值
javascript - 根据数组中的值实时追加-LMLPHP

当我刷新页面时,它将转到:

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

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

这是我的大问题,我不知道为什么它以目前的方式运行。

最佳答案

这就是我要做的。在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();

09-20 23:35