Socket.IO - 廣播

Created: November-04, 2018

廣播意味著向所有連線的客戶端傳送訊息。廣播可以在多個級別完成。我們可以將訊息傳送到所有連線的客戶端，名稱空間上的客戶端和特定空間中的客戶端。要向所有客戶端廣播事件，我們可以使用 io.sockets.emit 方法。

注意 - 這將向所有連線的客戶端發出事件（事件可能觸發了此事件的 Sockets）。

在此示例中，我們將向所有使用者廣播已連線客戶端的數量。更新 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('index.html');
});

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>

如果你連線四個客戶端，你將獲得以下結果 -

Socket.io 向所有人廣播

這是向每個人傳送一個事件。現在，如果我們想要向每個人傳送一個事件，但是導致它的客戶端（在前面的例子中，它是由連線時的新客戶端引起的），我們可以使用 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('index.html');
});

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>

現在，最新的客戶端收到歡迎訊息，其他客戶端獲取當前連線到伺服器的客戶端數量。