{"id":454063,"date":"2025-04-01T15:54:29","date_gmt":"2025-04-01T15:54:29","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=454063"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=454063","title":{"rendered":"<span>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0433\u043e \u0447\u0430\u0442\u0430 \u0432 Telegram: \u0411\u043e\u0442 \u0441 MiniApp \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c. \u0427\u0430\u0441\u0442\u044c 2 \u2014 VueJS3 + Centrifugo \u0441 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0414\u0440\u0443\u0437\u044c\u044f, \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e!<\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0433\u043e \u0447\u0430\u0442\u0430 &#171;\u0422\u0435\u0442 \u0410 \u0422\u0435\u0442&#187; \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0430 \u0441 MiniApp (\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043a\u0430\u043a WebApp).<\/p>\n<p>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/habr.com\/ru\/companies\/amvera\/articles\/890976\/\">\u00ab\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0433\u043e \u0447\u0430\u0442\u0430 \u0432 Telegram: \u0411\u043e\u0442 \u0441 MiniApp \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c. \u0427\u0430\u0441\u0442\u044c 1 \u2014 \u0411\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 FastAPI, Aiogram, Redis \u0438 Centrifugo\u00bb<\/a> \u043c\u044b \u0443\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u043f\u0438\u0441\u0430\u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 API-\u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0447\u0435\u043c \u043c\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0438 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435\u043c <strong>\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e<\/strong> \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043c\u043e\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 <a href=\"https:\/\/habr.com\/ru\/companies\/amvera\/articles\/885714\/\">\u00abCentrifugo v6 + FastAPI + Python: \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0431-\u043e\u043f\u0440\u043e\u0441\u043d\u0438\u043a \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438\u00bb<\/a>, \u0433\u0434\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Centrifugo \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435.<\/p>\n<h3>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>\u0414\u043b\u044f \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0443 \u0432\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u0434\u043d\u044f\u0442\u0430\u044f \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 Redis<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Centrifugo<\/p>\n<\/li>\n<li>\n<p>\u0422\u043e\u043a\u0435\u043d \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0430 (\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u043e\u0442\u0435 BotFather)<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 API \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Redis (\u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043c\u043d\u0430\u0442\u0430\u043c\u0438 \u0438 \u043e\u0447\u0435\u0440\u0435\u0434\u044f\u043c\u0438)<\/p>\n<\/li>\n<li>\n<p>API \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Centrifugo (\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u043d\u0430\u043b\u043e\u0432, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u044b \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439)<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u043e \u0445\u043e\u0434\u0443 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u044f \u0431\u0443\u0434\u0443 \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Centrifugo.<\/p>\n<h3>\u041f\u043b\u0430\u043d \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u043b\u0430\u043d\u0443. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0447\u0430\u0442\u0430 &#171;\u0422\u0435\u0442 \u0410 \u0422\u0435\u0442&#187;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a Real-Time \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <strong>Real-Time<\/strong> \u2014 \u044d\u0442\u043e \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u043e\u0441\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u043d\u043e\u0432\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0447\u0430\u0442\u0430, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0432 \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435).<\/p>\n<h4>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043d\u0430\u0448\u0435\u0433\u043e Telegram MiniApp, \u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ol>\n<li>\n<p><strong>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432<\/strong> \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 (\u043f\u043e\u043b \u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430)<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430<\/strong> \u2014 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 MiniApp \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f<\/strong> \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0447\u0430\u0442\u0430<\/strong> \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<\/ol>\n<h4>\u041b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432 MiniApp:<\/p>\n<ol>\n<li>\n<p><strong>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 API<\/strong> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043a\u043e\u043c\u043d\u0430\u0442\u044b, \u0432\u044b\u0445\u043e\u0434\u0430 \u0438\u0437 \u043a\u043e\u043c\u043d\u0430\u0442\u044b, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 Centrifugo<\/strong> \u2014 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043d\u0430\u0448 \u0431\u044d\u043a\u0435\u043d\u0434 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432 \u043a\u0430\u043d\u0430\u043b) \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Centrifugo \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 (\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438)<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/strong> \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 &#171;\u0431\u0435\u0441\u0448\u043e\u0432\u043d\u043e\u0433\u043e&#187; \u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c VueJS3<\/p>\n<\/li>\n<\/ol>\n<h3>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b<\/h3>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0431\u043b\u043e\u043a\u0430\u043c\u0438 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c:<\/p>\n<ol>\n<li>\n<p><strong>\u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong> \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430 MiniApp \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/richads.com\/publishers\/telegram\/?utm_source=alexey&amp;utm_medium=pr&amp;utm_campaign=tg_publishers&amp;utm_content=habr\">RichAds<\/a><\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u0435\u043f\u043b\u043e\u0439 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong> \u2014 \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 <a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\">Amvera Cloud<\/a><\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u0445 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h3>\u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f MiniApp<\/h3>\n<p>\u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u0443\u044e \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u2014 \u043c\u044b \u043d\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0438 \u0443\u0441\u043b\u0443\u0433\u0438, \u043d\u0438 \u0442\u043e\u0432\u0430\u0440\u044b. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0438 \u0441\u0430\u043c\u044b\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043a\u043b\u0430\u043c\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0440\u0435\u043a\u043b\u0430\u043c\u044b \u0432 \u0441\u0432\u043e\u0438\u0445 MiniApp \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u0442\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0445\u043b\u043e\u043f\u043e\u0442\u043d\u044b\u043c. \u0427\u0430\u0441\u0442\u043e \u0431\u0435\u0437 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0440\u0430\u0444\u0438\u043a\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0430\u0440\u044b \u0442\u044b\u0441\u044f\u0447 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u043c\u0435\u0441\u044f\u0446) \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043e\u0434\u043e\u0431\u0440\u044f\u044e\u0442 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u0432 \u0441\u0432\u043e\u0435\u043c MiniApp \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412 \u044d\u0442\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u0435\u0440\u0432\u0438\u0441 <strong>RichAds<\/strong>.<\/p>\n<p>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442:<\/p>\n<ol>\n<li>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0435\u0441\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/richads.com\/publishers\/telegram\/?utm_source=alexey&amp;utm_medium=pr&amp;utm_campaign=tg_publishers&amp;utm_content=habr\">RichAds <\/a>(\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u0438 \u0431\u0435\u0437 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0439)<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0444\u043e\u0440\u043c\u0430\u0442 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 Telegram MiniApp<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0431\u043e\u0442\u0430 \u0438 \u043d\u0430 MiniApp<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 (\u0432\u0441\u0435\u0433\u043e \u043e\u043a\u043e\u043b\u043e 5 \u0441\u0442\u0440\u043e\u0447\u0435\u043a)<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0430\u0447\u043d\u0443\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u00ab\u0443\u043c\u043d\u0443\u044e\u00bb \u0438 \u043d\u0435\u043d\u0430\u0432\u044f\u0437\u0447\u0438\u0432\u0443\u044e \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u0432 \u0432\u0438\u0434\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u044c<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u043e\u043d\u0443\u0441\u0430 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0439 \u0438 \u043a\u043b\u0438\u043a\u043e\u0432. \u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043b\u044e\u0431\u044b\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c.<\/p>\n<p>\u041e\u043f\u043b\u0430\u0442\u0430 \u0437\u0430 \u043a\u043b\u0438\u043a\u0438 \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u2014 \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432\u0430\u0448\u0435\u0433\u043e Telegram MiniApp \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0434\u0435\u043d\u0435\u0436\u043d\u043e\u0435 \u0432\u043e\u0437\u043d\u0430\u0433\u0440\u0430\u0436\u0434\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u0414\u0435\u043f\u043b\u043e\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 Redis<\/p>\n<\/li>\n<li>\n<p>Centrifugo<\/p>\n<\/li>\n<li>\n<p>API (\u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 FastAPI)<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0438\u0437\u0432\u043d\u0435. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043c\u0430\u043b\u043e \u043f\u043e\u043b\u044c\u0437\u044b \u043e\u0442 \u0447\u0430\u0442\u0430, \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u0435\u043f\u043b\u043e\u0439. \u041e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u043d\u0430 VPS\/\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u043b\u0438\u0431\u043e \u043d\u0430 \u043e\u0431\u043b\u0430\u0447\u043d\u044b\u0435 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0438 \u0442\u0438\u043f\u0430 Heroku \u0438\u043b\u0438 \u0435\u0433\u043e \u043e\u0442\u0435\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0430 <a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\"><strong>Amvera Cloud<\/strong><\/a>.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b, \u043a\u0430\u043a \u043d\u0430 Amvera \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c Redis, Celery \u0438 FastAPI. \u0421\u0435\u0433\u043e\u0434\u043d\u044f, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044f \u044d\u0442\u0443 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u044e, \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (MiniApp).<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: Redis, FastAPI, Celery \u0438 VueJS3, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e, \u043d\u043e \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435.<\/p>\n<p>\u041d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 <strong>Amvera Cloud<\/strong> \u0443 \u043c\u0435\u043d\u044f \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u043e\u043a\u043e\u043b\u043e 20 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0441\u043e\u0431\u044b\u0445 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0438, \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0435 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f \u0441 HTTPS, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u043d\u044f\u0442\u0438\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043a\u0430\u043a \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430. \u041d\u0430 Amvera \u044d\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<p>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u043f\u043b\u043e\u044f \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0435 \u0444\u0430\u0439\u043b\u044b<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0434\u043e\u043c\u0435\u043d \u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0435 \u0435\u0433\u043e<\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0430\u0442\u0440\u0430\u0442\u0438\u0432 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0443\u0442, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0434\u043e\u043c\u0435\u043d\u043d\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c.<\/p>\n<h3>\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0442\u0435\u043a<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u043c\u0441\u044f \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0442\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>\u0411\u044d\u043a\u0435\u043d\u0434<\/strong> \u2014 \u043d\u0430\u0448\u0438 API \u043c\u0435\u0442\u043e\u0434\u044b, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434<\/p>\n<\/li>\n<li>\n<p><strong>VueJS3<\/strong> \u2014 JavaScript \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<li>\n<p><strong>VUE-TG<\/strong> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Telegram MiniApp API<\/p>\n<\/li>\n<li>\n<p><strong>Centrifuge<\/strong> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Centrifugo \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/p>\n<\/li>\n<li>\n<p><strong>Vue-Router<\/strong> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0447\u0438\u0441\u0442\u044b\u0439 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e. \u0422\u0435\u043c, \u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u044d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043f\u043e\u043b\u043d\u043e\u043c\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u043c\u043e\u0435\u043c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435 <a href=\"https:\/\/t.me\/PythonPathMaster\">&#171;\u041b\u0435\u0433\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0432 Python&#187;<\/a>.<\/p>\n<h3>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440<\/h3>\n<p>\u0414\u0440\u0443\u0437\u044c\u044f, \u044f \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0431\u044d\u043a\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 VueJS, \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u043a\u043e\u0440\u0435\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0445\u043e\u0431\u0431\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0448\u0443 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043a\u0430\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 Best Practices.<\/p>\n<p>\u041c\u043e\u044f \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043d\u0430 VueJS (JavaScript) \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u043d\u0430 FastAPI (Python) \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e Real-Time \u0447\u0430\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c VueJS3. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0431\u0435\u0437 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u0430, \u0430 \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043b\u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u2014 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0446\u0435\u043d\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u043e, \u043d\u0430\u0448 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043c\u043e\u0438\u043c \u0432\u0438\u0434\u0435\u043d\u0438\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u043b\u044e\u0431\u043e\u0439, \u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u0435\u043c\u0430 Centrifugo \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c!<\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u043c\u044b \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u043c VueJS3 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Vue:<\/p>\n<pre><code class=\"bash\">npm install vue@latest <\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0443\u043a\u0430\u0436\u0435\u043c \u0438\u043c\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <strong>TypeScript<\/strong> \u0438 <strong>VueRouter<\/strong>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443:<\/p>\n<pre><code class=\"bash\">cd project_name <\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"bash\">npm install <\/code><\/pre>\n<p>\u041e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code class=\"bash\">npm run format <\/code><\/pre>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"bash\">npm run dev <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: <a href=\"http:\/\/localhost:5173\/%EF%BF%BC\">http:\/\/localhost:5173\/<\/a><\/p>\n<p>\u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/326\/763\/a26\/326763a263863ff82fb7b909fa7afd05.png\" width=\"1266\" height=\"742\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/326\/763\/a26\/326763a263863ff82fb7b909fa7afd05.png\"\/><\/figure>\n<p>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 Home \u0438 About.<\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/h3>\n<p>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f VueJS \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0435\u0439 \u043a\u043b\u0430\u0432\u0438\u0448 CTRL+C (\u0438\u043b\u0438 CMD+C \u043d\u0430 macOS).<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Telegram MiniApp:<\/p>\n<pre><code class=\"bash\">npm i vue-tg@beta <\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u043b\u044f Centrifugo:<\/p>\n<pre><code class=\"bash\">npm install centrifuge <\/code><\/pre>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0443 \u043c\u0435\u043d\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>centrifuge: ^5.3.4<\/p>\n<\/li>\n<li>\n<p>vue: ^3.5.13<\/p>\n<\/li>\n<li>\n<p>vue-router: ^4.5.0<\/p>\n<\/li>\n<li>\n<p>vue-tg: ^0.9.0-beta.3<\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 (vite.config.ts). \u0412 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">import { fileURLToPath, URL } from 'node:url'  import { defineConfig } from 'vite' import vue from '@vitejs\/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools'  \/\/ https:\/\/vite.dev\/config\/ export default defineConfig({   plugins: [vue(), vueDevTools()],   resolve: {     alias: {       '@': fileURLToPath(new URL('.\/src', import.meta.url)),     },   }, }) <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e:<\/p>\n<ol>\n<li>\n<p>\u0423\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 vueDevTools(), \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043c\u0435\u0448\u0430\u043b\u0438 \u043b\u0438\u0448\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043f\u043e\u0440\u0442 3000 (\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439)<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0445 \u0445\u043e\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043f\u043e\u0434\u0432\u044f\u0437\u043a\u0438 \u0442\u043e\u043d\u043d\u0435\u043b\u0435\u0439 \u0438 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u0438<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">import { fileURLToPath, URL } from 'node:url'  import vue from '@vitejs\/plugin-vue' import { defineConfig } from 'vite'  \/\/ https:\/\/vite.dev\/config\/ export default defineConfig({   plugins: [vue()],   server: {     host: '0.0.0.0',     port: 3000,     allowedHosts: true,   },   resolve: {     alias: {       '@': fileURLToPath(new URL('.\/src', import.meta.url)),     },   }, }) <\/code><\/pre>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u0443\u043d\u043d\u0435\u043b\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h3>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f MiniApp \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0443\u043d\u043d\u0435\u043b\u044c. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0442\u0438\u043b\u0438\u0442\u044b <strong>Tuna<\/strong> \u0438\u043b\u0438 <strong>Ngrok<\/strong> \u2014 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u043d\u0435\u0442.<\/p>\n<p>\u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0443\u043d\u043d\u0435\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">ngrok http 3000 # \u0438\u043b\u0438 tuna http 3000<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/087\/bb1\/c04\/087bb1c043e2a51c438f1a28d4703dfe.png\" width=\"700\" height=\"130\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/087\/bb1\/c04\/087bb1c043e2a51c438f1a28d4703dfe.png\"\/><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"bash\">npm run dev <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0451 \u043f\u0440\u043e\u0448\u043b\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043f\u043e URL \u0442\u0443\u043d\u043d\u0435\u043b\u044f (\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435) \u0443 \u0432\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c\u0441\u044f VueJS3 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u042d\u0442\u0443 \u0441\u0441\u044b\u043b\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u043a \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0443 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041f\u043e\u0441\u043b\u0435 \u0434\u0435\u043f\u043b\u043e\u044f \u043c\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0435\u0451 \u043d\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u0443\u044e.<\/p>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 src \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e services \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043d\u0435\u0439 \u0444\u0430\u0439\u043b api.ts. \u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043d\u0430\u0448\u0438\u043c API, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u043c \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043c \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0444\u0430\u0439\u043b src\/assets\/main.css \u0438 \u043e\u0447\u0438\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700&amp;amp;display=swap');  :root {   --font-family: 'Montserrat', sans-serif; }  * {   font-family: var(--font-family); }  body, html {   font-family: 'Montserrat', sans-serif; }  .container {   max-width: 600px;   margin: 2rem auto;   padding: 2rem;   background-color: #ffffff;   border-radius: 1rem;   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);   text-align: center; } <\/code><\/pre>\n<p>\u041f\u043e\u043b\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435. \u0412\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0432 \u043f\u043e\u043b\u043d\u043e\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043c\u043e\u0435\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435 <a href=\"https:\/\/t.me\/PythonPathMaster\">\u00ab\u041b\u0435\u0433\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0432 Python\u00bb<\/a> (\u044d\u0442\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e).<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438<\/h3>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<ul>\n<li>\n<p><strong>\u0413\u043b\u0430\u0432\u043d\u0430\u044f<\/strong>: \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0444\u043e\u0440\u043c\u043e\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0447\u0430\u0442\u0430<\/strong>: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0431\u043c\u0435\u043d\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b src\/App.vue, \u043f\u0440\u0438\u0432\u0435\u0434\u044f \u0435\u0433\u043e \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n<pre><code class=\"typescript\">&lt;script setup lang=\"ts\"&gt;&lt;\/script&gt;  &lt;template&gt;   &lt;div class=\"app-container\"&gt;     &lt;router-view \/&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;style&gt; \/* \u0421\u0442\u0438\u043b\u0438 \u0443\u043f\u0443\u0449\u0435\u043d\u044b \u0434\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438 *\/ &lt;\/style&gt;<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e `&lt;router-view&gt;` \u0443\u0436\u0435 \u0431\u044b\u043b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u0434\u0432\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432. \u041e\u043d\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 src\/views\/. \u0423 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0442\u0430\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u2014 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0438 \u0443\u0431\u0435\u0440\u0451\u043c \u043b\u0438\u0448\u043d\u0435\u0435.<\/p>\n<p>\u041f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043c \u0444\u0430\u0439\u043b HomeView.vue \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">&lt;script setup lang=\"ts\"&gt;&lt;\/script&gt;  &lt;template&gt;   &lt;div&gt;     &lt;h1&gt;Home View&lt;\/h1&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>\u042f \u0443\u0431\u0440\u0430\u043b \u0432\u0441\u0451 \u043b\u0438\u0448\u043d\u0435\u0435 \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0430\u043a\u043e\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c ChatView.vue \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"typescript\">&lt;script setup lang=\"ts\"&gt;&lt;\/script&gt;  &lt;template&gt;   &lt;div&gt;     &lt;h1&gt;Chat View&lt;\/h1&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b AboutView.vue \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432<\/h3>\n<p>\u0412\u043d\u0435\u0441\u0435\u043c \u043f\u0440\u0430\u0432\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b src\/router\/index.ts, \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0432 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b:<\/p>\n<pre><code class=\"javascript\">import { createRouter, createWebHistory } from 'vue-router' import ChatView from '..\/views\/ChatView.vue' import HomeView from '..\/views\/HomeView.vue'  const router = createRouter({   history: createWebHistory(import.meta.env.BASE_URL),   routes: [     {       path: '\/',       name: 'home',       component: HomeView,     },     {       path: '\/chat',       name: 'chat',       component: ChatView,     },   ], })  export default router<\/code><\/pre>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0445 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u041f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 API<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043d\u0430\u0448\u0438\u043c \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0438 Centrifugo. \u0411\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0444\u0430\u0439\u043b\u043e\u043c src\/services\/api.ts.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 URL-\u0430\u0434\u0440\u0435\u0441\u043e\u0432<\/h3>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0434\u0432\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API:<\/p>\n<pre><code class=\"typescript\">export const BASE_SITE: string = 'https:\/\/back_url.com' export const CENTRIFUGO_URL: string =   'wss:\/\/centrifugo_url\/connection\/websocket'<\/code><\/pre>\n<p>\u0413\u0434\u0435:<\/p>\n<ul>\n<li>\n<p><strong>BASE_SITE <\/strong>\u2013 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0432\u0430\u0448 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434<\/p>\n<\/li>\n<li>\n<p><strong>CENTRIFUGO_URL<\/strong> \u2013 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a Centrifugo \u043f\u043e WebSocket<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p><strong>\u0412\u0430\u0436\u043d\u043e:<\/strong> \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u043b\u0438 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0435 <a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\">Amvera<\/a>, \u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 URL \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435. \u0412 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 wss \u043d\u0430 ws, \u0430 centrifugo_url \u043d\u0430 IP-\u0430\u0434\u0440\u0435\u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<\/blockquote>\n<h3>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043a\u043e\u043c\u043d\u0430\u0442\u044b<\/h3>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043d\u0430\u0442\u0443 \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 Redis:<\/p>\n<pre><code class=\"javascript\">export const clearRoom = async (originalRoom: string): Promise&lt;void&gt; =&gt; {   try {     const response = await fetch(       `${BASE_SITE}\/api\/clear_room\/${originalRoom}`,       {         method: 'POST',         headers: { 'Content-Type': 'application\/json' },       }     )      if (!response.ok) {       throw new Error(`\u041e\u0448\u0438\u0431\u043a\u0430 HTTP: ${response.status}`)     }   } catch (error) {     console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0435 \u043a\u043e\u043c\u043d\u0430\u0442\u044b:', error)   } }<\/code><\/pre>\n<p><strong>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/strong> \u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b \u0432 <a href=\"https:\/\/habr.com\/ru\/companies\/amvera\/articles\/890976\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a>. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0432 Redis.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0432\u0438\u0434\u043d\u043e, \u043a\u0430\u043a \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0431\u044d\u043a\u0435\u043d\u0434 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 Centrifugo: \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/h3>\n<p>\u0425\u043e\u0447\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432 Centrifugo. \u041d\u0430\u043f\u043e\u043c\u043d\u044e \u043e\u0431\u0449\u0438\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b:<\/p>\n<p>Centrifugo \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <strong>\u043a\u0430\u043d\u0430\u043b\u044b<\/strong> \u2014 \u044d\u0442\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f. \u0412\u0441\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438, \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 \u044d\u0442\u043e\u043c \u043a\u0430\u043d\u0430\u043b\u0435.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435:<\/p>\n<ol>\n<li>\n<p>\u041a\u0430\u043d\u0430\u043b \u2014 \u044d\u0442\u043e \u043d\u0430\u0448 \u0447\u0430\u0442<\/p>\n<\/li>\n<li>\n<p>\u0423\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u043a\u0430\u043d\u0430\u043b\u0430 \u2014 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c 2 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 (+ \u0441\u0438\u0441\u0442\u0435\u043c\u0430)<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u0431\u043c\u0435\u043d\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438: <\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0438\u0448\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041e\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 Centrifugo<\/p>\n<\/li>\n<li>\n<p>Centrifugo \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u043c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c \u043a\u0430\u043d\u0430\u043b\u0430<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>\u041d\u0435 \u0432\u0430\u0436\u043d\u043e, \u043a\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u043a\u0430\u043d\u0430\u043b \u2014 \u0432\u0430\u0436\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u0435\u0433\u043e \u0443\u0432\u0438\u0434\u044f\u0442 \u0432\u0441\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438.<\/p>\n<h3>\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432, \u0432 \u0447\u0430\u0442\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c <strong>\u0421\u0438\u0441\u0442\u0435\u043c\u0430<\/strong>. \u041e\u043d\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u043b\u0438 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u0442\u043e-\u0442\u043e \u043f\u043e\u043a\u0438\u043d\u0443\u043b \u0447\u0430\u0442.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439:<\/p>\n<pre><code class=\"typescript\">export const sendSystemMessage = async (   message: string,   room: string,   user_id: number ) =&gt; {   try {     await fetch(`${BASE_SITE}\/api\/send-msg\/${room}`, {       method: 'POST',       headers: {         'Content-Type': 'application\/json',       },       body: JSON.stringify({         sender: '\u0421\u0438\u0441\u0442\u0435\u043c\u0430',         user_id: user_id,         message: message,       }),     })   } catch (error) {     console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f:', error)   } }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442:<\/strong> Centrifugo \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u0430\u043d\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a \u043d\u0435\u043c\u0443 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043b\u0441\u044f \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0434\u0438\u043d \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0442\u0443\u0434\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>\u042d\u0442\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 Centrifugo: \u0443\u043a\u0430\u0437\u0430\u0432 ID \u043a\u0430\u043d\u0430\u043b\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0443\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0441. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u043a\u0430\u043d\u0430\u043b (\u043d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043a\u0430\u043d\u0430\u043b).<\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043c\u0435\u0442\u043e\u0434 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u043c\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043e view-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0447\u0430\u0442\u0430. \u0422\u0430\u043c \u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u043a\u0430\u043d\u0430\u043b.<\/p>\n<h3>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041d\u0430\u0439\u0442\u0438 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430\u00bb:<\/p>\n<pre><code class=\"typescript\">export interface PartnerSearchParams {   id: number   gender: string   age_from: number | null   age_to: number | null }  export interface PartnerSearchResponse {   status: 'matched' | 'waiting'   room_key?: string   partner?: {     id: number     name: string     \/\/ \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u044f \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0430 \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438   }   message?: string   token?: string }  export const findPartner = async (   params: PartnerSearchParams ): Promise&lt;PartnerSearchResponse&gt; =&gt; {   try {     const response = await fetch(`${BASE_SITE}\/api\/find-partner`, {       method: 'POST',       headers: {         'Content-Type': 'application\/json',       },       body: JSON.stringify(params),     })      if (!response.ok) {       throw new Error(`\u041e\u0448\u0438\u0431\u043a\u0430: ${response.status}`)     }      return await response.json()   } catch (error) {     console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0430:', error)     throw error   } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u043e\u0432\u043e\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c TypeScript \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u043c.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 API-\u0441\u043b\u043e\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0438 Centrifugo.<\/p>\n<h2>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0447\u0430\u0442-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042f \u0440\u0435\u0448\u0438\u043b \u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0435 \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0442\u0435\u0440\u044f\u043b\u0430\u0441\u044c \u043d\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u043e \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u0434\u0435\u043b\u0438\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c (views).<\/p>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u043f\u0430\u043f\u043a\u043e\u0439 src\/components. \u0422\u0430\u043c \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<ul>\n<li>\n<p><strong>ActionButtons.vue<\/strong>: \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0438\u0448\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u00ab\u041e\u0442\u043c\u0435\u043d\u0430\u00bb \u0438 \u00ab\u0417\u0430\u043a\u0440\u044b\u0442\u044c\u00bb<\/p>\n<\/li>\n<li>\n<p><strong>AppLoader.vue<\/strong>: \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a (\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0447\u0430\u0441\u044b), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0430\u0448\u0435\u0433\u043e MiniApp \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p><strong>LoadingIndicator.vue<\/strong>: \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u043e\u0438\u0441\u043a\u0430)<\/p>\n<\/li>\n<li>\n<p><strong>SearchForm.vue<\/strong>: \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u0443\u0436\u0435 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 (views).<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0421\u0442\u0438\u043b\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ActionButtons.vue<\/h3>\n<pre><code class=\"typescript\">&lt;script setup lang=\"ts\"&gt; defineProps({   primaryText: {     type: String,     required: true,   },   secondaryText: {     type: String,     required: true,   }, }) const emit = defineEmits(['primary-click', 'secondary-click']) &lt;\/script&gt;  &lt;template&gt;   &lt;div class=\"buttons-container\"&gt;     &lt;button class=\"btn-primary\" @click=\"emit('primary-click')\"&gt;       {{ primaryText }}     &lt;\/button&gt;     &lt;button class=\"btn-secondary\" @click=\"emit('secondary-click')\"&gt;       {{ secondaryText }}     &lt;\/button&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;style scoped&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438 \u0432\u0442\u043e\u0440\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0439. \u0417\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438 \u044d\u043c\u0438\u0442\u043e\u0432. \u041f\u0440\u043e\u043f\u0441\u044b (primaryText \u0438 secondaryText) \u043d\u0443\u0436\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0447\u0435\u0440\u0435\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f) \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a. \u042d\u043c\u0438\u0442\u044b (primary-click \u0438 secondary-click) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 AppLoader.vue<\/h3>\n<pre><code class=\"typescript\">&lt;script setup lang=\"ts\"&gt; import { onMounted, ref } from 'vue'  const emit = defineEmits(['loaded']) const progress = ref(0)  onMounted(() =&gt; {   const interval = setInterval(() =&gt; {     if (progress.value &lt; 100) {       progress.value += 5     } else {       clearInterval(interval)       setTimeout(() =&gt; {         emit('loaded')       }, 200)     }   }, 20) }) &lt;\/script&gt;  &lt;template&gt;   &lt;div class=\"loader-container\"&gt;     &lt;div class=\"loader-content\"&gt;       &lt;div class=\"clock-loader\"&gt;         &lt;div class=\"clock\"&gt;           &lt;div class=\"hand hour-hand\"&gt;&lt;\/div&gt;           &lt;div class=\"hand minute-hand\"&gt;&lt;\/div&gt;         &lt;\/div&gt;       &lt;\/div&gt;       &lt;div class=\"loading-text\"&gt;\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f...&lt;\/div&gt;       &lt;div class=\"progress-bar\"&gt;         &lt;div class=\"progress\" :style=\"{ width: `${progress}%` }\"&gt;&lt;\/div&gt;       &lt;\/div&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;style scoped&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0432\u0438\u0434\u0435 \u0447\u0430\u0441\u043e\u0432 \u0441 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u043e\u043c. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0445\u0443\u043a\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 onMounted() \u2014 \u043e\u043d \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0430\u0439\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 progress \u043e\u0442 0 \u0434\u043e 100%. \u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 100%, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044d\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 loaded, \u0441\u0438\u0433\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 LoadingIndicator.vue<\/h3>\n<pre><code class=\"typescript\">&lt;script setup lang=\"ts\"&gt; defineProps({   message: {     type: String,     default: '\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...',   }, }) &lt;\/script&gt;  &lt;template&gt;   &lt;div class=\"loader-container\"&gt;     &lt;div class=\"loader\"&gt;       &lt;div class=\"dot\"&gt;&lt;\/div&gt;       &lt;div class=\"dot\"&gt;&lt;\/div&gt;       &lt;div class=\"dot\"&gt;&lt;\/div&gt;       &lt;div class=\"dot\"&gt;&lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=\"status-message\"&gt;{{ message }}&lt;\/div&gt;     &lt;slot&gt;&lt;\/slot&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;style scoped&gt; \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430 *\/ &lt;\/style&gt;<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u043c, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438. \u0412 \u043d\u0451\u043c \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u0441 <code>message<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u0441\u043b\u043e\u0442. \u042d\u0442\u043e\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 SearchForm.vue<\/h3>\n<pre><code class=\"typescript\">&lt;script setup lang=\"ts\"&gt; import { findPartner } from '@\/services\/api' import { ref } from 'vue' import ActionButtons from '.\/ActionButtons.vue'  const props = defineProps({   gender: {     type: String,     required: true,   },   ageFrom: {     type: Number,     default: null,   },   ageTo: {     type: Number,     default: null,   },   userId: {     \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c props \u0434\u043b\u044f ID \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f     type: Number,     required: true,   }, })  const emit = defineEmits([   'update:gender',   'update:ageFrom',   'update:ageTo',   'find',   'close',   'partner-found',   'waiting', ])  const isLoading = ref(false) const error = ref('')  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u043f\u043e\u0438\u0441\u043a \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0430 async function findPartnerHandler() {   isLoading.value = true   error.value = ''    try {     const data = await findPartner({       id: props.userId,       gender: props.gender,       age_from: props.ageFrom,       age_to: props.ageTo,     })      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0442\u0432\u0435\u0442\u0430     if (data.status === 'matched') {       emit('partner-found', {         roomKey: data.room_key,         partner: data.partner,         token: data.token,       })     } else if (data.status === 'waiting') {       emit('waiting', {         roomKey: data.room_key,         message: data.message,         token: data.token,       })     }      emit('find', data)   } catch (err) {     error.value =       err instanceof Error         ? err.message         : '\u041f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0430'     console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0430:', err)   } finally {     isLoading.value = false   } } &lt;\/script&gt;  &lt;template&gt;   &lt;div class=\"form-container\"&gt;     &lt;div v-if=\"error\" class=\"error-message\"&gt;{{ error }}&lt;\/div&gt;      &lt;div class=\"form-group\"&gt;       &lt;label for=\"gender\"&gt;\u041f\u043e\u043b:&lt;\/label&gt;       &lt;select         id=\"gender\"         :value=\"gender\"         @input=\"           emit('update:gender', ($event.target as HTMLSelectElement).value)         \"         class=\"form-control\"         :disabled=\"isLoading\"       &gt;         &lt;option value=\"any\"&gt;\u041d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c&lt;\/option&gt;         &lt;option value=\"man\"&gt;\u041c\u0443\u0436\u0441\u043a\u043e\u0439&lt;\/option&gt;         &lt;option value=\"woman\"&gt;\u0416\u0435\u043d\u0441\u043a\u0438\u0439&lt;\/option&gt;       &lt;\/select&gt;     &lt;\/div&gt;      &lt;div class=\"form-group\"&gt;       &lt;label&gt;\u0412\u043e\u0437\u0440\u0430\u0441\u0442:&lt;\/label&gt;       &lt;div class=\"age-range\"&gt;         &lt;input           type=\"number\"           :value=\"ageFrom\"           @input=\"             emit(               'update:ageFrom',               ($event.target as HTMLInputElement).value                 ? parseInt(($event.target as HTMLInputElement).value)                 : null             )           \"           class=\"form-control\"           placeholder=\"\u041e\u0442\"           :disabled=\"isLoading\"         \/&gt;          &lt;input           type=\"number\"           :value=\"ageTo\"           @input=\"             emit(               'update:ageTo',               ($event.target as HTMLInputElement).value                 ? parseInt(($event.target as HTMLInputElement).value)                 : null             )           \"           class=\"form-control\"           placeholder=\"\u0414\u043e\"           :disabled=\"isLoading\"         \/&gt;       &lt;\/div&gt;     &lt;\/div&gt;      &lt;ActionButtons       primary-text=\"\u041d\u0430\u0439\u0442\u0438 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430\"       secondary-text=\"\u0417\u0430\u043a\u0440\u044b\u0442\u044c\"       @primary-click=\"findPartnerHandler\"       @secondary-click=\"emit('close')\"       :primary-disabled=\"isLoading\"       :primary-loading=\"isLoading\"     \/&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;style scoped&gt; \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b *\/ &lt;\/style&gt;<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445. \u041e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438 \u043f\u043e \u043f\u043e\u043b\u0443 \u0438 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ol>\n<li>\n<p><strong>\u041f\u0440\u043e\u043f\u0441\u044b \u0438 \u044d\u043c\u0438\u0442\u044b<\/strong>: \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b \u0438 ID \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u0441\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043b\u044f \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/strong>: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f isLoading \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u043e\u0440\u043c\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a<\/strong>: \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u0438 \u043f\u043e\u0438\u0441\u043a\u0435 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430<\/strong>: \u041c\u0435\u0442\u043e\u0434 findPartnerHandler() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 API-\u0444\u0443\u043d\u043a\u0446\u0438\u044e findPartner() \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438, \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u043e\u0442\u0432\u0435\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 matched \u044d\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 partner-found \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0435<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 waiting \u044d\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 waiting, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043d\u0430 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0430<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong>: \u0424\u043e\u0440\u043c\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ActionButtons \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044f\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430<\/strong>: \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0430\u0442\u0442\u0435\u0440\u043d &#171;props down, events up&#187;, \u0433\u0434\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u044f update:*.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<ul>\n<li>\n<p>ActionButtons \u2014 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>AppLoader \u2014 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>LoadingIndicator \u2014 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>SearchForm \u2014 \u0444\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f (views) \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.<\/p>\n<h2>\u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434 MiniApp<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0435 VueJS 3 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 Telegram MiniApp \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u043e\u043c. \u042d\u0442\u043e \u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0442\u0438\u043b\u044f\u043c \u0438 API Telegram, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430.<\/p>\n<h3>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 Telegram Web App API<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 Telegram Web App \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043d\u043e\u0441\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b index.html, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html&gt; &lt;html lang=\"\"&gt;   &lt;head&gt;     &lt;meta charset=\"UTF-8\" \/&gt;     &lt;link rel=\"icon\" href=\"\/favicon.ico\" \/&gt;     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;     &lt;script src=\"https:\/\/telegram.org\/js\/telegram-web-app.js\"&gt;&lt;\/script&gt;     &lt;title&gt;Chat Tet@Tet&lt;\/title&gt;   &lt;\/head&gt;   &lt;body&gt;     &lt;div id=\"app\"&gt;&lt;\/div&gt;     &lt;script type=\"module\" src=\"\/src\/main.ts\"&gt;&lt;\/script&gt;   &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0435\u0433  \u00a0<code>&lt;script src=\"<\/code><a href=\"https:\/\/telegram.org\/js\/telegram-web-app.js&quot;&gt;&lt;\/script&gt;\"><code>https:\/\/telegram.org\/js\/telegram-web-app.js\"&gt;&lt;\/script&gt;<\/code><\/a> \u0432 \u0441\u0435\u043a\u0446\u0438\u044e head, \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Telegram Web App, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a API \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430.<\/p>\n<h3>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f MiniApp<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Telegram \u0431\u043e\u0442\u0430, \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0451\u0442 \u0435\u0433\u043e \u043a\u0430\u043a MiniApp \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c\u0443 \u0441\u043a\u0440\u0438\u043f\u0442\u0443. \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u043d\u0430\u043c \u0440\u044f\u0434 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p><strong>\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/strong>: \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043d\u0438, \u043b\u043e\u0433\u0438\u043d\u0430, ID, \u0430\u0432\u0430\u0442\u0430\u0440\u0430, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Telegram<\/strong>: \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430<\/p>\n<\/li>\n<li>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0435 JavaScript \u043c\u0435\u0442\u043e\u0434\u044b<\/strong>: \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439, \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0430\u043c\u0435\u0440\u043e\u0439 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0438\u043b\u0438 Telegram<\/strong>: \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u0440\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430 \u0434\u043b\u044f \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0431\u043e\u0442\u043e\u043c<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043d\u0430\u0448\u0435 VueJS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0431\u043e\u0442\u043e\u043c Telegram. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0431\u044d\u043a\u0435\u043d\u0434\u0443 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0444\u0430\u0439\u043b .env:<\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0439\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e FRONT_URL<\/p>\n<\/li>\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0442\u0443\u043d\u043d\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0440\u0430\u043d\u0435\u0435<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code>FRONT_URL=https:\/\/va920h-85-175-194-59.ru.tuna.am <\/code><\/pre>\n<p>\u042d\u0442\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0431\u043e\u0442\u0430. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"python\">def main_user_kb(user_id: int, sender: str) -&amp;gt; InlineKeyboardMarkup:     kb = InlineKeyboardBuilder()     kb.button(text=\"\ud83d\udc64 \u041c\u043e\u0439 \u043f\u0440\u043e\u0444\u0438\u043b\u044c\", callback_data=\"my_profile\")     kb.button(text=\"\u2139\ufe0f \u041e \u043d\u0430\u0441\", callback_data=f\"about_us_{sender}\")     url = f\"{settings.FRONT_URL}?user_id={user_id}&amp;amp;sender={sender}\"     kb.button(text=\"\ud83d\udcac \u0427\u0430\u0442 \u0422\u0435\u0442-\u0430-\u0442\u0435\u0442\", web_app=WebAppInfo(url=url))     kb.adjust(1)     return kb.as_markup() <\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>URL \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 user_id \u0438 sender<\/p>\n<\/li>\n<li>\n<p>user_id \u2014 \u044d\u0442\u043e Telegram ID \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>sender \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u043d\u0438\u043a\u043d\u0435\u0439\u043c)<\/p>\n<\/li>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0430 \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044a\u0435\u043a\u0442 WebAppInfo, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u0434\u043b\u044f MiniApp \u0432 Telegram<\/p>\n<\/li>\n<\/ul>\n<h3>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u0435\u043f\u043b\u043e\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0438\u0441 <a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\">Amvera Cloud<\/a> (\u043a\u0430\u043a \u044f \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435), \u0442\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e:<\/p>\n<ol>\n<li>\n<p>\u0417\u0430\u0439\u0442\u0438 \u0432 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u00ab\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439\u00bb<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b .env \u043d\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441 \u043d\u043e\u0432\u044b\u043c FRONT_URL<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c\u00bb<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a2f\/067\/3c4\/a2f0673c4e91c72f93103fc9aea98416.png\" width=\"1471\" height=\"107\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a2f\/067\/3c4\/a2f0673c4e91c72f93103fc9aea98416.png\"\/><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f Telegram MiniApp. \u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0431\u0443\u0434\u0435\u043c \u0432\u0435\u0441\u0442\u0438 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u044d\u0442\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n<h3>\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0441 Telegram, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 Telegram<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c Theme API \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u043a \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0442\u0435\u043c\u0435<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Telegram \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0445 \u043c\u044b \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 (views) \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0435\u0439 Telegram API \u0432 \u043d\u0430\u0448 \u043a\u043e\u0434.<\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0444\u0430\u0439\u043b\u043e\u043c App.vue.<\/h3>\n<p>\u0424\u0430\u0439\u043b src\/App.vue \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u0441\u0431\u043e\u0440\u043a\u0438 VueJS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0442\u0430\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u0449\u0438\u0435 \u0431\u043b\u043e\u043a\u0438 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n<p>\u0417\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u043c\u044b \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">&lt;script setup lang=\"ts\"&gt; import { onMounted, ref } from 'vue' import { useMiniApp } from 'vue-tg' import AppLoader from '.\/components\/AppLoader.vue' const isLoading = ref(true) const handleLoaded = () =&gt; {   isLoading.value = false }  const miniApp = useMiniApp()  const initializeTelegramAds = () =&gt; {   miniApp.ready() }  onMounted(() =&gt; {   initializeTelegramAds() }) &lt;\/script&gt;  &lt;template&gt;   &lt;div class=\"app-container\"&gt;     &lt;AppLoader v-if=\"isLoading\" @loaded=\"handleLoaded\" \/&gt;     &lt;div v-show=\"!isLoading\" class=\"container\"&gt;       &lt;router-view \/&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/template&gt;  &lt;style&gt;&lt;\/style&gt;<\/code><\/pre>\n<p>\u0422\u0443\u0442 \u043c\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u0430\u0436\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443:<\/p>\n<pre><code class=\"typescript\">const miniApp = useMiniApp()  const initializeTelegramAds = () =&gt; {   miniApp.ready() }<\/code><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434 miniApp.ready() \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 <a href=\"https:\/\/richads.com\/publishers\/telegram\/?utm_source=alexey&amp;utm_medium=pr&amp;utm_campaign=tg_publishers&amp;utm_content=habr\">RichAds<\/a>, \u043c\u044b \u0435\u0449\u0451 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<h4>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0444\u0430\u0439\u043b\u043e\u043c HomeView.vue<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0443, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u043c\u0443 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u2014 src\/views\/HomeView.vue. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u0434\u043d\u043e \u0438\u0437 \u0434\u0432\u0443\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 (\u0441\u0442\u0440\u0430\u043d\u0438\u0446) \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0438\u0433\u0440\u0430\u0435\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u0443\u044e \u0440\u043e\u043b\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u043e\u0434\u0431\u043e\u0440\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u041d\u0430\u0439\u0442\u0438 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430\u00bb \u0438 \u00ab\u0417\u0430\u043a\u0440\u044b\u0442\u044c\u00bb. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u00ab\u041c\u044b \u0438\u0449\u0435\u043c \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430\u00bb.<\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u0442\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<h4>\u041b\u043e\u0433\u0438\u043a\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438<\/h4>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041d\u0430\u0439\u0442\u0438 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430\u00bb \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0434\u0432\u0430 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f:<\/p>\n<ol>\n<li>\n<p><strong>\u041c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0447\u0430\u0442\u0443<\/strong>, \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u043e\u0436\u0438\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0440\u0435\u0436\u0438\u043c \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f<\/strong>, \u0435\u0441\u043b\u0438 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u043d\u0435\u0442.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u044b\u0445\u043e\u0434 \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0442\u0440\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432:<\/p>\n<ol>\n<li>\n<p><strong>\u0421\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a \u043d\u0430\u0439\u0434\u0435\u043d<\/strong> \u2014 \u0442\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0447\u0430\u0442\u0443.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b \u00ab\u041e\u0442\u043c\u0435\u043d\u0430\u00bb<\/strong> \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0435\u0433\u043e \u043a \u044d\u043a\u0440\u0430\u043d\u0443 \u043f\u043e\u0434\u0431\u043e\u0440\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b \u00ab\u0417\u0430\u043a\u0440\u044b\u0442\u044c\u00bb<\/strong> \u2014 \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 MiniApp.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0430\u0436\u043d\u044b\u0439 \u043d\u044e\u0430\u043d\u0441: \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u00ab\u041e\u0442\u043c\u0435\u043d\u0430\u00bb \u0438\u043b\u0438 \u00ab\u0417\u0430\u043a\u0440\u044b\u0442\u044c\u00bb \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043a\u043e\u043c\u043d\u0430\u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f, \u0430 \u0435\u0441\u043b\u0438 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a \u0431\u044b\u043b \u043d\u0430\u0439\u0434\u0435\u043d, \u0435\u0451 \u0441\u0442\u0430\u0442\u0443\u0441 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 Matched, \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u043d\u0435\u0439 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043d\u0430\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u0442\u044c \u0443\u0434\u0430\u043b\u0435\u043d\u0430.<\/p>\n<h4>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0431\u043b\u043e\u043a\u0430 <code>&lt;script setup lang=\"ts\"&gt;<\/code>, \u0433\u0434\u0435 \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b:<\/p>\n<pre><code class=\"typescript\">import { ref, onMounted, inject } from 'vue' import SearchForm from '@\/components\/SearchForm.vue' import LoadingIndicator from '@\/components\/LoadingIndicator.vue' import ActionButtons from '@\/components\/ActionButtons.vue' import { useRouter, useRoute } from 'vue-router' import { useMiniApp } from 'vue-tg' import { BASE_SITE } from '@\/services\/api'<\/code><\/pre>\n<h3>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0444\u043e\u0440\u043c\u044b \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u043e\u0438\u0441\u043a\u0430:<\/p>\n<pre><code class=\"typescript\">const { close } = useMiniApp() const router = useRouter() const route = useRoute()  \/\/ \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0438\u0441\u043a\u0430 const gender = ref('any') const ageFrom = ref&lt;number | null&gt;(18) const ageTo = ref&lt;number | null&gt;(120)  \/\/ \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 const isLoading = ref(false) const searchStatus = ref&lt;'idle' | 'searching' | 'matched' | 'error'&gt;('idle') const searchError = ref('') const roomKey = ref('') const partnerInfo = ref&lt;any&gt;(null) const userToken = ref('')  const currentUserId = parseInt(route.query.user_id as string) const sender = route.query.sender as string  \/\/ \u0422\u0430\u0439\u043c\u0435\u0440 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043a\u043e\u043c\u043d\u0430\u0442\u044b let statusCheckInterval: number | null = null<\/code><\/pre>\n<h3>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c \u043f\u043e\u0438\u0441\u043a\u0430<\/h3>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f findCompanion \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0438\u0441\u043a\u0430, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0441\u0442\u0430\u0442\u0443\u0441:<\/p>\n<pre><code class=\"typescript\">const findCompanion = () =&gt; {   isLoading.value = true   searchStatus.value = 'searching' }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u043f\u043e\u0438\u0441\u043a\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f handlePartnerFound, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u0438 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0447\u0430\u0442:<\/p>\n<pre><code class=\"typescript\">const handlePartnerFound = (data: any) =&gt; {   console.log('\u041f\u0430\u0440\u0442\u043d\u0435\u0440 \u043d\u0430\u0439\u0434\u0435\u043d:', data)   isLoading.value = false   searchStatus.value = 'matched'   roomKey.value = data.roomKey   partnerInfo.value = data.partner   userToken.value = data.token    router.push({     path: '\/chat',     query: {       room: roomKey.value,       token: userToken.value,       user_id: currentUserId,       sender: sender,     },   })    clearStatusCheckInterval() }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"typescript\">const handleWaiting = (data: any) =&gt; {   console.log('\u041e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0430:', data)   isLoading.value = true   searchStatus.value = 'searching'   roomKey.value = data.roomKey   userToken.value = data.token    startStatusCheck() }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f startStatusCheck \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043d\u0430\u0442\u044b:<\/p>\n<pre><code class=\"typescript\">const startStatusCheck = () =&gt; {   clearStatusCheckInterval()   statusCheckInterval = window.setInterval(checkRoomStatus, 1000) }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f checkRoomStatus \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0440\u044b:<\/p>\n<pre><code class=\"typescript\">const checkRoomStatus = async () =&gt; {   try {     const response = await fetch(       `${BASE_SITE}\/api\/room-status?key=${roomKey.value}&amp;user_id=${currentUserId}`     )      if (!response.ok) {       throw new Error(`\u041e\u0448\u0438\u0431\u043a\u0430: ${response.status}`)     }      const data = await response.json()      if (data.status === 'matched') {       clearStatusCheckInterval()       handlePartnerFound({         roomKey: roomKey.value,         partner: data.partner,         token: userToken.value,       })     } else if (data.status === 'closed' || data.status === 'expired') {       clearStatusCheckInterval()       isLoading.value = false       searchStatus.value = 'idle'       searchError.value = '\u0412\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0438\u0441\u0442\u0435\u043a\u043b\u043e. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0441\u043d\u043e\u0432\u0430.'     }   } catch (error) {     console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043a\u043e\u043c\u043d\u0430\u0442\u044b:', error)   } }<\/code><\/pre>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u043e\u043f\u0440\u043e\u0441\u0435 (polling). \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043a\u043e\u043c\u043d\u0430\u0442\u044b. \u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u0443\u0441 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 Matched, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a \u0447\u0430\u0442\u0443.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0439. \u0412\u043c\u0435\u0441\u0442\u043e \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u0440\u043e\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong>\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c<\/strong> \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Centrifugo, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u0430 \u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<h4>\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0430 Centrifugo<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441 <strong>Centrifugo<\/strong>, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0431\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ol>\n<li>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043d\u0430\u043b Centrifugo, \u043e\u0436\u0438\u0434\u0430\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e \u043d\u043e\u0432\u043e\u043c \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u0442 \u043a\u0430\u043d\u0430\u043b, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u044d\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e, \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u0430\u043d\u0430\u043b\u0430, \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0438\u0441\u043a\u0430, \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u0432 \u0447\u0430\u0442.<\/p>\n<\/li>\n<\/ol>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u0432\u044b\u0431\u0440\u0430\u043b polling?<\/h4>\n<p>\u0425\u043e\u0442\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0447\u0435\u0440\u0435\u0437 Centrifugo \u0434\u0430\u0435\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0432 \u0431\u044b\u0441\u0442\u0440\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0438 \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 (\u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b), \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u044f \u0432\u044b\u0431\u0440\u0430\u043b polling. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 WebSockets \u0438\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439) \u043e\u043d \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u043f\u043e\u043b\u043d\u0435 \u0440\u0430\u0431\u043e\u0447\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c.<\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0435\u0441\u043b\u0438 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043e\u0442\u043a\u043b\u0438\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 WebSockets \u0447\u0435\u0440\u0435\u0437 Centrifugo, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<h4>\u0428\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<pre><code class=\"typescript\">&lt;template&gt;   &lt;h1 class=\"title\"&gt;\u041f\u043e\u0438\u0441\u043a \u0421\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430&lt;\/h1&gt;   &lt;div class=\"content\"&gt;     &lt;!-- \u0424\u043e\u0440\u043c\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 --&gt;     &lt;SearchForm       v-if=\"!isLoading\"       v-model:gender=\"gender\"       v-model:ageFrom=\"ageFrom\"       v-model:ageTo=\"ageTo\"       :userId=\"currentUserId\"       @find=\"findCompanion\"       @partner-found=\"handlePartnerFound\"       @waiting=\"handleWaiting\"       @close=\"closeSearch\"     \/&gt;      &lt;!-- \u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --&gt;     &lt;LoadingIndicator       v-if=\"isLoading\"       :message=\"         searchStatus === 'searching'           ? '\u0418\u0449\u0435\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430...'           : '\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0447\u0430\u0442\u0443...'       \"     &gt;       &lt;p v-if=\"searchError\" class=\"error-message\"&gt;{{ searchError }}&lt;\/p&gt;       &lt;ActionButtons         primary-text=\"\u041e\u0442\u043c\u0435\u043d\u0438\u0442\u044c\"         secondary-text=\"\u0417\u0430\u043a\u0440\u044b\u0442\u044c\"         @primary-click=\"cancelSearch\"         @secondary-click=\"closeSearch\"       \/&gt;     &lt;\/LoadingIndicator&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 HomeView.vue \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0447\u0430\u0442. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0447\u0430\u0442\u0430 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439.<\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0444\u0430\u0439\u043b\u043e\u043c ChatView.vue<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0447\u0430\u0442\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 ChatView.vue. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Centrifugo \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0447\u0430\u0442\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 (\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0430\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043d\u0435\u0442, \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e).<\/p>\n<h3>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/h3>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u043d\u0443\u0436\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">import IconSend from '@\/components\/icons\/IconSend.vue' import {   BASE_SITE,   CENTRIFUGO_URL,   clearRoom,   sendSystemMessage, } from '@\/services\/api' import { Centrifuge } from 'centrifuge' import { nextTick, onMounted, onUnmounted, ref, computed } from 'vue' import { useRoute, useRouter } from 'vue-router' import { useMiniApp } from 'vue-tg'<\/code><\/pre>\n<h4>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439<\/h4>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f token, user_id \u0438 room, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0441 Centrifugo \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439:<\/p>\n<pre><code class=\"typescript\">const { close } = useMiniApp() const router = useRouter() const route = useRoute()  const route_query = route.query const token = route_query.token as string const user_id = route_query.user_id as string const sender = route_query.sender const originalRoom = route.query.room as string const room = originalRoom.replace('chat_room:', '')<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0447\u0430\u0442\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<pre><code class=\"typescript\">const messages = ref&lt;   { sender: string; text: string; type?: 'system' | 'user' }[] &gt;([]) const newMessage = ref('') const inputRef = ref(null)<\/code><\/pre>\n<h4>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a Centrifugo<\/h4>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 Centrifuge, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 URL \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 token \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 \u0441\u0441\u044b\u043b\u043a\u0443:<\/p>\n<pre><code class=\"typescript\">const centrifuge = new Centrifuge(CENTRIFUGO_URL, { token: token }) <\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u043a\u0430\u043d\u0430\u043b \u043a\u043e\u043c\u043d\u0430\u0442\u044b:<\/p>\n<pre><code class=\"typescript\">let sub: ReturnType&lt;typeof centrifuge.newSubscription&gt;  const initializeSubscription = () =&gt; {   sub = centrifuge.newSubscription(room)   sub.on('publication', (ctx) =&gt; {     const data = JSON.parse(ctx.data)      if (data.user_id !== parseInt(user_id)) {       receiveMessage(         data.sender,         data.message,         data.sender === '\u0421\u0438\u0441\u0442\u0435\u043c\u0430' ? 'system' : 'user'       )     }      console.log('Received publication:', data)   })   sub.subscribe()    sendSystemMessage(     `\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c ${sender} \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043b\u0441\u044f \u043a \u0447\u0430\u0442\u0443`,     room,     parseInt(user_id)   ) }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 \u043a\u0430\u043d\u0430\u043b \u2014 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0441\u043b\u0435\u0434\u043e\u043c \u043a \u043a\u0430\u043d\u0430\u043b\u0443 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u043d\u0430\u043b.<\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0441\u044f \u043a \u0447\u0430\u0442\u0443, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u0443\u0434\u0430, \u043d\u043e \u0432\u043e\u0442 \u043a\u043e\u0433\u0434\u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u2014 \u0432\u0441\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0447\u0430\u0442\u0430 \u0443\u0432\u0438\u0434\u044f\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u0416\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h3>\n<p>\u041f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043a Centrifugo \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u043a\u0430\u043d\u0430\u043b, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u043d\u0430\u043b\u0430:<\/p>\n<pre><code class=\"typescript\">onMounted(() =&gt; {   centrifuge.connect()   initializeSubscription() })<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f:<\/p>\n<pre><code class=\"typescript\">onUnmounted(() =&gt; {   sendSystemMessage(     `\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c ${sender} \u043f\u043e\u043a\u0438\u043d\u0443\u043b \u0447\u0430\u0442`,     room,     parseInt(user_id)   )    if (sub) {     sub.unsubscribe()   }   centrifuge.disconnect() })<\/code><\/pre>\n<h4>\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/h4>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440:<\/p>\n<pre><code class=\"typescript\">const sendMessageWithServer = async () =&gt; {   if (newMessage.value.trim() !== '') {     try {       const response = await fetch(`${BASE_SITE}\/api\/send-msg\/${room}`, {         method: 'POST',         headers: { 'Content-Type': 'application\/json' },         body: JSON.stringify({           sender: sender,           user_id: parseInt(user_id),           message: newMessage.value.trim(),         }),       })        if (!response.ok) throw new Error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f')        messages.value.push({         sender: '\u0412\u044b',         text: newMessage.value.trim(),         type: 'user',       })       newMessage.value = ''        nextTick(() =&gt; scrollChatToBottom())     } catch (error) {       console.error('\u041e\u0448\u0438\u0431\u043a\u0430:', error)       alert('\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.')     }   } }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"typescript\">messages.value.push({   sender: '\u0412\u044b',   text: newMessage.value.trim(),   type: 'user', })<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u0447\u0430\u0442\u0435, \u0434\u043b\u044f \u043d\u0430\u0441, \u043e\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u00ab\u0412\u044b\u00bb. \u041d\u043e, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u043d\u0430\u0448 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a \u0443\u0432\u0438\u0434\u0438\u0442 \u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u043d\u0430\u0448\u0435 \u0438\u043c\u044f (\u0442\u043e\u0442 \u043d\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u043f\u0440\u0438 \u0432\u0445\u043e\u0434\u0435 \u0432 \u0431\u043e\u0442\u0430).<\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0438\u043f. \u041c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n<h3>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 Centrifugo, \u043e\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439:<\/p>\n<pre><code class=\"typescript\">const receiveMessage = (   sender: string,   message: string,   type: 'system' | 'user' = 'user' ) =&gt; {   messages.value.push({ sender, text: message, type })   nextTick(() =&gt; scrollChatToBottom()) }<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e:<\/p>\n<ol>\n<li>\n<p><strong>\u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/strong>:<\/p>\n<ul>\n<li>\n<p>sender: string \u2014 \u0438\u043c\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u043b\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>message: string \u2014 \u0441\u0430\u043c \u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>type: &#8216;system&#8217; | &#8216;user&#8217; = &#8216;user&#8217; \u2014 \u0442\u0438\u043f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u043c).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432<\/strong>:<\/p>\n<pre><code class=\"typescript\">messages.value.push({ sender, text: message, type }) <\/code><\/pre>\n<ul>\n<li>\n<p>\u0411\u0435\u0440\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 messages.value (\u044d\u0442\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 Vue, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438).<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e Vue \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0447\u0430\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0447\u0430\u0442\u0430 \u0432\u043d\u0438\u0437<\/strong>:<\/p>\n<pre><code class=\"typescript\">nextTick(() =&gt; scrollChatToBottom()) <\/code><\/pre>\n<ul>\n<li>\n<p>nextTick() \u0433\u043e\u0432\u043e\u0440\u0438\u0442 Vue: &#171;\u041f\u043e\u0434\u043e\u0436\u0434\u0438, \u043f\u043e\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0447\u0430\u0442\u0430 \u0432\u043d\u0438\u0437&#187;.<\/p>\n<\/li>\n<li>\n<p>\u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u0432 \u043f\u043e\u043b\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4>\u0417\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e?<\/h4>\n<ul>\n<li>\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0447\u0430\u0442\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043c\u043d\u043e\u0433\u043e, \u0447\u0430\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0438\u0437, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0435\u043b \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 (type: &#8216;user&#8217;), \u0442\u0430\u043a \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 (type: &#8216;system&#8217;) \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 Centrifugo, \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0432 \u0447\u0430\u0442\u0435, \u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b \u0432\u0430\u0436\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e.<\/p>\n<h3>\u041f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0447\u0430\u0442\u0430 \u0432\u043d\u0438\u0437<\/h3>\n<pre><code class=\"typescript\">const scrollChatToBottom = () =&gt; {   const chatContainer = document.getElementById('chatContainer')   if (chatContainer) {     chatContainer.scrollTop = chatContainer.scrollHeight   } }<\/code><\/pre>\n<p>\u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0435\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044e \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043a \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044e \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043b\u043d\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c, \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043a \u043c\u043e\u0435\u043c\u0443 Telegram-\u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0443 <a href=\"https:\/\/t.me\/PythonPathMaster\"><strong>\u00ab\u041b\u0435\u0433\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0432 Python\u00bb<\/strong><\/a>. \u0422\u0430\u043c \u0443\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 3000 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432, \u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u043c\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u044e\u0430\u043d\u0441\u0430\u043c\u0438!<\/p>\n<h3>\u0417\u0430\u043f\u0443\u0441\u043a \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043d\u043e\u0432\u0430 \u0432\u0432\u043e\u0434\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">npm run dev <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0435\u0433\u043e Telegram-\u0431\u043e\u0442\u0430 (\u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0441\u044b\u043b\u043a\u0430: <a href=\"https:\/\/t.me\/tet_a_tetMiniAppBot\">https:\/\/t.me\/tet_a_tetMiniAppBot<\/a>) \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c <strong>\/start<\/strong>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0448\u043b\u0438 \u0432 \u0431\u043e\u0442\u0430 \u0432\u043f\u0435\u0440\u0432\u044b\u0435, \u0442\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432: \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b, \u0432\u043e\u0437\u0440\u0430\u0441\u0442 \u0438 \u043d\u0438\u043a\u043d\u0435\u0439\u043c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0434 \u0432\u0430\u043c\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2f5\/f6b\/323\/2f5f6b323f1049194ed9d92bb91a5ceb.png\" width=\"514\" height=\"259\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2f5\/f6b\/323\/2f5f6b323f1049194ed9d92bb91a5ceb.png\"\/><\/figure>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <strong>\u00ab\u0427\u0430\u0442 \u0422\u0435\u0442-\u0410-\u0422\u0435\u0442\u00bb<\/strong> \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0417\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043e\u043a\u043d\u043e:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/08e\/d93\/1ae\/08ed931ae9d3c0c546440b91a2cb119e.png\" width=\"397\" height=\"713\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/08e\/d93\/1ae\/08ed931ae9d3c0c546440b91a2cb119e.png\"\/><\/figure>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e\u043b\u0435 \u00ab\u041f\u043e\u043b\u00bb \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00ab\u041d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u00bb, \u0430 \u0432\u043e\u0437\u0440\u0430\u0441\u0442 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043e\u0442 18 \u0434\u043e 120 \u043b\u0435\u0442. \u041c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0430\u0442, \u044f \u043e\u0442\u043a\u0440\u043e\u044e MiniApp \u0432 Telegram \u0441 \u0440\u0430\u0437\u043d\u044b\u0445 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u043d\u0438\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/39a\/1df\/357\/39a1df35759bbdea57f22ee8ee7a19d8.png\" width=\"771\" height=\"692\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/39a\/1df\/357\/39a1df35759bbdea57f22ee8ee7a19d8.png\"\/><\/figure>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/24f\/abb\/229\/24fabb2290fda95b3c3d18cfaab707f8.png\" width=\"774\" height=\"695\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/24f\/abb\/229\/24fabb2290fda95b3c3d18cfaab707f8.png\"\/><\/figure>\n<p>\u0410 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d0e\/e5e\/152\/d0ee5e152450bbbe4c91dd6ff3af57ae.png\" alt=\"\u041a\u0440\u0430\u0441\u043d\u044b\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c \u043e\u0442\u043c\u0435\u0442\u0438\u043b \u0431\u043b\u043e\u043a \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0430 \u0440\u0435\u043a\u043b\u0430\u043c\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c RichAds.\" title=\"\u041a\u0440\u0430\u0441\u043d\u044b\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c \u043e\u0442\u043c\u0435\u0442\u0438\u043b \u0431\u043b\u043e\u043a \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0430 \u0440\u0435\u043a\u043b\u0430\u043c\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c RichAds.\" width=\"799\" height=\"707\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d0e\/e5e\/152\/d0ee5e152450bbbe4c91dd6ff3af57ae.png\"\/><\/p>\n<div><figcaption>\u041a\u0440\u0430\u0441\u043d\u044b\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c \u043e\u0442\u043c\u0435\u0442\u0438\u043b \u0431\u043b\u043e\u043a \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0430 \u0440\u0435\u043a\u043b\u0430\u043c\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c RichAds.<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0432\u0445\u043e\u0434\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0447\u0430\u0442 \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d, \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u043a\u0443\u0434\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432 \u0447\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1c3\/426\/8f5\/1c34268f52ca26d4ab7a701f7daee9be.png\" width=\"778\" height=\"705\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c3\/426\/8f5\/1c34268f52ca26d4ab7a701f7daee9be.png\"\/><\/figure>\n<p>\u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c, \u043d\u043e \u043f\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u2014 \u0437\u0430 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043f\u0430\u0441\u0438\u0431\u043e Centrifugo*.<\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e\u043a\u0438\u043d\u0435\u0442 \u0447\u0430\u0442 (\u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u043d\u0430\u0436\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041d\u043e\u0432\u044b\u0439\u00bb):<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7d8\/842\/e25\/7d8842e259c3e4cc45742abceb1998a5.png\" width=\"780\" height=\"706\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7d8\/842\/e25\/7d8842e259c3e4cc45742abceb1998a5.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c <strong>\u0412\u0430\u0441\u0438\u043b\u0438\u0439 \u043f\u043e\u043a\u0438\u043d\u0443\u043b \u0447\u0430\u0442<\/strong>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0441\u043a\u0440\u0438\u043d\u043a\u0430\u0441\u0442\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9fa\/c1b\/f57\/9fac1bf57350af3d203955b43cd2ab0b.gif\" width=\"1092\" height=\"992\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9fa\/c1b\/f57\/9fac1bf57350af3d203955b43cd2ab0b.gif\"\/><\/figure>\n<p>\u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u043e\u0442\u043e\u0432, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0435\u0433\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044e \u0438 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<h4>\u0414\u0435\u043f\u043b\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430: \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/h4>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0435\u0433\u043e \u0441\u0431\u043e\u0440\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">npm run build <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430 dist, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c index.html \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u041f\u0440\u0438\u0447\u0438\u043d\u044b \u044d\u0442\u043e\u0433\u043e:<\/p>\n<ol>\n<li>\n<p><strong>ES-\u043c\u043e\u0434\u0443\u043b\u0438<\/strong> \u2013 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438<\/strong> \u2013 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438<\/strong> \u2013 \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043e\u043d\u0438 \u043d\u0435 \u0441\u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0435\u0437 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0440\u0435\u0434\u044b.<\/p>\n<\/li>\n<\/ol>\n<h4>\u0412\u044b\u0431\u043e\u0440 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/h4>\n<p>\u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c FastAPI, \u043d\u043e \u043c\u044b \u043f\u043e\u0439\u0434\u0451\u043c \u0431\u043e\u043b\u0435\u0435 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u0438 \u0432\u044b\u0431\u0435\u0440\u0435\u043c Nginx. \u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f Docker.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 <strong>Amvera Cloud<\/strong>, \u0442\u043e \u0437\u0430\u043f\u0443\u0441\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u2013 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<h4>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 Docker-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u0430\u043f\u043a\u043e\u0439 dist) \u0444\u0430\u0439\u043b Dockerfile \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"delphi\"># \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 NGINX (\u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0439 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0439) FROM nginx:alpine    # \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 index.html RUN rm \/usr\/share\/nginx\/html\/index.html    # \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e NGINX COPY dist\/ \/usr\/share\/nginx\/html\/    # \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0440\u0442 80 \u0434\u043b\u044f \u0432\u0435\u0431-\u0434\u043e\u0441\u0442\u0443\u043f\u0430 EXPOSE 80    # \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c NGINX CMD [\"nginx\", \"-g\", \"daemon off;\"] <\/code><\/pre>\n<h3>\u0420\u0430\u0437\u0431\u043e\u0440 Dockerfile<\/h3>\n<ul>\n<li>\n<p><strong>\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043e\u0431\u0440\u0430\u0437<\/strong> \u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043b\u0451\u0433\u043a\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f NGINX \u043d\u0430 \u0431\u0430\u0437\u0435 Alpine Linux, \u0447\u0442\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430<\/strong> \u2013 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 index.html \u043d\u0430 \u043d\u0430\u0448.<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432<\/strong> \u2013 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 dist\/ \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u043e\u0442\u043a\u0443\u0434\u0430 NGINX \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u042d\u043a\u0441\u043f\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0440\u0442\u0430 80<\/strong> \u2013 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u0430\u0439\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u043f\u0443\u0441\u043a NGINX<\/strong> \u2013 \u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0438 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c Dockerfile \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043e\u0431\u043b\u0430\u043a\u0435 <strong>Amvera Cloud<\/strong>. \u041e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b, \u0438 \u0432\u0441\u0451 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<h3>\u0417\u0430\u043f\u0443\u0441\u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043d\u0430 Amvera Cloud<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u0434\u0435\u043f\u043b\u043e\u044f. \u0412\u0441\u0435 \u0448\u0430\u0433\u0438 \u0441\u0432\u0435\u0434\u0435\u043d\u044b \u043a \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0443:<\/p>\n<ol>\n<li>\n<p><strong>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u0430 <\/strong><a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\"><strong>Amvera Cloud<\/strong><\/a> (\u043d\u043e\u0432\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0434\u0430\u0451\u0442\u0441\u044f \u0431\u043e\u043d\u0443\u0441 \u0432 111 \u0440\u0443\u0431\u043b\u0435\u0439).<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong> \u2013 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u00ab\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u00bb, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0438\u043f \u00ab\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u00bb \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432<\/strong> \u2013 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c GIT \u0438\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0412\u0430\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043f\u0430\u043f\u043a\u0443 dist \u0438 Dockerfile.<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/strong> \u2013 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Docker \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u043f\u0443\u0441\u043a \u0438 \u0441\u0431\u043e\u0440\u043a\u0430<\/strong> \u2013 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u00ab\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u00bb \u0438 \u0436\u0434\u0451\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0443\u0442, \u043f\u043e\u043a\u0430 \u0441\u0435\u0440\u0432\u0438\u0441 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0451\u0442 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<\/li>\n<\/ol>\n<h4>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 HTTPS-\u0434\u043e\u043c\u0435\u043d\u0430<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u043f\u043e \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u043e\u043c\u0443 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044e, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432:<\/p>\n<ol>\n<li>\n<p><strong>\u0417\u0430\u0445\u043e\u0434\u0438\u043c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/strong>.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u00ab\u0414\u043e\u043c\u0435\u043d\u044b\u00bb<\/strong>.<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u043e\u043c\u0435\u043d<\/strong> \u2013 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 HTTPS-\u0434\u043e\u043c\u0435\u043d <a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\">Amvera Cloud<\/a>, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e Telegram Mini App, \u0438\u043b\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/strong> \u2013 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u043e\u043c\u0435\u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0416\u0434\u0451\u043c 2-3 \u043c\u0438\u043d\u0443\u0442\u044b<\/strong>, \u0438 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0441\u043d\u043e\u0432\u0430 \u0432\u043d\u043e\u0441\u0438\u043c \u043f\u0440\u0430\u0432\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b .env, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 FRONT_URL \u0443\u0436\u0435 &#171;\u0431\u043e\u0435\u0432\u0443\u044e&#187; \u0441\u0441\u044b\u043b\u043a\u0443 \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0431\u044d\u043a\u0435\u043d\u0434.<\/p>\n<h3>\u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0431\u043e\u0435\u0432\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435, \u043d\u043e \u0432\u0430\u0436\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u2014 <strong>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438<\/strong>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c <a href=\"https:\/\/richads.com\/publishers\/telegram\/?utm_source=alexey&amp;utm_medium=pr&amp;utm_campaign=tg_publishers&amp;utm_content=habr\"><strong>RichAds<\/strong><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u0432 Telegram Mini App.<\/p>\n<h4>\u0428\u0430\u0433 1: \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u0430 RichAds<\/h4>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 RichAds: \ud83d\udc49 <a href=\"https:\/\/richads.com\/publishers\/telegram\/?utm_source=alexey&amp;utm_medium=pr&amp;utm_campaign=tg_publishers&amp;utm_content=habr\">RichAds \u0434\u043b\u044f Telegram<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 <strong>&#171;SIGN UP&#187;<\/strong> \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4e3\/978\/54d\/4e397854d3873437a32b81d6463dcb1f.png\" width=\"974\" height=\"614\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4e3\/978\/54d\/4e397854d3873437a32b81d6463dcb1f.png\"\/><\/figure>\n<ul>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0444\u0438\u043b\u044c (\u0432 \u0431\u043b\u043e\u043a\u0435 &#171;\u043e\u0442\u043a\u0443\u0434\u0430 \u043e \u043d\u0430\u0441 \u0443\u0437\u043d\u0430\u043b\u0438&#187; \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, yakvenalex Habr).<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c80\/773\/90d\/c8077390d633d516f5c5111471ed6b29.png\" width=\"974\" height=\"546\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c80\/773\/90d\/c8077390d633d516f5c5111471ed6b29.png\"\/><\/figure>\n<ul>\n<li>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u043b\u0435\u0434\u0443\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fcd\/47f\/ba9\/fcd47fba96569057387db6fee8c6bcce.png\" alt=\"\u0412\u0441\u0442\u0432\u044b\u043b\u044f\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u0431\u043e\u0442\u0430 \u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\" title=\"\u0412\u0441\u0442\u0432\u044b\u043b\u044f\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u0431\u043e\u0442\u0430 \u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\" width=\"974\" height=\"869\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fcd\/47f\/ba9\/fcd47fba96569057387db6fee8c6bcce.png\"\/><\/p>\n<div><figcaption>\u0412\u0441\u0442\u0432\u044b\u043b\u044f\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u0431\u043e\u0442\u0430 \u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043e\u043a\u043d\u043e \u0441 \u043a\u0440\u0430\u0442\u043a\u0438\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/447\/a5d\/71c\/447a5d71c1aa240fef0b454f3cf16b4f.png\" alt=\"\u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 JS tag code -&gt; check connection -&gt; Continue\" title=\"\u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 JS tag code -&gt; check connection -&gt; Continue\" width=\"974\" height=\"726\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/447\/a5d\/71c\/447a5d71c1aa240fef0b454f3cf16b4f.png\"\/><\/p>\n<div><figcaption>\u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 JS tag code -&gt; check connection -&gt; Continue<\/figcaption><\/div>\n<\/figure>\n<h4>\u0428\u0430\u0433 2: \u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/h4>\n<p>\u0412 \u0431\u0443\u0444\u0435\u0440\u0435 \u043e\u0431\u043c\u0435\u043d\u0430, \u043f\u043e\u0441\u043b\u0435 \u043a\u043b\u0438\u043a\u0430 \u043d\u0430  JS tag code \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 (\u0441 \u0432\u0430\u0448\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 pubId \u0438 appId:<\/p>\n<pre><code class=\"typescript\">&lt;script src=\"https:\/\/richinfo.co\/richpartners\/telegram\/js\/tg-ob.js\"&gt;&lt;\/script&gt; &lt;script&gt;   window.TelegramAdsController = new TelegramAdsController();   window.TelegramAdsController.initialize({     pubId: \"123456\",     appId: \"1234\",   }); &lt;\/script&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e <strong>Vue.js 3<\/strong> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <\/p>\n<h3>1. \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c index.html<\/h3>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>index.html<\/code> \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <code>&lt;head&gt;<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 RichAds \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f Telegram Mini App API: \u00a0<\/p>\n<pre><code class=\"typescript\">&lt;!DOCTYPE html&gt; &lt;html lang=\"ru\"&gt;   &lt;head&gt;     &lt;meta charset=\"UTF-8\" \/&gt;     &lt;link rel=\"icon\" href=\"\/favicon.ico\" \/&gt;     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;          &lt;!-- Telegram MiniApp API --&gt;     &lt;script src=\"https:\/\/telegram.org\/js\/telegram-web-app.js\"&gt;&lt;\/script&gt;          &lt;!-- RichAds \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 --&gt;     &lt;script src=\"https:\/\/richinfo.co\/richpartners\/telegram\/js\/tg-ob.js\"&gt;&lt;\/script&gt;      &lt;title&gt;Chat Tet@Tet&lt;\/title&gt;   &lt;\/head&gt;   &lt;body&gt;     &lt;div id=\"app\"&gt;&lt;\/div&gt;     &lt;script type=\"module\" src=\"\/src\/main.ts\"&gt;&lt;\/script&gt;   &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<h3>2. \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c src\/App.vue<\/h3>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 src\/App.vue \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>initializeTelegramAds<\/strong>:<\/p>\n<p><strong>\u0411\u044b\u043b\u043e:<\/strong><\/p>\n<pre><code class=\"typescript\">const initializeTelegramAds = () =&gt; {   miniApp.ready() }<\/code><\/pre>\n<p><strong>\u0421\u0442\u0430\u043b\u043e:<\/strong><\/p>\n<pre><code class=\"typescript\">const initializeTelegramAds = () =&gt; {   miniApp.ready();   window.TelegramAdsController = new TelegramAdsController();   window.TelegramAdsController.initialize({     pubId: \"123456\",     appId: \"1234\",   }); }; <\/code><\/pre>\n<p>\u042d\u0442\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043c\u044b \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 <a href=\"https:\/\/richads.com\/publishers\/telegram\/?utm_source=alexey&amp;utm_medium=pr&amp;utm_campaign=tg_publishers&amp;utm_content=habr\">RichAds <\/a>\u043f\u043e\u0434 \u0440\u0435\u0430\u043b\u0438\u0438 <strong>Vue.js 3<\/strong>.<\/p>\n<h4>\u0428\u0430\u0433 4: \u0421\u0431\u043e\u0440\u043a\u0430 \u0438 \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435<\/h4>\n<ol>\n<li>\n<p><strong>\u041f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442:<\/strong><\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"bash\">npm run build <\/code><\/pre>\n<ol start=\"2\">\n<li>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0444\u0430\u0439\u043b\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440<\/strong> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\"><strong>Amvera Cloud<\/strong><\/a>, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u044b\u043b \u0442\u0430\u043c \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442).<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0443 \u0432 \u043e\u0431\u043b\u0430\u043a\u0435<\/strong>, \u043d\u0430\u0436\u0430\u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<\/li>\n<\/ol>\n<h4>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 <strong>Telegram Mini App<\/strong> \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0440\u0435\u043a\u043b\u0430\u043c\u0443.<\/p>\n<p>\ud83d\udccc <strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u043a\u043b\u0430\u043c\u044b:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/b32\/f1c\/a38\/b32f1ca389c122cfe4e2fe107e757ec1.jpg\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u043a\u043b\u0430\u043c\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0447\u0430\u0442\u0430\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u043a\u043b\u0430\u043c\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0447\u0430\u0442\u0430\" width=\"590\" height=\"1280\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b32\/f1c\/a38\/b32f1ca389c122cfe4e2fe107e757ec1.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u043a\u043b\u0430\u043c\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0447\u0430\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/a1f\/314\/64a\/a1f31464a39127cb8cf664f025a2d898.jpg\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430\" width=\"590\" height=\"1280\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a1f\/314\/64a\/a1f31464a39127cb8cf664f025a2d898.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/eb2\/18c\/6d0\/eb218c6d00d9ed157cb63d5c53a5ba65.jpg\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0447\u0430\u0442\u0430\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0447\u0430\u0442\u0430\" width=\"590\" height=\"1280\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eb2\/18c\/6d0\/eb218c6d00d9ed157cb63d5c53a5ba65.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0447\u0430\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u0438 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u0434\u043e\u0445\u043e\u0434.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412\u043e\u0442 \u0438 \u043f\u043e\u0434\u043e\u0448\u043b\u043e \u043a \u043a\u043e\u043d\u0446\u0443 \u043d\u0430\u0448\u0435 \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u0435 \u0432 \u043c\u0438\u0440 RealTime-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 FullStack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041f\u0443\u0442\u044c \u0431\u044b\u043b \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043d\u043e, \u0431\u0435\u0437 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u0439, \u0437\u0430\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u043c.<\/p>\n<p>\u0421\u0435\u0440\u0438\u044f \u044d\u0442\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u0431\u044b\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0449\u043d\u044b\u0435 \u0438 \u0433\u0438\u0431\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u2014 FastAPI, Redis, Centrifugo \u0438 Vue.js 3 \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0447\u043d\u044b\u0439 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<h4>\u0427\u0442\u043e \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438:<\/h4>\n<ul>\n<li>\n<p>\u041a\u0430\u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438 \u0431\u044d\u043a\u0435\u043d\u0434 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 API-\u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a Python \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 Redis \u0438 Celery \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a Redis \u0438 Celery \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c RealTime-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Centrifugo \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044f \u043a\u043e\u0434 \u0432 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u043e\u0445\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e! \u041c\u044b \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0443 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0435\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u044d\u0442\u0430 \u0441\u0435\u0440\u0438\u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0439 \u0431\u044b\u043b\u0430 \u0432\u0430\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u0430, \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0435\u0451 \u043b\u0430\u0439\u043a\u043e\u043c \u0438\u043b\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u043c. \u0412\u0430\u0448\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u043c\u043e\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u043d\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0410 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043a\u0441\u043a\u043b\u044e\u0437\u0438\u0432\u043d\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438 \u0436\u0438\u0432\u043e\u0433\u043e \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u2014 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e \u0432 \u043c\u043e\u0439 Telegram-\u043a\u0430\u043d\u0430\u043b \u00ab<a href=\"https:\/\/t.me\/PythonPathMaster\">\u041b\u0451\u0433\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0432 Python<\/a>\u00bb. \u0422\u0430\u043c \u043d\u0430\u0441 \u0443\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 3000 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432, \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0441\u0442\u0438. \u041a\u0441\u0442\u0430\u0442\u0438, \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0438 \u043a\u0430\u043d\u0430\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0449\u0451 \u043f\u0430\u0440\u0443 \u043d\u0435\u0434\u0435\u043b\u044c \u043d\u0430\u0437\u0430\u0434.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0451. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0449\u0430\u043d\u0438\u0435, \u0430 \u043b\u0438\u0448\u044c \u043d\u0430\u0447\u0430\u043b\u043e \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u0432 \u043c\u0438\u0440 RealTime-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0414\u043e \u0441\u043a\u043e\u0440\u043e\u0433\u043e!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/893250\/\"> https:\/\/habr.com\/ru\/articles\/893250\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0414\u0440\u0443\u0437\u044c\u044f, \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e!<\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0433\u043e \u0447\u0430\u0442\u0430 &#171;\u0422\u0435\u0442 \u0410 \u0422\u0435\u0442&#187; \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0430 \u0441 MiniApp (\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043a\u0430\u043a WebApp).<\/p>\n<p>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/habr.com\/ru\/companies\/amvera\/articles\/890976\/\">\u00ab\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0433\u043e \u0447\u0430\u0442\u0430 \u0432 Telegram: \u0411\u043e\u0442 \u0441 MiniApp \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c. \u0427\u0430\u0441\u0442\u044c 1 \u2014 \u0411\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 FastAPI, Aiogram, Redis \u0438 Centrifugo\u00bb<\/a> \u043c\u044b \u0443\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u043f\u0438\u0441\u0430\u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 API-\u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0447\u0435\u043c \u043c\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0438 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435\u043c <strong>\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e<\/strong> \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043c\u043e\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 <a href=\"https:\/\/habr.com\/ru\/companies\/amvera\/articles\/885714\/\">\u00abCentrifugo v6 + FastAPI + Python: \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0431-\u043e\u043f\u0440\u043e\u0441\u043d\u0438\u043a \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438\u00bb<\/a>, \u0433\u0434\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Centrifugo \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435.<\/p>\n<h3>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>\u0414\u043b\u044f \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0443 \u0432\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u0434\u043d\u044f\u0442\u0430\u044f \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 Redis<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Centrifugo<\/p>\n<\/li>\n<li>\n<p>\u0422\u043e\u043a\u0435\u043d \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0430 (\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u043e\u0442\u0435 BotFather)<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 API \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Redis (\u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043c\u043d\u0430\u0442\u0430\u043c\u0438 \u0438 \u043e\u0447\u0435\u0440\u0435\u0434\u044f\u043c\u0438)<\/p>\n<\/li>\n<li>\n<p>API \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Centrifugo (\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u043d\u0430\u043b\u043e\u0432, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u044b \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439)<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u043e \u0445\u043e\u0434\u0443 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u044f \u0431\u0443\u0434\u0443 \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Centrifugo.<\/p>\n<h3>\u041f\u043b\u0430\u043d \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u043b\u0430\u043d\u0443. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0447\u0430\u0442\u0430 &#171;\u0422\u0435\u0442 \u0410 \u0422\u0435\u0442&#187;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a Real-Time \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <strong>Real-Time<\/strong> \u2014 \u044d\u0442\u043e \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u043e\u0441\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u043d\u043e\u0432\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0447\u0430\u0442\u0430, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0432 \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435).<\/p>\n<h4>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043d\u0430\u0448\u0435\u0433\u043e Telegram MiniApp, \u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ol>\n<li>\n<p><strong>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432<\/strong> \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430 (\u043f\u043e\u043b \u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430)<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430<\/strong> \u2014 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 MiniApp \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f<\/strong> \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0447\u0430\u0442\u0430<\/strong> \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<\/ol>\n<h4>\u041b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432 MiniApp:<\/p>\n<ol>\n<li>\n<p><strong>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 API<\/strong> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043a\u043e\u043c\u043d\u0430\u0442\u044b, \u0432\u044b\u0445\u043e\u0434\u0430 \u0438\u0437 \u043a\u043e\u043c\u043d\u0430\u0442\u044b, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 Centrifugo<\/strong> \u2014 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043d\u0430\u0448 \u0431\u044d\u043a\u0435\u043d\u0434 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432 \u043a\u0430\u043d\u0430\u043b) \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Centrifugo \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 (\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438)<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/strong> \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 &#171;\u0431\u0435\u0441\u0448\u043e\u0432\u043d\u043e\u0433\u043e&#187; \u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c VueJS3<\/p>\n<\/li>\n<\/ol>\n<h3>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b<\/h3>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0431\u043b\u043e\u043a\u0430\u043c\u0438 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c:<\/p>\n<ol>\n<li>\n<p><strong>\u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong> \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430 MiniApp \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/richads.com\/publishers\/telegram\/?utm_source=alexey&amp;utm_medium=pr&amp;utm_campaign=tg_publishers&amp;utm_content=habr\">RichAds<\/a><\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u0435\u043f\u043b\u043e\u0439 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong> \u2014 \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 <a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\">Amvera Cloud<\/a><\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u0445 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h3>\u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f MiniApp<\/h3>\n<p>\u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u0443\u044e \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u2014 \u043c\u044b \u043d\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0438 \u0443\u0441\u043b\u0443\u0433\u0438, \u043d\u0438 \u0442\u043e\u0432\u0430\u0440\u044b. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0438 \u0441\u0430\u043c\u044b\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043a\u043b\u0430\u043c\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0440\u0435\u043a\u043b\u0430\u043c\u044b \u0432 \u0441\u0432\u043e\u0438\u0445 MiniApp \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u0442\u043e \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0445\u043b\u043e\u043f\u043e\u0442\u043d\u044b\u043c. \u0427\u0430\u0441\u0442\u043e \u0431\u0435\u0437 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0440\u0430\u0444\u0438\u043a\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0430\u0440\u044b \u0442\u044b\u0441\u044f\u0447 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u043c\u0435\u0441\u044f\u0446) \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043e\u0434\u043e\u0431\u0440\u044f\u044e\u0442 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u0432 \u0441\u0432\u043e\u0435\u043c MiniApp \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412 \u044d\u0442\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u0435\u0440\u0432\u0438\u0441 <strong>RichAds<\/strong>.<\/p>\n<p>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442:<\/p>\n<ol>\n<li>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0435\u0441\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/richads.com\/publishers\/telegram\/?utm_source=alexey&amp;utm_medium=pr&amp;utm_campaign=tg_publishers&amp;utm_content=habr\">RichAds <\/a>(\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u0438 \u0431\u0435\u0437 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0439)<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0444\u043e\u0440\u043c\u0430\u0442 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 Telegram MiniApp<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0431\u043e\u0442\u0430 \u0438 \u043d\u0430 MiniApp<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 (\u0432\u0441\u0435\u0433\u043e \u043e\u043a\u043e\u043b\u043e 5 \u0441\u0442\u0440\u043e\u0447\u0435\u043a)<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0430\u0447\u043d\u0443\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u00ab\u0443\u043c\u043d\u0443\u044e\u00bb \u0438 \u043d\u0435\u043d\u0430\u0432\u044f\u0437\u0447\u0438\u0432\u0443\u044e \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u0432 \u0432\u0438\u0434\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u044c<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u043e\u043d\u0443\u0441\u0430 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0439 \u0438 \u043a\u043b\u0438\u043a\u043e\u0432. \u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043b\u044e\u0431\u044b\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c.<\/p>\n<p>\u041e\u043f\u043b\u0430\u0442\u0430 \u0437\u0430 \u043a\u043b\u0438\u043a\u0438 \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u2014 \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432\u0430\u0448\u0435\u0433\u043e Telegram MiniApp \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0434\u0435\u043d\u0435\u0436\u043d\u043e\u0435 \u0432\u043e\u0437\u043d\u0430\u0433\u0440\u0430\u0436\u0434\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u0414\u0435\u043f\u043b\u043e\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 Redis<\/p>\n<\/li>\n<li>\n<p>Centrifugo<\/p>\n<\/li>\n<li>\n<p>API (\u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 FastAPI)<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0438\u0437\u0432\u043d\u0435. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043c\u0430\u043b\u043e \u043f\u043e\u043b\u044c\u0437\u044b \u043e\u0442 \u0447\u0430\u0442\u0430, \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u0435\u043f\u043b\u043e\u0439. \u041e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u043d\u0430 VPS\/\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u043b\u0438\u0431\u043e \u043d\u0430 \u043e\u0431\u043b\u0430\u0447\u043d\u044b\u0435 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0438 \u0442\u0438\u043f\u0430 Heroku \u0438\u043b\u0438 \u0435\u0433\u043e \u043e\u0442\u0435\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0430 <a href=\"https:\/\/amvera.ru\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=yakvenalex_tet_a_tet_vuejs\"><strong>Amvera Cloud<\/strong><\/a>.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b, \u043a\u0430\u043a \u043d\u0430 Amvera \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c Redis, Celery \u0438 FastAPI. \u0421\u0435\u0433\u043e\u0434\u043d\u044f, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044f \u044d\u0442\u0443 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u044e, \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (MiniApp).<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: Redis, FastAPI, Celery \u0438 VueJS3, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e, \u043d\u043e \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435.<\/p>\n<p>\u041d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 <strong>Amvera Cloud<\/strong> \u0443 \u043c\u0435\u043d\u044f \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u043e\u043a\u043e\u043b\u043e 20 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0441\u043e\u0431\u044b\u0445 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0438, \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0435 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f \u0441 HTTPS, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u043d\u044f\u0442\u0438\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043a\u0430\u043a \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430. \u041d\u0430 Amvera \u044d\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<p>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u043f\u043b\u043e\u044f \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0435 \u0444\u0430\u0439\u043b\u044b<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0434\u043e\u043c\u0435\u043d \u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0435 \u0435\u0433\u043e<\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0430\u0442\u0440\u0430\u0442\u0438\u0432 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0443\u0442, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0434\u043e\u043c\u0435\u043d\u043d\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c.<\/p>\n<h3>\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0442\u0435\u043a<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u043c\u0441\u044f \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0442\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>\u0411\u044d\u043a\u0435\u043d\u0434<\/strong> \u2014 \u043d\u0430\u0448\u0438 API \u043c\u0435\u0442\u043e\u0434\u044b, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434<\/p>\n<\/li>\n<li>\n<p><strong>VueJS3<\/strong> \u2014 JavaScript \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<li>\n<p><strong>VUE-TG<\/strong> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Telegram MiniApp API<\/p>\n<\/li>\n<li>\n<p><strong>Centrifuge<\/strong> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Centrifugo \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/p>\n<\/li>\n<li>\n<p><strong>Vue-Router<\/strong> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0447\u0438\u0441\u0442\u044b\u0439 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e. \u0422\u0435\u043c, \u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u044d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043f\u043e\u043b\u043d\u043e\u043c\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u043c\u043e\u0435\u043c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435 <a href=\"https:\/\/t.me\/PythonPathMaster\">&#171;\u041b\u0435\u0433\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0432 Python&#187;<\/a>.<\/p>\n<h3>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440<\/h3>\n<p>\u0414\u0440\u0443\u0437\u044c\u044f, \u044f \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0431\u044d\u043a\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 VueJS, \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u043a\u043e\u0440\u0435\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0445\u043e\u0431\u0431\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0448\u0443 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043a\u0430\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 Best Practices.<\/p>\n<p>\u041c\u043e\u044f \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043d\u0430 VueJS (JavaScript) \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u043d\u0430 FastAPI (Python) \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e Real-Time \u0447\u0430\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c VueJS3. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0431\u0435\u0437 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u0430, \u0430 \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043b\u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u2014 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0446\u0435\u043d\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u043e, \u043d\u0430\u0448 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043c\u043e\u0438\u043c \u0432\u0438\u0434\u0435\u043d\u0438\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u043b\u044e\u0431\u043e\u0439, \u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u0435\u043c\u0430 Centrifugo \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c!<\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u043c\u044b \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u043c VueJS3 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Vue:<\/p>\n<pre><code class=\"bash\">npm install vue@latest <\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0443\u043a\u0430\u0436\u0435\u043c \u0438\u043c\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <strong>TypeScript<\/strong> \u0438 <strong>VueRouter<\/strong>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443:<\/p>\n<pre><code class=\"bash\">cd project_name <\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"bash\">npm install <\/code><\/pre>\n<p>\u041e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434:<\/p>\n<pre><code class=\"bash\">npm run format <\/code><\/pre>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"bash\">npm run dev <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: <a href=\"http:\/\/localhost:5173\/%EF%BF%BC\">http:\/\/localhost:5173\/<\/a><\/p>\n<p>\u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 Home \u0438 About.<\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/h3>\n<p>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f VueJS \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0435\u0439 \u043a\u043b\u0430\u0432\u0438\u0448 CTRL+C (\u0438\u043b\u0438 CMD+C \u043d\u0430 macOS).<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Telegram MiniApp:<\/p>\n<pre><code class=\"bash\">npm i vue-tg@beta <\/code><\/pre>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u043b\u044f Centrifugo:<\/p>\n<pre><code class=\"bash\">npm install centrifuge <\/code><\/pre>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0443 \u043c\u0435\u043d\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>centrifuge: ^5.3.4<\/p>\n<\/li>\n<li>\n<p>vue: ^3.5.13<\/p>\n<\/li>\n<li>\n<p>vue-router: ^4.5.0<\/p>\n<\/li>\n<li>\n<p>vue-tg: ^0.9.0-beta.3<\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 (vite.config.ts). \u0412 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">import { fileURLToPath, URL } from 'node:url'  import { defineConfig } from 'vite' import vue from '@vitejs\/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools'  \/\/ https:\/\/vite.dev\/config\/ export default defineConfig({   plugins: [vue(), vueDevTools()],   resolve: {     alias: {       '@': fileURLToPath(new URL('.\/src', import.meta.url)),     },   }, }) <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e:<\/p>\n<ol>\n<li>\n<p>\u0423\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 vueDevTools(), \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043c\u0435\u0448\u0430\u043b\u0438 \u043b\u0438\u0448\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043f\u043e\u0440\u0442 3000 (\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439)<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0445 \u0445\u043e\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u043f\u043e\u0434\u0432\u044f\u0437\u043a\u0438 \u0442\u043e\u043d\u043d\u0435\u043b\u0435\u0439 \u0438 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u0438<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">import { fileURLToPath, URL } from 'node:url'  import vue from '@vitejs\/plugin-vue' import { defineConfig } from 'vite'  \/\/ https:\/\/vite.dev\/config\/ export default defineConfig({   plugins: [vue()],   server: {     host: '0.0.0.0',     port: 3000,     allowedHosts: true,   },   resolve: {     alias: {       '@': fileURLToPath(new URL('.\/src', import.meta.url)),     },   }, }) <\/code><\/pre>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u0443\u043d\u043d\u0435\u043b\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h3>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-454063","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/454063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=454063"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/454063\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=454063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=454063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=454063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}