Функции реального времени в веб-приложениях позволяют пользователям получать обновления в текущий момент событий, инициируя связь между пользователями и сервером. Они важны для улучшения пользовательского опыта и предоставления им действенной информации. Эта статья покажет вам, как реализовать эту функцию в React с помощью WebSockets.
Почему функции реального времени важны?
- Мгновенный и интерактивный опыт для пользователей.
- Обеспечивает лучшую поддержку пользователей, используя обмен мгновенными сообщениями, чтобы отвечать на вопросы или предлагать решения.
- Держит пользователей в курсе, чтобы они могли принимать обоснованные решения с помощью предоставленных данных и аналитики.
- Информирует пользователей о недавно добавленных функциях в приложение с помощью push-уведомлений.
API WebSocket — это технология, обеспечивающая мгновенную связь и обмен данными между клиентом и сервером. Он используется для создания функций в реальном времени, таких как приложения для чата, инструменты для совместной работы в реальном времени и прямые трансляции.
Он поддерживается большинством браузеров, включая Firefox, Chrome и Safari, что делает его широко распространенной технологией для создания функций реального времени в веб-приложениях.
Библиотеки WebSockets доступны для реализации в приложении React, чтобы обеспечить обмен данными между клиентом и сервером и создание функций в реальном времени в приложении. Это делается путем установления соединения между приложением React и сервером с использованием API WebSocket.
Определение WebSockets и чем они отличаются от традиционных HTTP-запросов
WebSockets — это протокол связи, который обеспечивает связь в реальном времени между клиентом и сервером. Он использует стандартный протокол WebSocket, который проходит через TCP или IP, чтобы обеспечить соединение между клиентом и сервером.
WebSocket обеспечивает постоянный двунаправленный канал связи между клиентом и сервером. Это означает, что данные могут передаваться туда и обратно между клиентом и сервером без необходимости каждый раз инициировать новое соединение для отправки запроса.
В отличие от HTTP-запросов, каждый новый запрос требует ответа, после чего он завершается, прежде чем новый запрос может быть отправлен снова. Веб-сокеты работают по-другому; он использует протокол с отслеживанием состояния. Как только соединение установлено, связь будет продолжаться до тех пор, пока соединение не будет прервано клиентом или сервером.
Как работают WebSockets и обеспечивают связь в реальном времени
Система рукопожатия WebSocket похожа на систему HTTP, но имеет несколько отличий. Клиент отправляет HTTP-запрос на сервер с заголовком «Upgrade», указывающим «WebSockets», чтобы создать соединение WebSocket. После установления соединения данные передаются между клиентом и сервером в режиме реального времени. Затем либо клиент, либо сервер инициируют рукопожатие «закрыть», чтобы разорвать соединение.
Благодаря этому постоянному соединению WebSockets используются для создания приложений реального времени. Это мощная технология для создания привлекательных и интерактивных веб-приложений.
Различные библиотеки WebSocket доступны для React
Существуют различные библиотеки, используемые с веб-сокетами для управления соединениями веб-сокетов между браузером и сервером. Они предоставляют функции, которые позволяют подключаться через WebSocket, такие как обработка событий и отправка и получение сообщений. Чтобы использовать эти библиотеки, в вашей системе должны быть установлены npm и Node.js, а затем npm install любая из библиотек.
Некоторые библиотеки WebSockets, доступные с React:
Конкретная используемая библиотека зависит от вашего проекта и варианта его использования. Некоторые библиотеки, такие как Socket.IO и uWebSockets.js, предоставляют более продвинутые функции связи в реальном времени, в то время как другие предоставляют более простой API.
Пошаговое руководство по интеграции WebSockets в приложение React
Теперь давайте посмотрим, как интегрировать WebSocket в приложение React. В рамках этого руководства Socket.IO будет использоваться для создания функций реального времени в React.
Предпосылка
У вас должен быть установлен Node.js на вашем локальном компьютере.
Интеграция WebSockets в ваше приложение React
В своем приложении React установите библиотеку Socket.IO, введя в терминале следующую команду:
npm install socket.io-client
Далее вы создадите сервер WebSockets, используя HTTP-сервер Node.js для управления входящими подключениями.
Создайте новый файл в своем приложении и введите следующий код. Создайте папку для сервера и файл server.js. На вашем терминале перейдите в папку сервера и запустите npm.io.
Введите следующий код в файл server.js.
const http = require("http");
const { Server } = require("socket.io");
const httpServer = http.createServer();
const PORT = 8080,
HOST = "localhost";
const io = new Server(httpServer, {
cors: {
origin: "*", // or a list of origins you want to allow, e.g. ["http://localhost:3000"]
credentials: true,
},
});
io.on("connection", (socket) => {
console.log(socket.id);
});
httpServer.listen(PORT, HOST, () => {
console.log("Server running on port:", PORT);
});
Это создаст сервер WebSockets, прослушивающий порт 8080, который регистрирует входящие клиентские подключения. Он записывает идентификатор сокета в консоль, который должен быть таким же на внешнем интерфейсе.
Теперь подключите сервер WebSockets к вашему приложению React. В файле App.js добавьте следующий код:
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
function App() {
const [message, setMessage] = useState('');
const [socket, setSocket] = useState(null);
useEffect(() => {
// connect to WebSocket server
const newSocket = io("http://localhost:8080");
setSocket(newSocket);
newSocket.on('connect', () => {
console.log('Connected to server', newSocket.id);
});
newSocket.on('disconnect', () => {
console.log('Disconnected from server');
});
}, []);
}
export default App;
Этот код создает соединение с сервером WebSockets методом io() из библиотеки Socket.IO. Он прослушивает события подключения и отключения с помощью прослушивателей событий. Как только это будет сделано, соединение будет создано, и вы сможете прослушивать события. newSocket.id должен совпадать с newSocket.id, созданным на стороне сервера.
Функции реального времени, которые можно создавать с помощью WebSocket
С помощью WebSocket можно создать несколько функций реального времени. Некоторые примеры этих функций:
- Приложения для чата. Приложения для чата позволяют пользователям мгновенно общаться друг с другом. Пользователи могут отправлять сообщения, которые немедленно отправляются на сервер, а ответ отправляется обратно, и все это происходит через соединение WebSocket. Это позволяет быстро и эффективно общаться между пользователями в режиме реального времени.
- Уведомление в реальном времени: эта функция предоставляет пользователям немедленные обновления при возникновении новых событий. Он уведомляет пользователей о некоторых событиях.
- Визуализация данных в реальном времени. Визуализация данных в реальном времени предоставляет пользователям информацию в режиме реального времени. Примером может служить панель инструментов, которая отображает производительность веб-сайта компании в режиме реального времени.
- Прямая трансляция: это позволяет пользователям смотреть события, трансляции или другой видеоконтент в режиме реального времени.
Повтор сеанса для разработчиков
Выявляйте разочарования, ищите ошибки и устраняйте замедления, как никогда раньше, с помощью OpenReplay — инструмента воспроизведения сеансов с открытым исходным кодом для разработчиков. Разместите его самостоятельно за считанные минуты и полностью контролируйте данные своих клиентов. Загляните в наш репозиторий GitHub и присоединитесь к тысячам разработчиков в нашем сообществе.
Реализация приложения чата с помощью WebSocket
После успешной установки WebSocket, создания сервера и подключения сервера WebSocket из приложения React вы теперь реализуете функцию приложения чата с помощью WebSocket.
Чтобы создать приложение чата, добавьте следующий код в файл server.js для прослушивателя событий соединения:
io.on("connection", (socket) => {
console.log(socket.id);
socket.on("message", (message) => {
console.log(`Received message: ${message}`);
socket.emit("message", message);
});
});
Это должно войти в ваш компонент ChatRoom, который вы должны были создать.
import React, { useState, useEffect } from "react";
import io from "socket.io-client";
const ChatRoom = () => {
const [message, setMessage] = useState("");
const [messages, setMessages] = useState([]);
const [socket, setSocket] = useState(null);
useEffect(() => {
// connect to WebSocket server
const newSocket = io("http://localhost:8080");
setSocket(newSocket);
// set up event listeners for incoming messages
newSocket.on("connect", () => console.log("Connected to WebSocket"));
newSocket.on("disconnect", () =>
console.log("Disconnected from WebSocket")
);
newSocket.on("message", (data) => {
setMessages((msgs) => [...msgs, data]);
});
// clean up on unmount
return () => {
newSocket.disconnect();
};
}, []);
const handleSend = (e) => {
e.preventDefault();
if (message.trim() !== "") {
// send message to WebSocket server
socket.emit("message", message);
setMessage("");
}
};
return (
<div>
<h1>Chat Room</h1>
<div>
{messages.map((msg, index) => (
<div key={index}>{msg}</div>
))}
</div>
<form onSubmit={handleSend}>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button type="submit">Send</button>
</form>
</div>
);
};
export default ChatRoom;
Этот код устанавливает соединение WebSocket с сервером, работающим на http://localhost:8080. Он использует хук useState для управления состоянием сообщений чата и текущим набираемым сообщением. Хук useEffect используется для настройки соединения WebSocket и прослушивателей событий для входящих сообщений. Когда пользователь вводит новое сообщение и нажимает кнопку отправки, функция handleSend отправляет сообщение на сервер WebSocket, используя метод emit. Входящие сообщения добавляются в массив сообщений в состоянии компонента, который затем отображается в интерфейсе чата.
Вы должны увидеть что-то вроде этого:
А также:
Вторым примером реализации функции реального времени с использованием WebSocket будет живое уведомление.
На стороне сервера вам также необходимо генерировать событие уведомления, чтобы отправлять уведомления всем подключенным клиентам. Следующий код дает пример:
io.on("connection", (socket) => {
console.log(socket.id);
socket.on("message", (message) => {
console.log(`Received message: ${message}`);
io.emit("notification", message);
});
});
Это должно войти в компонент для живого уведомления:
import React, { useState, useEffect } from "react";
import io from "socket.io-client";
const socket = io("http://localhost:8080");
function App() {
const [notifications, setNotifications] = useState([]);
useEffect(() => {
// Listen for incoming notifications from the server
socket.on("notification", (notification) => {
setNotifications([...notifications, notification]);
});
// Clean up event listeners on unmount
return () => {
socket.off("notification");
};
}, [notifications]);
return (
<div>
<h1>Live Notifications</h1>
<ul>
{notifications.map((notification, index) => (
<li key={index}>{notification}</li>
))}
</ul>
</div>
);
}
export default App;
Хук useEffect настраивает прослушиватель для входящих уведомлений с сервера. При получении нового уведомления состояние уведомления обновляется новым уведомлением. Затем пользовательский интерфейс обновляется, чтобы показать уведомление пользователю.
Этот код прослушивает события входящих сообщений от клиентов. При получении нового сообщения оно рассылается всем подключенным клиентам, отправляя событие уведомления каждому клиенту. Это отправляет уведомление всем подключенным клиентам, включая приложение React, которое мы создали ранее.
Лучшие практики использования WebSockets в приложении React
Рассмотрим несколько лучших практик использования WebSockets в приложении React.
- Используйте эффективные форматы данных: используйте эффективные форматы данных, такие как JSON, при отправке данных через соединение WebSocket для повышения производительности.
- Управление соединениями WebSocket: соединения WebSocket должны поддерживаться надлежащим образом для обеспечения производительности и надежности. Рекомендуется создать и поддерживать одно соединение WebSocket на время работы вашего приложения.
- Используйте библиотеку WebSocket: используйте библиотеку WebSocket, такую как Socket.IO или SockJS, для функций, которые они предоставляют, вместо того, чтобы реализовывать функциональность WebSocket с нуля.
- Подробное тестирование. Наконец, не забудьте подробно протестировать свою реализацию WebSocket на предмет производительности и надежности.
Заключение
В этой статье вы узнали о веб-сокетах, их роли в создании функций реального времени в приложениях и о том, чем они отличаются от традиционных HTTP-запросов. Затем вы приступили к созданию сервера WebSocket и подключению его к вашему приложению React, прежде чем, наконец, внедрить в приложение некоторые функции реального времени.
Вы можете поэкспериментировать и изучить WebSockets, а также реализовать другие функции реального времени, чтобы еще больше углубить свое понимание. Для дальнейшего чтения по библиотекам WebSocket и Socket.IO.
Исходный код для реализации живых функций доступен в моем репозитории GitHub.
Первоначально опубликовано на https://blog.openreplay.com.
