Socket.IO - Manipulação de Eventos

Soquetes funcionam com base em eventos. Existem alguns eventos reservados, que podem ser acessados usando o objeto socket no lado do servidor.

Estes são -

  • Conectar
  • mensagem
  • desconectar
  • Reconectar
  • Ping
  • Participe e
  • Sair

O objeto de soquete do lado do cliente também fornece alguns eventos reservados, que são -

  • Conectar
  • Connect_error
  • Connect_timeout
  • Reconectar, etc

No exemplo Hello World, usamos os eventos de conexão e desconexão para registrar quando um usuário se conectou e saiu. Agora, usaremos o evento message para passar a mensagem do servidor para o cliente. Para fazer isso, modifique a chamada io.on ('conexão', função (soquete)) para incluir o seguinte -

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) {
   console.log('A user connected');

   //Send a message after a timeout of 4seconds
   setTimeout(function() {
      socket.send('Sent a message 4seconds after connection!');
   }, 4000);

   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

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

Isso enviará um evento chamado mensagem (embutida) para o nosso cliente, quatro segundos após a conexão do cliente. A função send no objeto socket associa o evento 'message'.

Agora, precisamos lidar com esse evento no lado do cliente. Portanto, edite sua tag de script index.html para incluir o seguinte código -

<script>
   var socket = io();
   socket.on('message', function(data){document.write(data)});
</script>

Agora estamos lidando com o evento 'message' no cliente. Quando você acessa a página do seu navegador agora, será apresentada a seguinte captura de tela.

Eventos Antes

Após 4 segundos e o servidor envia o evento de mensagem, nosso cliente irá tratá-lo e produzir a seguinte saída -

Eventos Depois

Nota - Enviamos uma sequência de texto aqui; também podemos enviar um objeto em qualquer caso.

A mensagem foi um evento interno fornecido pela API, mas não é muito útil em um aplicativo real, pois precisamos ser capazes de diferenciar os eventos.

Para permitir isso, o Socket.IO fornece a capacidade de criar eventos personalizados . Você pode criar e disparar eventos personalizados usando a função socket.emit .

Por exemplo, o código a seguir emite um evento chamado testerEvent -

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) {
   console.log('A user connected');

   //Send a message when 
   setTimeout(function() {
      //Sending an object when emmiting an event
      socket.emit('testerEvent', { description: 'A custom event named testerEvent!'});
   }, 4000);

   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

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

Para manipular esse evento personalizado no cliente, precisamos de um ouvinte que escute o evento testerEvent. O código a seguir lida com esse evento no cliente -

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

Isso funcionará da mesma maneira que nosso exemplo anterior, com o evento testerEvent nesse caso. Quando você abre o navegador e acessa o localhost: 3000, será recebido com -

Hello world

Após quatro segundos, este evento será acionado e o navegador terá o texto alterado para -

A custom event named testerEvent!

Também podemos emitir eventos do cliente. Para emitir um evento do seu cliente, use a função de emissão no objeto de soquete.

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   
   <script>
      var socket = io();
      socket.emit('clientEvent', 'Sent an event from the client!');
   </script>
   <body>Hello world</body>
</html>

Para manipular esses eventos, use a função on no objeto socket no seu servidor.

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) {
   socket.on('clientEvent', function(data) {
      console.log(data);
   });
});

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

Portanto, agora, se formos para localhost: 3000, será disparado um evento personalizado chamado clientEvent . Este evento será tratado no servidor registrando -

Sent an event from the client!