Краткое руководство по основам Socket.io

Пару месяцев назад я начал изучать Node.js, и одной из первых вещей, с которыми я столкнулся, был Socket.io; это казалось довольно захватывающим фреймворком, но я не мог найти легкое для понимания базовое руководство для начала. Я пишу это руководство, чтобы вам не пришлось мучиться с документацией Socket.io/Node, как это сделал я, так что приступим!

Socket.io - это библиотека JavaScript, которая обеспечивает двустороннюю связь между вашим сервером Node.js и вашим веб-клиентом; это возможно с помощью сокетов, которые представляют собой соединение между 2 компьютерами по сети. Не волнуйтесь, это не так сложно, как кажется, Socket.io абстрагирует все трудности и упрощает для нас!

Привет, событие!

Первое, что нам нужно понять при использовании Socket.io, заключается в том, что он основан на событиях, где:

Наш Сервер отправит событие.
Наш Клиент отреагирует на событие.

Сервер

socket.emit('hello');

Клиент

socket.on('hello', function(){  
   console.log('hello world!');
});

Когда мы генерируем событие 'hello' на сервере, объект сокета на клиенте получит событие и отреагирует на него заданным обратным вызовом, в этом случае наш анонимный обратный вызов зарегистрирует 'hello world!' .

Множественные события и обработчики

Мы можем создать столько событий, сколько захотим, можем поймать их и по-разному реагировать на них.

Сервер

socket.emit('goodbye');

Клиент

socket.on('hello', function(){  
   console.log('hello world!');
});
socket.on('goodbye', function(){  
   console.log('goodbye world!');
});

В этом случае мы генерируем событие «до свидания» на нашем сервере, поэтому клиент поймает это событие и напечатает «прощай, мир!» на нашей консоли.

Отправка объектов в рамках наших событий

Иногда мы не только хотим запустить событие, но также хотим отправить клиенту некоторую информацию. Для этого мы просто добавляем объекты, которые хотим отправить в качестве параметров в emit, и получаем их в нашей функции обратного вызова.

Сервер

var person = {name: 'Rene', age: 26};  
socket.emit('person', person);

Клиент

socket.on('person', function(person){  
   console.log(person.name, 'is', person.age, 'years old.');
});

Двусторонняя связь

Помните, я сказал, что Socket.io допускает двустороннюю связь? Что ж, это означает, что мы можем не только отправлять информацию с Сервера Клиенту, но и наоборот.

Сервер

var person = {name: 'Rene', age: 26};  
socket.emit('person', person);
socket.on('confirmation',function(){  
   console.log('The client received the person');
});

Клиент

socket.on('person', function(person){  
   console.log(person.name, 'is', person.age, 'years old.');
   socket.emit('confirmation');
});

В этом случае, после того, как человек будет принят клиентом, мы отправим событие «подтверждение» внутри обратного вызова, чтобы сервер знал, что клиент получил человека. (Да, мы можем генерировать события внутри обратных вызовов для других событий).

Создание соединения Socket.io

Сторона сервера

Теперь, когда мы понимаем, как генерировать события, отправлять в них данные и реагировать на них, пора создать сокет между клиентом и сервером.

На стороне нашего сервера (Node.js) нам нужно будет установить Socket.io с помощью диспетчера пакетов узлов (NPM). Для этого мы можем просто перейти в каталог проекта и:

npm install socket.io

После того, как мы его установили, мы можем потребовать его в нашем приложении.

Сервер

var app = require('http').createServer(handler)  
var io = require('socket.io')(app);

Как только мы создадим наш объект Socket.io и прикрепим его к нашему http-серверу, нам нужно будет обрабатывать клиентские соединения. При клиентском соединении сервер генерирует событие 'connection', это событие соединения может быть обработано объектом io для создания сокета .

Сервер

var app = require('http').createServer();  
var io = require('socket.io')(app);
app.listen(80);
io.on('connection', function (socket) {
  // (Insert socket code here)
});

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

Сторона клиента

На стороне клиента нам нужно сослаться на файл JavaScript клиента Socket.io.

<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>

Как только мы это сделаем, мы можем просто создать новый сокет, подключившись к нашему собственному http-серверу, используя объект io (клиент).

<script>
  var socket = io('http://localhost');
  // (Insert socket code here)
</script>

Соединение точек

Теперь, когда у нас есть сокет и на сервере, и на клиенте, мы можем начать генерировать события, как и раньше.

Сервер

var app = require('http').createServer();
var io = require('socket.io')(app);
app.listen(80);
io.on('connection', function (socket) {
  socket.on('message',function(message){
    console.log(message); 
  });
  socket.emit('message','Hello, my name is Server');
});

Клиент

<script>
  var socket = io('http://localhost');
  socket.on('message',function(message){
    console.log(message); 
  });
  socket.emit('message','Hello, my name is Client');
</script>

Вуаля! мы успешно создали соединение Socket.io. Надеюсь, вы лучше понимаете основы Socket.io, и я вас не так сильно запутал!

Спасибо за чтение, и я буду признателен, если вы уделите мне время, чтобы дать мне отзыв и помочь мне улучшить это руководство! В любом случае, получайте удовольствие от Socket.io :)

Вот гораздо более удобная версия кода, если вы хотите запустить ее самостоятельно:

Краткое руководство по основам Socket.io