Учебники

Socket.IO — обработка событий

Декабрь 30, 2018

Сокеты работают на основе событий. Существуют некоторые зарезервированные события, доступ к которым можно получить с помощью объекта сокета на стороне сервера.

Это —

  • соединять
  • Сообщение
  • Отключить
  • Заново
  • пинг
  • Присоединяйтесь и
  • Покидать

Объект сокета на стороне клиента также предоставляет нам некоторые зарезервированные события, которые:

  • соединять
  • Connect_error
  • connect_timeout
  • Переподключение и т. Д.

В примере Hello World мы использовали события подключения и отключения для регистрации, когда пользователь подключился и ушел. Теперь мы будем использовать событие message для передачи сообщения с сервера клиенту. Для этого измените вызов io.on («соединение», функция (сокет)), включив в него следующее: 

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');
});

Это отправит событие под названием сообщение (встроенное) нашему клиенту через четыре секунды после подключения клиента. Функция send объекта сокета связывает событие message.

Теперь нам нужно обработать это событие на нашей стороне клиента. Таким образом, отредактируйте тег сценария index.html, включив в него следующий код: 

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

Сейчас мы обрабатываем событие «message» на клиенте. Когда вы перейдете на страницу в вашем браузере сейчас, вам будет представлен следующий скриншот.

События до

Через 4 секунды сервер отправляет событие сообщения, наш клиент обработает его и выдаст следующий вывод:

События после

Примечание. Мы отправили здесь текстовую строку; мы также можем отправить объект в любом случае.

Сообщение было встроенным событием, предоставляемым API, но оно мало используется в реальном приложении, так как мы должны иметь возможность различать события.

Для этого Socket.IO предоставляет нам возможность создавать собственные события . Вы можете создавать и запускать пользовательские события, используя функцию socket.emit .

Например, следующий код генерирует событие с именем 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');
});

Чтобы обработать это пользовательское событие на клиенте, нам нужен слушатель, который прослушивает событие testerEvent. Следующий код обрабатывает это событие на клиенте — 

<!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>

Это будет работать так же, как и в нашем предыдущем примере, с событием, являющимся в этом случае testerEvent. Когда вы откроете браузер и перейдете на localhost: 3000, вы увидите: 

Hello world

Через четыре секунды это событие будет запущено, и в браузере будет изменен текст на — 

A custom event named testerEvent!

Мы также можем отправлять события от клиента. Чтобы отправить событие от вашего клиента, используйте функцию emit объекта сокета. 

<!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>

Чтобы обработать эти события, используйте функцию on объекта сокета на вашем сервере. 

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');
});

Итак, теперь, если мы перейдем к localhost: 3000, мы получим пользовательское событие с именем clientEvent . Это событие будет обработано на сервере путем регистрации —

55
Share: