Socket.io-broadcasting

提供:Dev Guides
移動先:案内検索

Socket.IO-ブロードキャスト

ブロードキャストとは、接続されているすべてのクライアントにメッセージを送信することです。 ブロードキャストは複数のレベルで実行できます。 接続されているすべてのクライアント、名前空間のクライアント、特定の部屋のクライアントにメッセージを送信できます。 すべてのクライアントにイベントをブロードキャストするには、 io.sockets.emit メソッドを使用できます。

-これは、接続されたクライアントに ALL イベントを発行します(このイベントを発生させた可能性のあるソケット)。

この例では、接続されているクライアントの数をすべてのユーザーにブロードキャストします。 app.js ファイルを更新して、以下を組み込みます。

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

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

var clients = 0;
io.on('connection', function(socket) {
   clients++;
   io.sockets.emit('broadcast',{ description: clients + ' clients connected!'});
   socket.on('disconnect', function () {
      clients--;
      io.sockets.emit('broadcast',{ description: clients + ' clients connected!'});
   });
});

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

クライアント側では、ブロードキャストイベントを処理するだけです-

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      socket.on('broadcast',function(data) {
         document.body.innerHTML = '';
         document.write(data.description);
      });
   </script>
   <body>Hello world</body>
</html>

4つのクライアントを接続すると、次の結果が得られます-

すべてにブロードキャスト

これは、イベントを全員に送信することでした。 さて、イベントを全員に送信したいが、それを引き起こしたクライアント(前の例では、接続時の新しいクライアントが原因でした)に、 socket.broadcast.emit を使用できます。

新しいユーザーにウェルカムメッセージを送信し、他のクライアントの参加について更新します。 したがって、app.jsファイルで、クライアントの接続時にウェルカムメッセージを送信し、接続されているクライアント番号を他のすべてのユーザーにブロードキャストします。

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

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

var clients = 0;
io.on('connection', function(socket) {
   clients++;
   socket.emit('newclientconnect',{ description: 'Hey, welcome!'});
   socket.broadcast.emit('newclientconnect',{ description: clients + ' clients connected!'})
   socket.on('disconnect', function () {
      clients--;
      socket.broadcast.emit('newclientconnect',{ description: clients + ' clients connected!'})
   });
});

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

そして、このイベントを処理するためのHTML-

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      socket.on('newclientconnect',function(data) {
         document.body.innerHTML = '';
         document.write(data.description);
      });
   </script>
   <body>Hello world</body>
</html>

現在、最新のクライアントはウェルカムメッセージを受け取り、他のクライアントは現在サーバーに接続されているクライアントの数を受け取ります。