2016-04-11 15 views
0

groupNameという属性を持つ複数のボタンがあります。彼らは次のようになります:socket.io:クリック時にボタンの属性値を出力しますか?

<a href="#" class="fireGroup btn btn-info btn-lg" groupName="SCENE_I">SCENE I</a> 
<a href="#" class="fireGroup btn btn-info btn-lg" groupName="SCENE_II">SCENE II</a> 
<a href="#" class="fireGroup btn btn-info btn-lg" groupName="SCENE_III">SCENE III</a> 

クリックしたときにリンクのgroupName値を送出する方法を理解しようとしています。したがって、最初のリンクをクリックすると、socket.ioは "groupName - SCENE_I"を出力します

これはどのように達成できますか?

答えて

1

あなたはチャットに似たものが必要だと思う - リンクのクリックがサーバーにメッセージを送信するユーザーとして動作し、サーバーがそれを部屋に送信する(他のユーザーにはそうだろうか?)

そのような場合は、この例を見てみなければならない:http://socket.io/get-started/chat/

あなたは、クライアント側でこのようなものだろう。まだチャットを取って、サーバー側では

<html> 
<head> 
</head> 
<body> 
<a href="#" class="fireGroup btn btn-info btn-lg" groupName="SCENE_I">SCENE I</a> 
<a href="#" class="fireGroup btn btn-info btn-lg" groupName="SCENE_II">SCENE II</a> 
<a href="#" class="fireGroup btn btn-info btn-lg" groupName="SCENE_III">SCENE III</a> 
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> 
<script> 
$(document).ready(function(){ 
    var socket = io(); 
    // listen to server events related to messages coming from other users. Call this event "newClick" 
    socket.on('newClick', function(msg){ 
    console.log("got new click: " + msg); 
    }); 

    // when clicked, do some action 
    $('.fireGroup').on('click', function(){ 
    var linkClicked = 'groupName - ' + $(this).attr('groupName'); 
    console.log(linkClicked); 
    // emit from client to server 
    socket.emit('linkClicked', linkClicked); 
    return false; 
    }); 

}); 
</script> 
</body> 
</html> 

を考え方:

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



app.get('/', function(req, res){ 
    res.sendfile('./index.html'); 
}); 

io.on('connection', function(socket){ 
    // when linkClicked received from client... 
    socket.on('linkClicked', function(msg){ 
    console.log("msg: " + msg); 
    // broadcast to all other users -- originating client does not receive this message. 
    // to see it, open another browser window 
    socket.broadcast.emit('newClick', 'Someone clicked ' + msg) // attention: this is a general broadcas -- check how to emit to a room 
    }); 
}); 

http.listen(3000, function(){ 
    console.log('listening on *:3000'); 
}); 
+0

はこの試しを与え、それがエラーを投げています: 'this.attrはfunction' – eclipsis

+0

ではありません、私は' $(この).ATTR(「グループ名」)にそれを変更し 'と、それはエラーが去っていきましたそれだけで何も出ていません。 – eclipsis

+0

私はより多くのコードで答えを更新しました。また、元の 'socket.broadcast.emit( 'Someone clicked' + msg)'にはイベント名がありませんでした( '' newClick''が追加されました)。ブロードキャストされたメッセージを受信するクライアント側のリスナーも追加されました。 – noderman

関連する問題