2017-03-06 16 views
0

server.jssocket.ioデータ

var express = require('express'); 
var app = express(); 
var server = require('http').createServer(app); 
var io = require('socket.io')(server); 

app.use(express.static(__dirname + '/public')); 

io.on('connection', function(client) { 
    console.log('Client connected...'); 

client.on('join', function(data) { 
    console.log(data); 
    io.emit('messages', 'Hello'); 

}); 

}); 

index.htmlを

<script> 
    var socket = io.connect('http://localhost:7777'); 
    socket.on('connect', function(data) { 
     socket.emit('join', 'Hello World from client'); 

    }); 
    socket.on('messages', function(data) { 
     alert(data); 
    }); 
</script> 

私はSocket.ioの非常に基本的な実装しようとしました。

ただし、クライアントからサーバーに送信するデータは使用できますが、サーバーからクライアントに送信されるデータは機能しません。

server.jsを実行しているコマンドで、「Hello World from client」が表示されます。しかし、アラートウィンドウはWebブラウザでは機能しません(console.logも試しました)。

これを解決するにはどうすればよいですか?

Edittedは

私はapp.getにserver.jsコードを入れてきました( '/'、機能(REQ、RES)){...} はその後、それは動作しません。なぜそれがapp.getで動作しないのですか?

+0

socket.ioコードは特定のルートに属していません。あなたの質問の 'app.get()'で何をしようとしているのかを説明でき、 'app.get()'の中にどのコードを置くかを示すことができれば、おそらく提案を提供することができます。しかし、今、あなたの質問の一部は、実際にはあいまいで不明です。 – jfriend00

+0

ありがとうございます。私は、node.jsを使用してelasticsearchからデータを取得し、前面に送信しようとしています。私はそれに対処するいくつかのソリューションがejsまたはpugを使用していることを発見しました。私はpugとvue.jsでテンプレートを使用しようとしましたが、私がしたいこと(Googleマップapiと組み合わせる)はうまくいきません。だから私はsocket.ioを選んだのです。また、app.get( '/ test'、...)のような特定のURLを入力すると、サーバーからデータを送信するほうが良いと考えました。 – coffeedjason

答えて

0

これを試してみてください、私はそれが動作願っています:

io.on('connection', function(client) { 
console.log('Client connected...'); 

client.on('join', function(data) { 
     console.log(data); 
     io.emit('join', data); //this code sending data from server to client 
    }); 
}); 
+0

何が恥です!ありがとう。これらのコードを他のコードと混在させたので、私はそのコードを忘れてしまった。 – coffeedjason

+0

良い仕事の男:) – sidzaky

1

あなただけのAjax呼び出しなど/testでいくつかのデータをフェッチしようとしている場合は、その後、socket.ioを使用する必要はありません。これは単なる古典的な要求/応答です。

app.get('/test', function(req, res) { 
    // collect your data and then send it as a response 
    res.json(data); 
}); 

あなただけの、あなたはあなたの選択(EJS、ハンドルバー、パグなど)のテンプレートエンジンでres.render()を使用することができ、要求されたWebページにデータを取り込むしようとしている場合。これは通常、次のようになります:

app.get('/test', function(req, res) { 
    // collect your data and then pass it to res.render() to render your 
    // your template using that data 
    res.render('someTemplateName', data); 
}); 

socket.ioが有用な主なものは、クライアントからの要求なしにサーバーからクライアントにデータを「プッシュ」することです。したがって、クライアントが認識していないサーバー上で何かが起きた場合、サーバーがクライアントにそのことを伝えたい場合は、socket.ioを使用します。古典的な例はチャットアプリです。 Person Aは、Person B宛てのサーバにチャットメッセージを送信します。サーバはそのメッセージを受信し、それをPerson Bに「プッシュ」する必要があります。これは、すでに接続されているsocket.io接続には最適です。データを直接Person Bクライアントにプッシュします。これは、サーバーが要求/応答で行うことができないものです(人物Bからの要求がないため)。


あなたはまだあなたがsocket.ioが必要だと思う場合は、あなたがそれ(あなたがクライアントに送信しようとしているものをステップバイステップ)でやろうとしている正確に何を説明してください。

+0

あなたの答えをありがとう。あなたのようなテンプレートエンジンを使用してソリューションを見つけました。しかし、私がsocket.ioを使用する理由は、テンプレートエンジンとGoogleマップAPIをマージする方法が混乱していることです。例えば、 'res.render( 'someTemplateName、data);'のデータが一群の座標である場合、これらの座標を使ってヒートマップを作りたいと思います。この場合、テンプレートエンジンとGoogleマップAPIをマージすることは可能ですか? – coffeedjason

+0

@coffeedjason - GoogleマップAPIからデータを収集し、それをあなたのテンプレート用の希望のフォーマットにして、それを 'res.render()'に渡します。クライアントリクエストが進行中でなければ、サーバーからクライアントへのライブプッシュが必要な場合を除いて、socket.ioの解決方法はまだわかりません。 – jfriend00

+0

ありがとうございますjfriend00。私の説明は良くないと思います。私がしたいのは、データベースからデータ(座標)を取得し、これらの座標をGoogle map apiで前面に表示することです。そのために、json(座標)の配列を前面に渡し、この配列を前面に展開して各座標を表す必要があります。このため、 'res.render()'を使用する場合、私は理解のために、サーバ側のテンプレートエンジンでhtmlファイルをレンダリングする必要があります。この段階では、このようなAPIを使ってhtmlファイルをレンダリングすることは可能ですか? – coffeedjason

関連する問題