2016-03-24 7 views
1

サーバーのデータをjavascriptクライアントに送信し、html(jade)で出力しようとしています。Node.jsサーバーデータをJavascriptクライアントに送信する方法は?

問題
1.マイJsのクライアント& HTML変数(公開鍵、名前、アーティスト、写真、idが)( "試す" または "キャッチ" 条件文の意味上の
2.明確ではない "未定義" です多分これが影響しているもの)

私の研究
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Basic Ajax send/receive with node.js

私のサーバーコード、Javscriptクライアント、またはJadeに問題はありますか?

のNode.jsサーバー

app.get('/user/:id', function (req, res) { 
    if (!req.user) 
    res.send(err); 
    if(req.user) { 
    try { 
     var id = req.params.id; 
     var dbUser = req.user; 

     res.send({ 
     'publicKey': dbUser.publicKey, 
     'name': dbUser.name, 
     'artist': dbUser.artist, 
     'picture': dbUser.picture, 
     'id': dbUser.id 
     }); 

    } catch (e) { 
     res.send({'status': 404}); 
    } 
    } else { 
    res.send({'status': 403}); 
    } 

}); 

のJSクライアント

var keysCache = {}; 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', '/user/' + message.userid, true); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4) { 
     var res = JSON.parse(xhr.responseText); 

     keysCache[message.userid] = { 
     'publicKey': res.publicKey, 
     'name': res.name, 
     'artist': res.artist, 
     'picture': res.picture, 
     'id': res.id 
     } 
     console.log(res.name); 
     displayOutput(message); 
    } 
    }; 
    xhr.send(null); 

ジェイド

#chat 
    (...) 
    script. 
    window.user = {id:"#{user.id}", name: "#{user.artist}", picture: "#{user.picture}", gtoken: "#{user.gtoken}", eccKey: "#{user.eccKey}"}; 
    script(src='/javascripts/client.js') 
+0

*マイJsのクライアント&HTMLは "未定義" である* - これは何を意味するのでしょうか? HTML文書のURLをアドレスバーに入力すると、ブラウザがビューポートに 'undefined'という単語をレンダリングするだけですか? – Quentin

+0

* "try"や "catch"の条件が何を意味するのかわかりません* - JavaScriptの基本部分です。 [それらを読んでみてください](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try..catch)? – Quentin

+0

@Quentin私の質問を更新し、Jsリソースに感謝します。 –

答えて

0

私が見ていたかのように表示されますすべての間違った場所で愛のために差し出します。私はそれが問題だとは思わなかったので私はここにこのコードを書いていませんでしたが、私のサーバからすべての機能をログに記録した後、私は間違っていることに気付きました。これは部品コード全体であり、最初の部分はエラーが発生した場所です。

Answer/Simpleレッスン: JSONデータが正しく呼び出されませんでした。 JSONデータのネストを常にダブルチェックしてください。

function displayOutput(message) { 
    if(!message) return; 
    if(typeof(message.text) === 'undefined') return; 

var html = ''; 

if ('userid' in message && message.userid in keysCache) { 

    var signature = message.signature; 

    delete message.signature; 

    var result = ecc.verify(keysCache[message.userid].publicKey, signature, JSON.stringify(message)); 

    if(result) { 
    html = '<p><img src="'+ keysCache[message.userid].picture +'" class="avatar"><strong>' + keysCache[message.userid].artist + '</strong><br><span>' + message.text + '</span></p>'; 
    } else { 
    html = '<p><img src="images/troll.png" class="avatar"><strong></strong><br><em>A troll tried to spoof '+ keysCache[message.userid].artist +' (but failed).</em></p>'; 
    } 

    output.innerHTML = html + output.innerHTML; 

} else { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', '/user/' + message.userid, true); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4) { 
     var res = JSON.parse(xhr.responseText); 

     keysCache[message.userid] = { 
     'publicKey': res.publicKey, 
     'name': res.name, 
     'artist': res.artist, 
     'picture': res.picture, 
     'id': res.id 
     } 
     console.log(name); 
     displayOutput(message); 
    } 
    }; 
    xhr.send(null); 
} 

}

関連する問題