使用MongoDB和mLab(Node.js)

时间:2016-06-22 16:45:23

标签: javascript node.js git heroku socket.io

我正在尝试通过MongoDB使用mLab扩展将我的实时聊天应用程序连接到Heroku。我的mLab数据库用户名是:jlewallen18,对于这个问题,我用以下代码替换了我的密码:MYPASSWORD。

以下是我设置heroku的步骤。

  • git init
  • git add(package.json,index.html,server.js)
  • git commit -m“Initial Commit”
  • heroku登录
  • heroku create
  • git push heroku master注意:这是我在推送到heroku时在cmd提示符中看到的内容:

cmd prompt

  • heroku open(导致网页上出现应用程序错误)

Heroku'服务器'添加了mLab扩展,并提供了一个免费的沙盒数据库用于测试。

您需要我提供哪些其他信息来帮助诊断此问题?感谢任何和所有的帮助表示赞赏:)

HTML:

<!DOCTYPE html>
        <html>
          <head>
            <title>Chat</title>
            <link rel="stylesheet" href="main.css">
          </head>



          <body>
            <div class="all-content">
            <div class="header-bar">
              <div class="bar">
                  <img src="C:\Users\jlewa\Desktop\assets\affinity_fm_only_letters.png" class="top-logo" style="float: left;">
                  <ul class="standard-nav" style="float: left;">
                    <li>Home</li>
                    <li>Lyrics Hub</li>
                    <li>Affinity LIVE</li>
                    <li>Merchandise</li>
                  </ul>
              </div>
              <div class="dropshadow"></div>
            </div>

            <div class="container-middle-third">
              <div class="youtube-video" style="float: left;">
                <div class="DJ-text">Affinity FM DJ Room</div>
                <div class="DJ-underline"></div>
                <div id="player" style="width: 1280px; height: 720px;"></div>
              </div>
              </div>

              <div class="chat" style="float: left;">
                <div class="Chat-text">Chat</div>
                <div class="Chat-underline"></div>
                <input type="text" class="chat-name" placeholder="Chat">
                    <div class="right-tab">
                        <div class="info-rect">INFO</div>
                    </div>
                <div class="chat-messages"></div>
                <textarea placeholder="Join the conversation..."></textarea>
                <div class="chat-status">Status: <span>Idle</span></div>
              </div>

            <div class="bottom-bar">

              <img src="C:\Users\jlewa\Desktop\assets\affinitylogo.png" class="thumbnail" id="thumbnail" style="float: left">

              <div class="title-bar" style="float: left;">

                <div class="title" id="title"></div>
                <div class="dj-playing">Affinity FM is playing</div>

                <div class="progress-background">
                  <div id="progress-bar" class="progress-bar"></div>
                </div>

              </div>
              <div class="subscribe" style="float: left;">



                <div class="sub-container">

                    <div class="g-ytsubscribe" data-channel="SAMusicPlaylist" data-layout="full" data-theme="dark" data-count="default"></div> 



                </div>


              </div>

            </div>

            <script src="/socket.io/socket.io.js"></script>

            <script src="https://apis.google.com/js/platform.js"></script>

            <script>
              (function() {
                var getNode = function(s) {
                  return document.querySelector(s);
                },

                    // Get required nodes
                    status = getNode('.chat-status span'),
                    messages = getNode('.chat-messages'), 
                    textarea = getNode('.chat textarea'),
                    chatName = getNode('.chat-name'),

                    statusDefault = status.textContent,    

                    setStatus = function(s){
                      status.textContent = s;

                      if(s !== statusDefault){
                        var delay = setTimeout(function(){
                          setStatus(statusDefault);
                          clearInterval(delay);
                        }, 3000);
                      }
                    };

                //try connection
                try{
                  var socket = io.connect();
                } catch(e){
                  //Set status to warn user
                }

                if(socket !== undefined){

                  //Listen for output
                  socket.on('output', function(data){
                    if(data.length){
                      //Loop through results
                      for(var x = 0; x < data.length; x = x + 1){
                        var message = document.createElement('div');
                        message.setAttribute('class', 'chat-message');
                        message.textContent = ': ' + data[x].message;
                        var name=document.createElement('span');
                        name.setAttribute('class', 'userName');
                        name.textContent = data[x].name;

                        message.insertBefore(name, message.firstChild);

                        //Append
                        messages.appendChild(message);
                        messages.insertBefore(message, messages.firstChild);
                      }
                    }
                  });

                  //Listen for a status
                  socket.on('status', function(data){
                    setStatus((typeof data === 'object') ? data.message : data);

                    if(data.clear === true){
                      textarea.value = '';
                    }
                  });

                  //Listen for keydown
                  textarea.addEventListener('keydown', function(event){
                    var self = this,
                        name = chatName.value;

                    if(event.which === 13 && event.shiftKey === false){
                      socket.emit('input', {
                        name: name,
                        message: self.value
                      });
                    }
                  });
                }

              })();
            </script>
            <script>
              var time_total;
              var timeout_setter;
              var player;
              var tag = document.createElement("script");//This code loads the IFrame Player API code asynchronously

              tag.src = "https://www.youtube.com/iframe_api";
              var firstScriptTag = document.getElementsByTagName("script")[0];
              firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

              //This function creates an <iframe> (and YouTube player) OR uses the iframe if it exists at the "player" element after the API code downloads
              function onYouTubeIframeAPIReady()
              {
                player = new YT.Player("player",
                                       {
                  height: "853",
                  width: "480",
                  /* videoId: "GGmxVDXM5X2UxaP9PvWQ4Z171DXyGcq", */
                  playerVars: {
                    listType:'playlist',
                    list: 'PL_GGmxVDXM5X2UxaP9PvWQ4Z171DXyGcq',
                    controls: '0',
                    html5: '1',
                    cc_load_policy: '0',
                    disablekb: '1',
                    iv_load_policy: '3',
                    modestbranding: '1',
                    showinfo: '0',
                    rel: '0',


                  },
                  events:
                  {
                    "onReady": onPlayerReady,
                    "onStateChange": onPlayerStateChange
                  }

                });
              }


            var num = (1 + Math.floor(Math.random() * 10));


              //The API will call this function when the video player is ready
              function onPlayerReady(event)
              {
                event.target.playVideo();
                time_total  = convert_to_mins_and_secs(player.getDuration(), 1);
                loopy();


                player.addEventListener('onStateChange', 'onPlayerStateChange');


                player.setShuffle( {
                'shufflePlaylist': 1
                } );    
              }

              function loopy()
              {
                var current_time = convert_to_mins_and_secs(player.getCurrentTime(), 0);
                document.getElementById("progress-bar").style.width = (player.getCurrentTime()/player.getDuration())*100+"%";
                console.log( current_time + " / " + time_total);
                timeout_setter = setTimeout(loopy, 300);
              }

              function convert_to_mins_and_secs(seconds, minus1)
              {
                var mins    = (seconds>=60) ?Math.round(seconds/60):0;
                var secs    = (seconds%60!=0) ?Math.round(seconds%60):0;
                var secs    = (minus1==true) ?(secs-1):secs; //Youtube always displays 1 sec less than its duration time!!! Then we have to set minus1 flag to true for converting player.getDuration()
                var time    = mins + ":" + ((secs<10)?"0"+secs:secs);
                return time;
              }

              // 5. The API calls this function when the player's state changes
              function onPlayerStateChange(event)
              {
                if (event.data == YT.PlayerState.ENDED)
                {
                  console.log("END!");
                  clearTimeout(timeout_setter);
                  document.getElementById("progress-bar").style.cssText = "transition: none;";


                }
                else if (event.data == YT.PlayerState.PLAYING)
                {
                  console.log("PLAYING");
                  loopy();
                  document.getElementById("progress-bar").style.cssText = "transition: all 300ms linear 0s;";
                  console.log(player.getPlayerState());
                  if (player.getPlayerState() == 1) {
                  document.getElementById( "title" ).innerText = player.getVideoData().title;
                    }
                }
                else if (event.data == YT.PlayerState.PAUSED)
                {
                    event.target.playVideo();
                    console.log("PLAUSED");
                }
                else
                {
                  console.log(event.data);
                }
              }
            </script>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
           <!-- <script>
                function make_request()
                {
                    var response        = "";
                    var response1       = "thumbnail";
                    var api_key         = "AIzaSyApWxw8xp1qw09ByArSLD0XABQrE40cKEw";
                    var play_list_id    = "PL_GGmxVDXM5X2UxaP9PvWQ4Z171DXyGcq";
                    var url             = "https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=" + play_list_id + "&key=" + api_key;

                    $.ajax
                    ({
                        url: url,
                        dataType: "json",
                        type: "get",
                        async: false,
                        success: function(data)
                        {
                            response = JSON.stringify(data);
                            response1 = data;
                        }
                    });
                    alert(response1.items[0].snippet.thumbnails.default.url);
                    console.log(response1.items[0].snippet.thumbnails.medium.url);
                    console.log(response);
                }

                function init()
                {
                    gapi.client.setApiKey("AIzaSyApWxw8xp1qw09ByArSLD0XABQrE40cKEw");
                    gapi.client.load('youtube', 'v3').then(make_request);
                }
              </script>
              <script src="https://apis.google.com/js/client.js?onload=init"></script> -->
                </div>
          </body>

       </html>

