РОЗРОБКА КЛІЄНТСЬКОЇ ЧАСТИНИ МУЛЬТИПЛЕЄРНОГО КЛАВІАТУРНОГО ТРЕНАЖЕРА З ВИКОРИСТАННЯМ REACT ТА WEBSOCKET-ТЕХНОЛОГІЙ
##plugins.themes.bootstrap3.article.sidebar##
##plugins.themes.bootstrap3.article.main##
Анотація
У роботі розглянуто підходи до проектування та розробки клієнтської частини
мультиплеєрного веб-застосунку для тренування швидкості та точності клавіатурного набору тексту. Проведено порівняльний аналіз наявних рішень у даній предметній галузі –
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##
Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License.
Посилання
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: