Socket.IO — это библиотека JavaScript, которая обеспечивает двустороннюю связь между веб-клиентами и серверами в режиме реального времени. Он использует WebSockets под капотом, но также предоставляет запасные варианты для сред, где WebSockets недоступны, таких как старые браузеры или ограничительные сетевые прокси.

Socket.IO предоставляет простой API для отправки и получения сообщений между клиентом и сервером, а также обрабатывает низкоуровневые детали управления подключениями, повторными подключениями и отключениями. Это упрощает создание приложений реального времени, таких как чаты, многопользовательские игры и инструменты для совместного редактирования.

         CLIENT                               SERVER
            |                                    |
     request to connect                     accept connection
            |                                    |
         create socket                         create socket
            |                                    |
      send message                            receive message
            |                                    |
      receive message                         send message
            |                                    |
      send message                            receive message
            |                                    |
             ...                                ...
            |                                    |
      send message                            receive message
            |                                    |
        close socket                          close socket
            |                                    |
     connection ends                       connection ends

Начнем с React Native

Монтаж

Во-первых, у нас есть эта библиотека с именем socket.io-client.



GitHub — socketio/socket.io-client: среда приложений реального времени (клиент)
Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com



нам нужно установить эту библиотеку, чтобы все это работало.

yarn add socket.io-client

также убедитесь, что вы выполнили часть pod install в папке ios.

Инициализация

После того, как вы установили клиентскую библиотеку Socket.IO, вы можете запустить клиент. Полный список опций можно найти здесь.

import { io } from "socket.io-client";

и тогда вы можете начать использовать его.

Экземпляр сокета

Socket — это основной класс для взаимодействия с сервером.

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

 refSocket.current = io(`${apiURLSocket}?authorization=${token}`, 
        {
          'reconnection': true,
          'reconnectionDelay': 1000,
          'reconnectionDelayMax' : 5000,
          'forceNew': true
        })

Связь

Этот атрибут описывает, подключен ли сокет в данный момент к серверу.

// server-side
io.on("connection", (socket) => {
  console.log(socket.id); // x8WIv7-mJelg7on_ALbx
});

// client-side
socket.on("connect", () => {
  console.log(socket.id); // x8WIv7-mJelg7on_ALbx
});

socket.on("disconnect", () => {
  console.log(socket.id); // undefined
});

Испускают

API Socket.IO вдохновлен EventEmitter Node.js, что означает, что вы можете генерировать события с одной стороны и регистрировать прослушиватели с другой:

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

Сервер:

io.on("connection", (socket) => {
  socket.emit("hi", "test");
});

Клиент

socket.on("hi", (arg) => {
  console.log(arg); // test
});

то же самое происходит с клиента на сервер

Сервер

io.on("connection", (socket) => {
  socket.on("hi", (arg) => {
    console.log(arg); // world
  });
});

Клиент

socket.emit("hi", "world");

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

Отключить

Не забудьте отключить ;)

socket.on("disconnect", (reason) => {
  // ...
});

Это всего лишь краткое изложение реализации сокетов в React Native, потому что мы можем делать много продвинутых вещей, используя сокеты.