2017-10-18 15 views
1

Node、Express(^ 4.15.3)、socket.io(^ 2.0.3)を使って簡単なアプリケーションを構築しようとしています。私は単純なチャットアプリを構築していますが、新しいメッセージを追加するたびに毎回追加の応答があります。最初のメッセージであった場合Node.js socket.ioが単一のイベントの複数の値を返す

は、例えば、「こんにちは」、私が返されます:

  1. こんにちは

の私は、その後のメッセージを追加した場合、私は「誰がいますか?」戻ってくる:

  1. 誰かありますか?
  2. 誰かありますか?

など...追加応答が返ってくるたびに...

ここに私のコードです - 私はこの問題を考える...それは本当に明らかに何かのようにそれは感じていると私はそれを凝視されている可能性が長すぎる

//app.js 

var express   = require("express"); 
var bodyParser  = require("body-parser"); 
var expressValidator = require('express-validator'); 
var session   = require('express-session'); 
var passport   = require("passport"); 
var app    = express(); 
var http    = require('http'); 
var server   = http.createServer(app); 
var io    = require('socket.io').listen(server); 

app.use(express.static("public")); 
app.set("view engine", "ejs"); 

server.listen(process.env.PORT || 3000, process.env.IP, function(){ 
    console.log("Server starting..."); 
}); 

app.get('/testsocket', function(req, res){ 
    res.render('sockets/test'); 
}); 

io.sockets.on('connection', function(socket){ 
    console.log('Connected') 
    socket.on('send message', function(data){ 
     console.log('Got the message...'); 
     io.sockets.emit('new message', data) 
    }); 
}); 

し、クライアント側

//client side 
$(function() { 
    var socket = io.connect(); 
    var $messageForm = $('#send-message'); 
    var $messageBox = $('#message'); 
    var $chat = $('#chat'); 

    $messageForm.submit(function(e){ 
    e.preventDefault(); 

    socket.emit('send message', $messageBox.val()); 
    $messageBox.val(''); 

    socket.on('new message', function(data){ 
     $chat.append(data + "<br>"); 
    }); 
    }); 
}); 

答えて

1

サブミット機能の内部にnew messageのリスナーを登録していることです。したがって、フォームを送信するたびに、以前のリスナーに加えて新しいリスナーが登録されます。 socket.on('new message', ...セクションをsubmitハンドラの外側に配置してください。

+0

もちろん...ありがとうございます! *やや恥ずかしい* –

関連する問題