的package.json:

{
  "name": "live-chat",
  "version": "1.0.0",
  "engines":{
    "node": "4.4.5"
},
  "description": "a live chat for Affinity LIVE",
  "main": "server.js",
  "dependencies": {
    "mongodb": "^2.1.18",
    "socket.io": "^1.4.6"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [
    "live",
    "chat"
  ],
  "author": "Jordan Lewallen",
  "license": "ISC"
}

server.js:

var mongo = require('mongoDB').MongoClient,
    client = require('socket.io').listen(8080).sockets;

mongo.connect('mongodb://jlewallen18:MYPASSWORD@ds021434.mlab.com:21434/heroku_ccsbtmfd', function(err, db) {
    if(err) throw err;

    client.on('connection', function(socket){

        var col = db.collection('messages'),
            sendStatus = function(s){
                socket.emit('status', s);   
            };

        //Emit all messages
        col.find().limit(100).sort({_id: 1}).toArray(function(err, res) {
            if(err) throw err;
            socket.emit('output', res);
        });

        //wait for input
        socket.on('input', function(data){
            var name = data.name,
                message = data.message,
                whitespacePattern = /^\s*$/;

            if(whitespacePattern.test(name) || whitespacePattern.test(message)){
                sendStatus('Name and Message is required.');
            } else {
                col.insert({name: name, message: message}, function(){

                    //Emit latest message to ALL clients
                    client.emit('output', [data]);

                  sendStatus({
                      message: "Message sent",
                      clear: true
                  });

                });   
            }

        });

    });

});

Heroku Logs:

2016-06-22T16:06:39.346543+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2016-06-22T16:06:39.363723+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2016-06-22T16:06:39.346801+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2016-06-22T16:06:39.347011+00:00 app[web.1]: npm ERR! 
2016-06-22T16:06:40.531545+00:00 heroku[web.1]: State changed from starting to crashed
2016-06-22T16:26:55.852418+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=young-wave-94499.herokuapp.com request_id=441c04e9-801f-4e57-90c7-1de1a632fe8f fwd="23.92.9.183" dyno= connect= service= status=503 bytes=

0 个答案:

没有答案