В моем последнем проекте мне пришлось использовать веб-сокеты для создания веб-сайта, отображающего торговые данные в реальном времени. Я ничего не знал о веб-сокетах, и мне понадобилось несколько ужасных часов, чтобы начать с ними работать. На самом деле это единственная проблема, с которой стоит начать; остальное вполне понятно. Эта короткая статья надеется помочь другим сэкономить время, которое мне понадобилось, чтобы понять его основы.
В большинстве учебных пособий в Интернете упоминается синтаксис «require». Ты знаешь это. Когда вы хотите использовать определенный инструмент, компонент или изображение в своем компоненте в JS или React, вы должны сделать что-то вроде const something = require («./folder/something»). Теперь, как я уже сказал, большинство руководств, которые я нашел в Интернете, начинаются именно с этого синтаксиса, который подталкивает вас к началу работы с WebSockets, используя синтаксис require. Это ненужно и, может быть, даже неправильно в наши дни. Я не уверен, работает это как-то или нет, но я уверен, что способ, которым я пользуюсь, работает идеально, когда я пишу эту статью 09.12.2021. Итак, без лишних слов, давайте поговорим о том, как мы можем использовать этот протокол.
В этой статье предполагается, что у вас есть практические знания Vanilla JS и React.js, вы знаете, как работать с форматом json и асинхронным кодом.
Я запускаю свое приложение с помощью vite (следующей командой: npm init vite@latest и выбираю реакцию в меню), но вы можете использовать свою собственную структуру или создать-реагировать-приложение. На самом деле это не имеет значения.
Для более подробного ознакомления с WebSocket посетите [javascript.info](https://javascript.info/websocket)
### Что будем строить?
Мы собираемся создать очень простое одностраничное приложение React.js, которое берет непрерывные данные с bitstamp.net и отображает их на странице. Данные будут постоянно меняться.
На самом деле не имеет значения, какой сервис вы используете, главное, чтобы это были веб-сокеты, остальное — обычный Javascript.
### Сборка приложения
Давайте начнем с подключения к протоколу WebSocket Bitstamp, написав следующий код `const ws = new WebSocket(“wss://ws.bitstamp.net”);` Теперь, используя эту константу ws, мы можем подписаться на любой канал, определенный на сайт bitstamp и получить оттуда непрерывные данные. Вы можете найти любую информацию о каналах, свойствах и прочем из [здесь](https://www.bitstamp.net/websocket/v2/)
Теперь давайте подпишемся на канал. Я подпишусь на канал oder_book_v2 и укажу, что хочу видеть курсы обмена btc/usd. Этот вызов определен в руководстве по битштампу. Вы можете изменить канал и валюту по своему усмотрению. Вот звонок:
```javascript
const apiCall = {
событие: «bts: подписка»,
данные: { канал: «order_book_btcusd» },
};
`` `
Следующим шагом является отправка этого вызова на сервер при открытии =>
```javascript
ws.onopen = (event) =› {
ws.send(JSON.stringify(apiCall));
};
```
Теперь мы хотим что-то сделать с каждыми данными. Итак, всякий раз, когда мы получаем сообщение от сервера, мы что-то делаем. Давайте напишем асинхронный код с помощью try/catch
```javascript
ws.onmessage = function (event) {
const json = JSON.parse(event.data);
console.log(`[message] Данные получены с сервера: ${json}`);< br /> попробуйте {
если ((json.event = «данные»)) {
console.log(json.data);
}
} catch (err) {
// все, что вы хотите сделать с ошибкой
}
};
```
Если бы мы открыли консоль, то увидели бы большое количество данных, поступающих с сервера. Вот и все. У нас есть данные, они поступают потоком, и мы можем делать с ними все, что захотим. Это так просто.
Однако я хочу отображать данные определенным образом. Позвольте мне вставить код, и я объясню сразу после:
```javascript
import React, { useState } из «реагировать»;
function App() {
//задаем начальное состояние, чтобы данные не были неопределенными при запуске
const [bids, setBids] = useState([0]);
const ws = новый WebSocket («wss://ws.bitstamp.net»);
const apiCall = {
событие: «bts: подписка»,
данные: { канал: «order_book_btcusd» },
};
ws.onopen = (event) =› {
ws.send(JSON.stringify(apiCall));
};
ws.onmessage = function (event) {
const json = JSON.parse(event.data);
try {
if ((json.event = «data»)) {
setBids(json.data.bids.slice(0, 5));
}
} catch (err) {
console.log(err);
}< br /> };
//сопоставляем первые 5 ставок
const firstBids = bids.map((item) =› {
return (
‹div›
‹p› {item}‹/p›
‹/div›
);
});
вернуть ‹div›{firstBids}‹/div›;
}
экспортировать приложение по умолчанию;
```
Итак, что здесь происходит? Как видите, это очень простой компонент приложения React.js. Я использую хук useState, поэтому я также импортирую его с помощью реакции.
Я определяю состояние и присваиваю ему начальное значение.
Я действую, как указано ранее, за исключением того, что я устанавливаю состояние в json.data.bids (ставки являются свойством канала живого заказа и указаны на странице битштампа) и ограничиваю количество данных, которые я буду получать до 5, ради удобства.
Я сопоставляю данные, которые я получаю, сохраняя в состоянии (как вы знаете, React запрашивает ключ для каждого элемента данных. Я не буду использовать его здесь. Я обычно использую для этого uniqid, вы можете проверить это сами).
Я возвращаю сопоставленные данные и вуаля! Если вы сделали то же самое, вы должны увидеть на экране ровно 5 строк постоянно меняющихся данных.
Я надеюсь, что эта статья поможет кому-то.
Если вы хотите узнать обо мне больше или просто связаться, вот моя личная страница =› https://muratcan-yuksel.github.io/portfolio/
Всего наилучшего и продолжайте кодить!
