Socket.IO 广播
Socket.IO 广播
广播意味着向所有已经建立连接的客户端发送消息。广播可以在多个级别进行。我们可以将消息发送给所有连接的客户端,发送给特定名称空间或房间的客户端。后两章将会岁名称空间和房间展开讨论。
要向所有客户端广播事件,我们可以使用io.sockets.emit方法。请注意,这将向所有已连接的客户端(可能触发此事件的socket)发出事件。在此示例中,我们将向所有用户广播已连接的客户端的数量。更新您的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>
如果你开启了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('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'); });
客户端也要处理此事件:
<!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>
现在,新建立的客户端收到一个欢迎消息,其他的客户端将获得当前客户端的连接数。