2017-07-27 109 views
0

我一直在嘗試熟悉socket.io,因此在實時應用程序中使用它。我經歷了一個基本的例子,一個聊天室,然後我用ngrok與不止一個客戶端進行測試,這很好。現在我正在尋找使用TAFFY來保存會話日誌,將其部署到連接到它的新用戶,所以我添加了另一個emmit來發送該日誌,而且這個特殊的emmit似乎從未觸發過句子在客戶端。Socket.io一些emmits不會觸發,而其他人不會觸發

這些服務器的說明

io.on('connection', function(socket){ 
    console.log("someone connected"); 

     var chatLog={log:[]}; 
    log().each(function (iter){ //this is the taffy var 
     chatLog.log.push({"usr":iter.usr,"msg":iter.msg}); 
    }); 
    var stringLog=JSON.stringify(chatLog); 
    console.log(stringLog); 
    socket.emit('cargaLog', stringLog);// THIS is the naughty emmit 

    socket.on('chat message', function(msg){ 
    var mensaje=JSON.parse(msg); 
    log.insert({"usr":mensaje.usr, 
        "msg":mensaje.msg 
       }); 
    io.emit('chat message', mensaje.usr.toUpperCase()+" dice: "+mensaje.msg); 
    }); 
}); 

客戶的側

$(function() { 
     var socket = io(); 


     socket.on('cargaLog', function(log){ 
     alert(log); //this never happens 
     console.log(log); 
     }); 


     $('form').submit(function(){ 
     var mensaje=$('#m').val(); 
     var json='{"usr":"'+person+'","msg":"'+mensaje+'"}'; 
     socket.emit('chat message', json); 
     $('#m').val(''); 
     return false; 
     }); 


     socket.on('chat message', function(msg){ 

     var html='<li><img src="defaultUsrImg.png" alt="Usr_img" heigth="40" width="40">'+(msg)+'</li>'; 
     $('#messages').append(html); 
     window.scrollTo(0, document.body.scrollHeight); 
     }); 


     }); 

我在這段代碼有一陣子一直盯着,並沒有與其他人的工作,我工作的解決方案(即在客戶端使用io.connect()或io.connect('http://0.0.0.0:8080'),或者使用客戶端的emmit來請求服務器emmit被觸發)。

任何人有任何想法,爲什麼會發生這種情況? 可選地,任何人有任何想法可以幫助我更好地排除故障?

其他細節: 運行Windows 10 節點版本8.2.1 socket.io版本2.0.3

這我如何使用節點要求:

var TAFFY = require('taffy'); 
var express=require('express'); 
var app = express(); 
var http = require('http'); 
var path=require('path'); 
var port = process.env.PORT || 3000; 
var server= http.createServer(app).listen(port); 

var io = require('socket.io').listen(server); 

var log=TAFFY({"usr":"SERVER", 
        "msg":"WELCOME" 
       }); 

app.use(express.static(__dirname + '/public')); 
app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 

}); 

客戶端HTML代碼(僅因爲mt html包含了boddy而且它會長得太長

<body> 
    <ul id="messages"></ul> 
    <form action=""> 
     <input id="m" autocomplete="off" /><button>Send</button> 
    </form> 
    <script type="text/javascript" src="./socket.io/socket.io.js"></script> 
    <script src="jquery-3.2.1.min.js"></script> 
    <!-- <script src="/mensajes.js"></script> THIS IS THE OLD CODE--> 
    <script > 
     var person = prompt("Introduce tu nombre o seudonimo", "anon"); //THIS IS THE WORKING CODE 

     if(person === null || person===""){ 
     alert("Necesitas un nombre para participar"); 
     } 
     else{ 
     $(function() { 
      var socket = io(); 
      socket.emit('ia iege',person); 
      socket.on('usrConectado',function(usr){ 
      var html='<li><h6>'+(usr)+' se ha conectado</h6></li>'; 
      $('#messages').append(html); 
      window.scrollTo(0, document.body.scrollHeight); 
      }); 
      $('form').submit(function(){ 
      var mensaje=$('#m').val(); 
      var json='{"usr":"'+person+'","msg":"'+mensaje+'"}'; 
      socket.emit('chat message', json); 
      $('#m').val(''); 
      return false; 
      }); 
      socket.on('chat message', function(msg){ 

      var html='<li><img src="https://dujrsrsgsd3nh.cloudfront.net/img/emoticons/419693/pedreiro-1500067445.PNG" alt="Usr_img" heigth="40" width="40">'+(msg)+'</li>'; 
      $('#messages').append(html); 
      window.scrollTo(0, document.body.scrollHeight); 
      }); 
      socket.on('cargaLog', function(log){ 
      console.log(log); 
      var oldLog=JSON.parse(log); 
      cargaLog(oldLog); 
      }); 
      }); 
     function cargaLog(newLog){ 
      //newLog is an object 
      newLog.log.forEach(function(iter){ 
       var msg=iter.usr.toUpperCase()+' dijo: '+iter.msg; 
       var html='<li><img src="https://dujrsrsgsd3nh.cloudfront.net/img/emoticons/419693/pedreiro-1500067445.PNG" alt="Usr_img" heigth="40" width="40">'+(msg)+'</li>'; 
      $('#messages').append(html); 
      window.scrollTo(0, document.body.scrollHeight); 
      }); 
     } 
     } 
    </script> 
    </body> 
+0

對於您已經完成的故障排除,我們需要一些幫助。你是否從服務器端的控制檯消息:'console.log(「someone connected」);'你是否看到這個日誌消息:'console.log(stringLog);'?他們是你期望他們是什麼?我想知道是否在'socket.emit('cargaLog',stringLog)'之前的東西拋出一個異常,所以它永遠不會到那行代碼。 – jfriend00

+0

你應該問一個實際的問題。 – Difster

+0

是@ jfriend00這些日誌顯示了當某人連接並且TAFFY變量正在保存它所需的內容時它們應該顯示的內容。此外服務器運行得很好,人們仍然可以通過NGROK連接 –

回答

0

我將您的代碼簡化爲基礎知識,我收到的信息很好,您遇到了問題。下面是減少代碼工作得很好:

Server代碼:

var express = require('express'); 
var app = express(); 
var http = require('http'); 
var path = require('path'); 
var port = process.env.PORT || 3000; 
var server= http.createServer(app).listen(port); 

var io = require('socket.io').listen(server); 

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/s1.html'); 

}); 

