配列の中身をabc順に表示したい

Question

以下の出力（メインコードの112行目）をabc順にwebページでも表示したいです．herokuの更新の都合？によって，更新が入るたびに順番が変わってしまい困っています．常に，abc順で固定されるようにしたいです．
ターミナルとコンソール上ではabc順にソートできている状態です．

$('<div><input readonly type="text" value='+key+' /></div>').appendTo("#group"+key); //ユーザID

例えば，ユーザが３人いてtanaka，satou，uedaがログインするとweb上でsatou,tanaka,uedaと表示されるようにしたいということです．
ユーザIDはkeys配列に入っていて，それぞれユーザIDはkeyとなっています．

わかりにくい説明ですみません．

↓メインコード

navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.AudioContext = window.AudioContext || window.webkitAudioContext;

var keymicnodepair=new Object();
var keygainpair=new Object();
var beforevalue=new Object();
var keyoutputpair=new Object();

navigator.getUserMedia({ audio: true}, function (stream) {

  var context = new AudioContext();
  var peer;
  var socket = io();//元のやつ
  var id;
  var output = context.createMediaStreamDestination();//ダミー用

  socket.on('connect', function () {
    var options = {
      host: location.hostname,
      port: location.port,
      path: '/api', // app.use('/api', peerServer);と同じ位置になるように
    };
    id = localStorage.getItem('user_id');
    peer = new Peer(id, options);
    //peer = new Peer(socket.id, options);
    peer.on('call', function (call) {
      console.log('%sにcallされました', call.peer);
      for(var i in keygainpair){
        console.log("call key="+i+"   gain="+keygainpair[i].gain.value);
      }
      call.answer(keyoutputpair[call.peer].stream);
    });
    $(function(){
        setInterval(function(){
          console.log("calldammy!");
          peer2 = new Peer("dammy", options);
          peer2.on('call', function (call) {
            console.log('%sにcallされました', call.peer);
            call.answer(output.stream);
          });
        },25000);
    });
  });

  //受信した全てのP2Pkeyをaudio要素に変換する
  socket.on('keys', function (keys) {

    for(var i in keymicnodepair){//ソース削除
      console.log("key="+i+"   gain="+keygainpair[i].gain.value);
      keygainpair[i].disconnect();
      keymicnodepair[i].disconnect();
      delete keymicnodepair[i];
      delete keygainpair[i];
      //不具合出たらdelete keyoutputpair[i];をまず検討
    }

    $("#audios").empty();
    $("#sliderarea").empty();

    var audios = document.querySelector('#audios');
    audios.innerHTML = '';

    console.log("keys",keys); //abc順に表示されるようになった171024
    console.log("socket.id",id);

    var index = keys.indexOf(id);
    if (index > -1) {
      keys.splice(index, 1);// 自分自身を無視
    }

    arrayforkeys=keys;//キー押下時の繰り返し処理のため 多分いらない

    keys.forEach(function (key) {
      keymicnodepair[key]=context.createMediaStreamSource(stream);//sourcenode
      if(context.createGain) {
        keygainpair[key] = context.createGain();
      }
      else {
        // 多分不要だと思われますが、念のため古いWeb Audio APIへの対処
        keygainpair[key] = context.createGainNode();
      }
      keyoutputpair[key]=context.createMediaStreamDestination();
      keymicnodepair[key].connect(keygainpair[key]);
      keygainpair[key].connect(keyoutputpair[key]);

      var call = peer.call(key, keyoutputpair[key].stream);
      if (call === undefined) {
        console.log(key + 'なんて居ません');
        return;
      }
      call.on('stream', function (remoteStream) {

        $(function(){
            setInterval(function(){
              console.log("senddammy!");
                socket.emit('dammy', "dammy");
            },25000);
        });

        var audio = new Audio();
        audio.src = URL.createObjectURL(remoteStream);
        audio.controls = false;
        audio.play();
        audios.appendChild(audio);

        //171024
        var ary=[keys];
        ary.sort();
        // document.write(ary);

        $('<div id=group'+key+'><div>').appendTo("#sliderarea");
        $('<div><input readonly type="text" value='+key+' /></div>').appendTo("#group"+key); //ユーザID
        console.log(key);
        $('<div id="num'+key+'"><input id="input'+key+'" readonly type="text" size="3"/></div>').appendTo("#group"+key); //数値
        $('<div id="slider'+key+'" style="height:300px"/></div>').appendTo("#group"+key); //スライダー

        $(function() {
          //スライダーを適用
          $('#slider'+key).slider({
            orientation: 'vertical',
            min: 0,
            max: 200,
            step: 1,
            value: 100,
            //スライダーの変化時にテキストボックスの値表示を更新
            change: function(e, ui) {
              $('#input'+key).val(ui.value);
              console.log("change!!!"+key+"    "+ui.value);
              console.log("change before: "+keygainpair[key].gain.value);
              keygainpair[key].gain.value=1;//0.5;
              //keygainpair[key].gain.value = ui.value/200;//デバッグ用
              console.log("change after: "+keygainpair[key].gain.value);

              //beforevalueの値更新
              try{
                if(key in beforevalue){
                  beforevalue[key]=ui.value/100;
                  for (var keyString in beforevalue) {
                    console.log("key="+keyString+"  value="+beforevalue[keyString]);
                  }
                }
              }catch(e){
                alert("key is not found");
              }
              for(var i in keygainpair){
                console.log("change key="+i+"   gain="+keygainpair[i].gain.value);
              }
            },

            //スライド中に変化を取得
            slide: function(e, ui) {
             $('#input'+key).val(ui.value);
           },

            //スライダーの初期化時に、その値をテキストボックスにも反映
            create: function(e, ui) {
              try{
                if(key in beforevalue){
                  console.log("value is updated");
                  keygainpair[key].gain.value=1;//0.5;
                  for (var keyString in beforevalue) {
                    console.log("key="+keyString+"  value="+beforevalue[keyString]);
                  }
                  console.log("");
                  $('#input'+key).val(beforevalue[key])*100;
                  $("#slider"+key).slider("value",beforevalue[key]*100);
                  ui.value=beforevalue[key]*100;
                  console.log("create before: "+keygainpair[key].gain.value);
                  console.log("create after: "+keygainpair[key].gain.value);
                }
                else{
                  //音量値初期値記憶
                  keygainpair[key].gain.value=1;//0.5;
                  beforevalue[key]=1;//0.5;
                  $('#input'+key).val('100');
                  console.log("初期化！");
                  console.log(  $('#input'+key).val());
                  for (var keyString in beforevalue) {
                    console.log("key="+keyString+"  value="+beforevalue[keyString]);
                  }
                }
              }catch(e){}
            }
          });
        });
      });
    });
  });

}, function (error) {
  alert('Failed to get local stream', error);
});

