РОЗРОБКА КЛІЄНТСЬКОЇ ЧАСТИНИ МУЛЬТИПЛЕЄРНОГО КЛАВІАТУРНОГО ТРЕНАЖЕРА З ВИКОРИСТАННЯМ REACT ТА WEBSOCKET-ТЕХНОЛОГІЙ

##plugins.themes.bootstrap3.article.sidebar##

пдф
Опубліковано: груд. 26, 2024
DOI: https://doi.org/10.31651/2076-5886-2024-1-90-102
Ключові слова:
клавіатурний тренажер, React.js, TypeScript, TailwindCSS, WebSocket, ActionCable, JWT, OAuth2, мультиплеєрний веб-застосунок, SPA, однобічний потік даних.

##plugins.themes.bootstrap3.article.main##

Олексій ТКАЧЕНКО
Черкаський національний університет імені Богдана Хмельницького
Руслан ДІДКОВСЬКИЙ
Черкаський національний університет імені Богдана Хмельницького
https://orcid.org/0000-0002-5166-7564
Олександр ПІСКУН
Черкаський національний університет імені Богдана Хмельницького
https://orcid.org/0000-0001-5334-6337

Анотація

У роботі розглянуто підходи до проектування та розробки клієнтської частини
мультиплеєрного веб-застосунку для тренування швидкості та точності клавіатурного набору тексту. Проведено порівняльний аналіз наявних рішень у даній предметній галузі –
TypingClub, Nitro Type та 10FastFingers – на підставі якого виявлено обмеження існуючих
підходів і сформульовано вимоги до власного застосунку. Обґрунтовано вибір технологічного
стеку: React.js із хуками та контекстом для побудови компонентної SPA-архітектури,
TypeScript для статичної типізації, TailwindCSS для стилізації й підтримки тем оформлення,
ActionCable на основі протоколу WebSocket (RFC 6455) для забезпечення низькозатримкового
двостороннього зв'язку між учасниками гри в режимі реального часу, а також механізми
авторизації на основі JWT (RFC 7519) та Google OAuth2. Описано архітектуру клієнтської
частини застосунку: компонентну структуру, механізми маршрутизації (React Router),
управління глобальним станом через React Context та обробку подій WebSocket-каналу.
Детально розглянуто реалізацію центрального компонента ігрової кімнати, що підтримує два
режими – онлайн-змагання та офлайн-практику, – таблиці лідерів із сортуванням і пошуком, а
також мультиплеєрної сторінки з управлінням ігровими кімнатами. Порівняно застосовані
технічні підходи з альтернативами. Встановлено, що реалізований застосунок поєднує
можливості, відсутні в будь-якому з аналізованих аналогів.

##plugins.themes.bootstrap3.article.details##

Як цитувати
ТКАЧЕНКО, О., ДІДКОВСЬКИЙ , Р., & ПІСКУН, О. (2024). РОЗРОБКА КЛІЄНТСЬКОЇ ЧАСТИНИ МУЛЬТИПЛЕЄРНОГО КЛАВІАТУРНОГО ТРЕНАЖЕРА З ВИКОРИСТАННЯМ REACT ТА WEBSOCKET-ТЕХНОЛОГІЙ. Вісник Черкаського університету: Прикладна математика. Інформатика, (1). https://doi.org/10.31651/2076-5886-2024-1-90-102
Номер
№ 1 (2024): ВІСНИК ЧЕРКАСЬКОГО УНІВЕРСИТЕТУ: ПРИКЛАДНА МАТЕМАТИКА. ІНФОРМАТИКА
Розділ
Інформатика
Creative Commons License

Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License.

Біографії авторів

Олексій ТКАЧЕНКО, Черкаський національний університет імені Богдана Хмельницького

студент спеціальності «Інформаційні
системи та технології» Черкаського
національного університету імені Богдана
Хмельницького

 

Руслан ДІДКОВСЬКИЙ , Черкаський національний університет імені Богдана Хмельницького

доктор технічних наук, доцент, доцент
кафедри прикладної математики та
інформатики Черкаського національного
університету імені Богдана
Хмельницького
e-mail: didkovskyirm@vu.cdu.edu.ua
ORCID 0000-0002-5166-7564

Олександр ПІСКУН, Черкаський національний університет імені Богдана Хмельницького

кандидат технічних наук, доцент,
завідувач кафедри прикладної математики
та інформатики, Черкаський національний
університет ім. Б. Хмельницького
e-mail: piskun@ukr.net
ORCID 0000-0001-5334-6337

Посилання

TypingClub [Electronic resource]. Access: https://www.typingclub.com (accessed: 20.05.2024).

Nitro Type [Electronic resource]. Access: https://www.nitrotype.com (accessed: 20.05.2024).

10FastFingers [Electronic resource]. Access: https://10fastfingers.com (accessed: 20.05.2024).

React – A JavaScript library for building user interfaces [Electronic resource]. Access: https://reactjs.org

(accessed: 29.04.2024).

React State and Lifecycle [Electronic resource]. Access: https://reactjs.org/docs/state-and-lifecycle.html

(accessed: 29.04.2024).

WebSocket API [Electronic resource] / MDN Web Docs. Access: https://developer.mozilla.org/enUS/docs/Web/API/WebSocket (accessed: 19.05.2024).

How to use Action Cable with React and Rails [Electronic resource]. Access:

https://medium.com/swlh/how-to-use-action-cable-with-react-and-rails-3129a554c7d (accessed:

05.2024).

TypeScript [Electronic resource]. Access: https://www.typescriptlang.org (accessed: 29.04.2024).

Tailwind CSS [Electronic resource]. Access: https://tailwindcss.com (accessed: 29.04.2024).

React Context API [Electronic resource]. Access: https://reactjs.org/docs/context.html (accessed:

04.2024).

Introduction to JSON Web Tokens [Electronic resource]. Access: https://jwt.io/introduction (accessed:

05.2024).

React Router [Electronic resource]. Access: https://reactrouter.com (accessed: 29.04.2024).

Framer Motion [Electronic resource]. Access: https://www.framer.com/motion (accessed: 29.04.2024).

Fette I., Melnikov A. (2011) The WebSocket Protocol. RFC 6455. IETF. Access:

https://datatracker.ietf.org/doc/html/rfc6455.

Jones M. et al. (2015) JSON Web Token (JWT). RFC 7519. IETF. Access:

https://datatracker.ietf.org/doc/html/rfc7519.