2016-06-22 4 views
0

В настоящее время, пытаясь реализовать функцию чата на моем сайте с использованием Node.js и Heroku, я приложил все усилия, чтобы выполнить эти шаги, чтобы развернуть безрезультатно: http://tutorialzine.com/2014/03/nodejs-private-webchat/Развертывание приложения Live Chat на проблемах Heroku (Node.js)

Я создал первоначальный чат-сервер, наблюдая эти видеоуроки: https://www.youtube.com/playlist?list=PLfdtiltiRHWHZh8C2G0xNRbcf0uyYzzK_

Единственное, что озадачивает меня в том, что у меня нет app.js файл, который описан в руководстве по первой ссылке, которую я разместил , Это похоже на мой server.js?

Вот мой код:

HTML (ОБНОВЛЕНО): (У меня есть сценарий пару строк вниз кода SRC = "http://127.0.0.1:8080/socket.io/socket.io. ? JS»мне нужно удалять/редактировать это я уже удалил Localhost из вар сокета = io.connect();)

<!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> 

    <!--do i need to get rid of this script? --> <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(); <!--removed localhost --> 
        } 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> 

Server.js: (я использовал Монго для локального хостинга, я необходимо удалить некоторые файлы из локального хоста здесь?)

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

mongo.connect('mongodb://127.0.0.1/chat', 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 
        }); 

       }); 
      } 

     }); 

    }); 

}); 

packa ge.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" 
} 

Heroku Log (ОБНОВЛЕНО):

2016-06-22T05:42:21.990238+00:00 app[web.1]: npm ERR!  npm owner ls live-chat 
2016-06-22T05:42:21.998667+00:00 app[web.1]: npm ERR!  /app/npm-debug.log 
2016-06-22T05:42:23.128513+00:00 heroku[web.1]: Process exited with status 1 
2016-06-22T05:42:23.147472+00:00 heroku[web.1]: State changed from starting to crashed 
2016-06-22T05:42:24.269961+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=young-wave-94499.herokuapp.com request_id=0a4b2290-a946-49a5-9f67-e216aa71e33e fwd="23.92.9.183" dyno= connect= service= status=503 bytes= 

Это ошибка, я получаю, когда я типа 'Heroku открытым' в CMD строке:

enter image description here

+0

Можете ли вы показать мне журналы героику? и, пожалуйста, добавьте ключ «start» в файл package.json – uzaif

+0

, и вы забыли определить свою зависимость в пакете. json – uzaif

+1

Привет, @uzaif. Я обновил сообщение с помощью журнала и добавил ключ запуска в файл package.json, я думаю. Не могли бы вы объяснить, что мне нужно сделать для зависимости? Спасибо за помощь! –

ответ

0

В вашем файле package.json вам необходимо указать:

  1. любые зависимости у вас есть

  2. раздел под названием «двигатели», в котором вы указываете версию узла, который используете.

Будьте уверены, чтобы проверить эту ссылку из Heroku: https://devcenter.heroku.com/articles/deploying-nodejs

+0

спасибо за информацию, я просмотрел и обновил зависимости и движки в package.json. Я обновил код для этого и новый журнал ошибок в моем исходном сообщении –

+0

@ Jordan-Lewallen heroku устанавливает свой собственный порт. попробуйте, если socket.io прослушать: (process.env.PORT || 8080) –

+0

Я изменил строку index.html на var socket = io.connect ('process.env.PORT || 8080'); с ошибкой приложения. Что я могу отправить, это облегчит вам отладку? –

0

Вам нужно будет настроить URL для MongoDB к чему-то Heroku может достичь. Можно установить, что с сервисом как mLab

mongo.connect('mongodb://mongodb.example.com/database', function(err, db) { ... }); 

Прямо сейчас это просто указывает на локальную машину.

Для вашего html вам также нужно будет изменить URL-адреса. Возможно, что-то вроде этого будет работать:

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

Я увидел еще пару вещей, указывающих на вашу локальную машину.

+0

Привет @Sebastian, я пытаюсь создать базу данных mLab. Один из первых шагов состоит в том, что мне нужно подключиться с помощью оболочки mongo: mongo ds021434.mlab.com:21434/heroku_ccsbtmfd -u -p , когда я набираю своего пользователя и передаю, я получаю аутентификацию. Я также старался использовать имя пользователя и пароль для своего имени (они сказали, что это обычная проблема) –