//キーダウン処理
var flag=true;
  document.onkeydown = function (evt){
      if (!evt) e = window.event;
      if(flag){
        console.log("キーが押された");
        document.getElementById("running").classList.add("pressing");
        for(var key in keygainpair){
          console.log("keydown before: "+keygainpair[key].gain.value);
          keygainpair[key].gain.value=beforevalue[key];
          console.log("keydown after: "+keygainpair[key].gain.value);
        }
      }
      flag=false;
    }

  //キーアップ処理
    document.onkeyup=function (evt){
      if (!evt) e = window.event;
      console.log("キーが離された");
      document.getElementById("running").classList.remove("pressing");
      flag=true;
      for(var key in keygainpair){
        console.log("keyup before: "+keygainpair[key].gain.value);
        keygainpair[key].gain.value=1;//0.5;
        console.log("keyup after: "+keygainpair[key].gain.value);
      }
    }

//自分の音を返す処理
navigator.getMedia2 = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getMedia2({ audio:true }, function(stream) {
var context = new AudioContext();
var source = context.createMediaStreamSource(stream);
if(context.createGain) {
  var micGain2 = context.createGain();
}
else {
  //多分不要だと思われますが、念のため古いWeb Audio APIへの対処
  micGain2 = context.createGainNode();
}
source.connect(micGain2);
micGain2.gain.value =1.0; //自分の音量調整

micGain2.connect(context.destination);
}, function(err){ //エラー処理
});

↓サーバコード

// Dependencies
const express = require('express');
const createHttpServer = require('http').createServer;
const createIo = require('socket.io');
const createPeerServer = require('peer').ExpressPeerServer;

// Environment
const port = process.env.PORT || 5650;

// Routes
const app = express();
const httpServer = createHttpServer(app);
const io = createIo(httpServer);
const peerServer = createPeerServer(httpServer);

app.use('/api', peerServer);
app.use(express.static(__dirname));

// Boot
httpServer.listen(port, () => {
  console.log(`Boot on http://localhost:${port}`);
});

// Manage p2p keys
const keys = [];

peerServer.on('connection', (key) => {
  if(key!="dammy") keys.push(key);
  keys.sort(); //追加171024
  console.log('connected', keys);

  io.emit('keys', keys);// 接続中の全てのクライアントへ`keys`イベントを発行
});
peerServer.on('disconnect', (key) => {
  const index = keys.indexOf(key);
  if (index > -1) {
    keys.splice(index, 1);
  }
  console.log('disconnect', keys);

  io.emit('keys', keys);// 同上
});

//---------------------------//
io.on('connection',function(socket) {
  socket.on("dammy",function(data){
    console.log(data);
  });

Comments

[maisumakun]

「ueda,satou,tanaka」はアルファベット順でも逆順でもなさそうですが、単なる間違いでしょうか。

[退会済みユーザー]

すみません，間違いです．頭文字のabc順にしたいのでsatou,tanaka,uedaです．修正します．ご指摘ありがとうございます！

[masaya_ohashi]

112行目の下でconsole.log(key)としている出力はabc順になっていますか？

[退会済みユーザー]

keyには一つずつ割り当てられているので，satou，tanaka...と別々に一行ずつ出力されています．63行目のconsole.log("keys", keys)ではsatou,tanaka,uedaと出力されます．keysの中身をsortしているので，keysの中のkeyはabc順になっています

[masaya_ohashi]

#sliderareaの中に#groupsatou、#grouptanaka、#groupuedaという順で出てこない、という問題なんですよね？

[退会済みユーザー]

そういうことです！

[masaya_ohashi]

$('<div><input readonly type="text" value='+key+' /></div>').appendTo("#group"+key);の次の行のconsole.log(key);ではABC順で出てるんですよね？なのに#slideareaの中には実際にはABC順でない#groupXXXが入っている、ということですよね？

[退会済みユーザー]

すみません，ご指摘の$('<div><input readonly type="text" value='+key+' /></div>').appendTo("#group"+key);の次の行のconsole.log(key);では一つのkeyしか出ていません..//スライド中に変化を取得の上のconsole.log("change key="+i+" gain="+keygainpair[i].gain.value);では，abc順でkeyとgainの情報が一行ずつ出ています．恐らくこちらのconsole.logと間違えて前回コメントしてしまいました．

[masaya_ohashi]

1つのkeyしか出てないのは承知のうえで、それが3回「ABC順」で出るかを確認したいのです。console.log(key);ではなく、console.log("appendTo:" + key);と出力を変えてテストして、appendTo:satou、appendTo:tanaka、appendTo:uedaと3回に分けて出力されているかを確認してください。