io.on('connection', function(socket) { 
    console.log("someone connected"); 

    var chatLog = {log: [{usr: "someuser", msg: "somemsg"}]}; 
    var stringLog = JSON.stringify(chatLog); 
    console.log(stringLog); 
    socket.emit('cargaLog', stringLog); // THIS is the naughty emmit 
}); 

客戶端代碼:

<html> 
<head> 
<script src="/socket.io/socket.io.js"></script> 
<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
<script> 
function dbg(x) { 
    let str = x; 
    if (typeof x === "object") { 
     str = JSON.stringify(x); 
    } 
    $("#log").append("<div>" + str + "</div>"); 
} 
$(function() { 
    var socket = io(); 


    socket.on('cargaLog', function(log) { 
     dbg(log); 
    }); 

}); 
</script> 
</head> 
<body> 
Empty Content, waiting for message to arrive. 
<div id="log"></div> 
</body> 
</html> 

當我加載頁面時,瀏覽器將立即顯示,你是具有cargaLog消息麻煩與。我建議你回溯到這種超級簡單的東西,直到你證明它有效,然後一次添加一件東西,直到找到引發問題的東西。如果這段代碼不適合你,那麼你必須在你的環境中搞點東西,我可能會重新安裝各種組件(socket.io,node.js,express等等)。

+0

這有很多幫助,這是客戶方的錯,出於某種原因,我需要在html文件中有正確的腳本,這樣所有的emmits才能正常工作,你知道爲什麼這是jfriend嗎? 謝謝你的全力幫助 –

+0

@LuisL - 如果你向我展示整個客戶端頁面和問題所在,我可能會發現問題所在。我不明白你的描述和你展示的有限代碼。 – jfriend00

+0

我加了代碼段我覺得有關部分。 –

-1

嘗試

socket.emit('chat message' , { usr: person, msg: mensaje}); 
+0

我不認爲這是'.emit()'OP是詢問。我想他們問的是這個:'socket.emit('cargaLog',stringLog);'。 – jfriend00

+0

事實上,基本的聊天工作正常,工作正常,叫做'cargaLog',從不出現 –

-1

我想你可以試着看看這個存儲庫https://github.com/egin10/socket-chat-example/blob/master/app.js爲你的server方。

,你可以嘗試爲您clienthttps://github.com/egin10/socket-chat-example/blob/master/chat.html

注意這一個:只記得大約socket.on(params, callback),它是從emmiter獲取數據,並io.emit(params, obj)server側是emmiting數據。

所以,你必須確保關於什麼是你的emmiting到serverclient,什麼是從serverclient您取(socket.on())必須具有相同的params

而且您必須確定您的物品是var chatLog={log:[]};。如果你想得到log,你必須這樣做chatLog.log

這對我有用。我希望它能幫助你。

+0

是的,因爲這是一個基本的應用程序,我選擇將每個參數作爲字符串傳遞,這就是爲什麼我將chatlog對象和客戶端像其他任何字符串一樣簡單地打印它。如果一切正常,我會簡單解析JSON回到客戶端的一個對象 –

+0

'var json ='{「usr」:''+ person +'「,」msg「:」'+ mensaje +'「}' ;'人'變量在哪裏?你有沒有定義它? – egin10

+0

是的,它是一個變量,通過腳本開始時的提示獲得,這些消息的工作方式應該是這樣的:emmit叫做'cargaLog' –