Создание приложений ReactJS в реальном времени с помощью Socket.Io

В этой статье мы рассмотрим, как вы можете реализовать коммуникацию на основе веб-сокетов в реальном времени в своем веб-приложении ReactJS.

Почему именно Websockets?

Я много раз говорил об этом в предыдущих статьях на этом сайте о том, почему мы должны использовать веб-сокеты в наших приложениях.

Преимущества многочисленны, и когда мы используем socket.io, эти преимущества могут быть реализованы с минимальной дополнительной сложностью.

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

С помощью традиционных HTTP-запросов вы можете отправлять новый HTTP-запрос для проверки статуса сервера раз в минуту. Хотя это, безусловно, сработает, это будет означать, что вы будете создавать новое TCP-соединение 100 раз в минуту для своего парка серверов. В сумме получается 6000 раз в час, или 144 000 в день.

Если каждая из этих служб отправила ответ статуса JSON, который выглядел бы так:

{ 
    "service_status": "good", 
    "last_issue": "2018-07-15T13:51:53.415Z" 
}

Размер каждого HTTP-ответа от нашего сервера может составлять примерно 200–300 КБ на ответ. Это соответствует примерно 41 ГБ сетевого трафика в день только при опросе состояния ваших 100 серверов.

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

Если бы мы перенесли наше приложение на использование веб-сокетов, мы могли бы сократить это количество до 100 TCP-соединений, которые будут постоянными в течение дня.

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

Строим наши приложения

Чтобы избежать путаницы, мы создадим пустое приложение для реагирования с помощью инструмента create-react-app:

$ create-react-app my-new-app

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

$ yarn add socket.io-client

Наш файл api.js

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

Создайте новый файл в каталоге api и добавьте следующее:

// api/index.js 
import openSocket from 'socket.io-client'; 
const socket = openSocket('http://localhost:5000/'); 
function connect(cb) { 
    socket.on('chat', (message) => { 
        console.log(message) 
        cb(message); 
    }) 
} 
export { connect }

Вы заметите, что сначала мы импортировали необходимую socket.io-client библиотеку. Затем мы создали socket соединение, которое подключается к жестко запрограммированной http://localhost:5000 внутренней веб-службе.

Ниже мы определили connect() функцию, которая принимает обратный вызов в качестве параметра. В теле этой функции мы определяем, что происходит, когда наш клиентский интерфейс получает сообщение socket.io типа chat. В этом случае мы просто регистрируем то, что было получено, а затем вызываем нашу введенную функцию обратного вызова, передавая ей полученное сообщение.

Обновление вашего App.js

Итак, теперь, когда мы определили нашу connect функцию в нашем api/index.js файле, мы можем начать процесс подключения к нашей конечной точке websocket и отправки и получения сообщений.

Сначала нам нужно импортировать наш новый api/index.js файл в начало нашего app.js файла. Как только мы это сделаем, мы можем определить constructor, если его еще нет, и внутри него мы будем вызывать connect() и передавать функцию обратного вызова, которая просто console.log будет возвращать наше сообщение.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from './api';

class App extends Component {

  constructor(props) {
    super(props);
    connect(message => {
      console.log(message);
    });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Как только вы это сделаете, сохраните файл и перезагрузите приложение в браузере. На вкладке консоли вы должны увидеть слова hello world, возвращаемые при успешном подключении к внутреннему серверу веб-сокетов.

Наша бэкэнд-система

Наша бэкэнд-система очень проста, но ее можно расширить, сколько душе угодно. Фактически, это будет базой для новой серии статей, над которыми я работаю по созданию приложения для чата в реальном времени, работающего на AWS. Если вы хотите быть в курсе, когда это выйдет, подпишитесь на меня в твиттере: @Elliot_f

Итак, приведенный ниже код просто устанавливает конечную точку socket.io, которая работает на http://localhost:5000. Когда пользователь подключается к этой конечной точке websocket, он регистрирует, что новый клиент успешно подключился, и отправляет Hello World сообщение обратно клиенту.

import express from "express";
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.set('origins', '*:*');
io.on('connection', async (socket: any) => {
	console.log("Client Successfully Connected");

	io.emit('chat', "hello world");
})

server.listen(5000, () => {
	console.log("Backend Server is running on http://localhost:5000");
})

Я рекомендую проверить наш каталог backend здесь: TypeScript / response-typescript-real-time-chat, который содержит соответствующие файлы конфигурации, необходимые для запуска этого на вашем компьютере.

Когда вы создадите необходимые файлы конфигурации и выполните yarn install или npm install, вы сможете построить и запустить этот проект, вызвав:

Это будет одновременно следить за любыми изменениями кода, компилировать наши файлы TypeScript в каталог dist/ и впоследствии запускать эти файлы с использованием nodemon.

Как только это будет запущено и вы запустите свое клиентское приложение, вы должны увидеть, что Hello World успешно вошел в инспектор вашего браузера, когда вы подключаетесь к бэкэнду.

Заключение

Итак, надеюсь, это руководство было успешным в том, что вы начали работать как с React, так и с Socket.io, чтобы вы могли создавать свои собственные сложные, потрясающие приложения в реальном времени.

Если вам нужна дополнительная помощь или вы хотите узнать больше, напишите мне в Твиттере @Elliot_f или дайте мне знать в разделе комментариев ниже.

Первоначально опубликовано на tutorialedge.net.

✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .

Создание приложений ReactJS в реальном времени с помощью Socket.Io