{"id":330516,"date":"2022-03-11T09:00:05","date_gmt":"2022-03-11T09:00:05","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=330516"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=330516","title":{"rendered":"<span>JavaScript: \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0447\u0430\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Socket.io, Express \u0438 React \u0441 \u0430\u043a\u0446\u0435\u043d\u0442\u043e\u043c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043c\u0435\u0434\u0438\u0430<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/gp\/rx\/uj\/gprxuj2skxbmhitwrnlg1ibcalm.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/gp\/rx\/uj\/gprxuj2skxbmhitwrnlg1ibcalm.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u043c\u0435\u043d\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/socket.io\/\"><code>Socket.io<\/code><\/a>, <a href=\"https:\/\/expressjs.com\/ru\/\"><code>Express<\/code><\/a> \u0438 <a href=\"https:\/\/ru.reactjs.org\/\"><code>React<\/code><\/a> \u0441 \u0430\u043a\u0446\u0435\u043d\u0442\u043e\u043c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043c\u0435\u0434\u0438\u0430.<\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0432\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f;<\/li>\n<li>\u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0435\u0433\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435;<\/li>\n<li>\u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043c\u044f \u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 (\u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438\/\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438);<\/li>\n<li>\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/WebSocket\">\u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442\u044b<\/a> \u0438 \u0432\u0445\u043e\u0434 \u0432 \u043a\u043e\u043c\u043d\u0430\u0442\u0443 <code>main_room<\/code> (\u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430 \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043d\u0430\u0442);<\/li>\n<li>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/li>\n<li>\u0442\u0438\u043f\u043e\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u0430\u0443\u0434\u0438\u043e, \u0432\u0438\u0434\u0435\u043e \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435;<\/li>\n<li>\u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435;<\/li>\n<li>\u043f\u0443\u0442\u044c \u043a \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0444\u0430\u0439\u043b\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435;<\/li>\n<li>\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445;<\/li>\n<li>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f;<\/li>\n<li>\u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0430\u0443\u0434\u0438\u043e \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430;<\/li>\n<li>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u044d\u043c\u043e\u0434\u0437\u0438;<\/li>\n<li>\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f;<\/li>\n<li>\u0438 \u0442.\u0434.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/harryheman\/react-express-socket.io-chat-app\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043f\u0440\u043e\u0448\u0443 \u043f\u043e\u0434 \u043a\u0430\u0442.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0421\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e\u0441\u0442\u0438 \u0440\u0430\u0434\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b \u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0447\u0430\u0442\u0430 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435. \u0411\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u043e\u0432\u0430\u044f (\u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f) \u0432\u0435\u0440\u0441\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"podgotovka-i-nastroyka-proekta\">\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043d\u0435\u0435 \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c <code>Node.js-\u043f\u0440\u043e\u0435\u043a\u0442<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">mkdir chat-app cd chat-app  yarn init -yp # or npm init -y<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/create-react-app.dev\/\"><code>Create React App<\/code><\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">mkdir server  yarn create react-app client # or npx create-react-app client<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0434\u0432\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <a href=\"https:\/\/www.npmjs.com\/package\/concurrently\"><code>concurrently<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">yarn add concurrently # or npm i concurrently<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 <code>package.json<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"scripts\": {   \"dev:client\": \"yarn --cwd client start\",   \"dev:server\": \"yarn --cwd server dev\",   \"dev\": \"concurrently \\\"yarn dev:client\\\" \\\"yarn dev:server\\\"\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043b\u0438, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <code>npm<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"scripts\": {   \"dev:client\": \"npm run start --prefix client\",   \"dev:server\": \"npm run dev --prefix server\",   \"dev\": \"concurrently \\\"npm run dev:client\\\" \\\"npm run dev:server\\\"\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0411\u0414 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.mongodb.com\/atlas\/database\"><code>MongoDb Atlas Database<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0430\u043a\u043a\u0430\u0443\u043d\u0442, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043a\u043b\u0430\u0441\u0442\u0435\u0440 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0430 <code>mongodb+srv:\/\/&lt;user>:&lt;password>@cluster0.f7292.mongodb.net\/&lt;database>?retryWrites=true&amp;w=majority<\/code>*, \u0433\u0434\u0435 <code>&lt;user><\/code>, <code>&lt;password><\/code> \u0438 <code>&lt;database><\/code> \u2014 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043a\u043b\u0430\u0441\u0442\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0430\u0434\u0440\u0435\u0441\u0430 \u0411\u0414 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0436\u0430\u0442\u044c <code>Connect<\/code> \u0440\u044f\u0434\u043e\u043c \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0441\u0442\u0435\u0440\u0430 (<code>Cluster0<\/code>) \u0438 \u0437\u0430\u0442\u0435\u043c <code>Connect your application<\/code>.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441, \u043a\u0430\u043a \u0438 \u0443 \u043c\u0435\u043d\u044f, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/IP-%D0%B0%D0%B4%D1%80%D0%B5%D1%81\"><code>IP<\/code><\/a>, \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 <code>Network Access<\/code> \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <code>Security<\/code> \u043d\u0430\u0434\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c <code>0.0.0.0\/0<\/code><\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/dt\/56\/vy\/dt56vykt9oi9wwb6gpmsweqyfqu.png\" data-src=\"https:\/\/habrastorage.org\/webt\/dt\/56\/vy\/dt56vykt9oi9wwb6gpmsweqyfqu.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/zn\/ay\/se\/znayseg_h13wwcq3gbzofxkx3-a.png\" data-src=\"https:\/\/habrastorage.org\/webt\/zn\/ay\/se\/znayseg_h13wwcq3gbzofxkx3-a.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"server\">\u0421\u0435\u0440\u0432\u0435\u0440<\/h2>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>server<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">cd server  # \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 yarn add express socket.io mongoose cors multer # or npm i ...  # \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 yarn add -D nodemon # or npm i -D nodemon<\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li><code>express<\/code> \u2014 <code>Node.js-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a<\/code> \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432;<\/li>\n<li><code>socket.io<\/code> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0449\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442\u0430\u043c\u0438;<\/li>\n<li><a href=\"https:\/\/mongoosejs.com\/\"><code>mongoose<\/code><\/a> \u2014 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/ORM\">ORM<\/a> \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 <code>MongoDB<\/code>;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/cors\"><code>cors<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTTP\/CORS\">CORS<\/a>;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/multer\"><code>multer<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0431\u043e\u0440\u0430 (\u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430) \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Multipart\/form-data\"><code>multipart\/form-data<\/code><\/a> (\u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435);<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/nodemon\"><code>nodemon<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0438\u043f \u043a\u043e\u0434\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u043c\u043e\u0434\u0443\u043b\u044c) \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"type\": \"module\", \"scripts\": {   \"dev\": \"nodemon\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>server<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">- files - \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 - models   - message.model.js - \u043c\u043e\u0434\u0435\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0434\u043b\u044f `Mongoose` - socket_io   - handlers     - message.handlers.js - \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439     - user.handler.js - \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439   - onConnection.js - \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f - utils   - file.js - \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438   - onError.js - \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043e\u043a   - upload.js - \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 - config.js - \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b `config.example.js` \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a) - index.js - \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>config.js<\/code> (\u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 <code>.gitignore<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a export const ALLOWED_ORIGIN = 'http:\/\/localhost:3000' \/\/ \u0430\u0434\u0440\u0435\u0441 \u0411\u0414 export const MONGODB_URI =   'mongodb+srv:\/\/&lt;user>:&lt;password>@cluster0.f7292.mongodb.net\/&lt;database>?retryWrites=true&amp;w=majority'<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>models\/message.model.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import mongoose from 'mongoose'  const { Schema, model } = mongoose  const messageSchema = new Schema(   {     messageId: {       type: String,       required: true,       unique: true     },     messageType: {       type: String,       required: true     },     textOrPathToFile: {       type: String,       required: true     },     roomId: {       type: String,       required: true     },     userId: {       type: String,       required: true     },     userName: {       type: String,       required: true     }   },   {     timestamps: true   } )  export default model('Message', messageSchema)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0448\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>messageId<\/code> \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f;<\/li>\n<li><code>messageType<\/code> \u2014 \u0442\u0438\u043f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f;<\/li>\n<li><code>textOrPathToFile<\/code> \u2014 \u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443;<\/li>\n<li><code>roomId<\/code> \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043d\u0430\u0442\u044b;<\/li>\n<li><code>userId<\/code> \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f;<\/li>\n<li><code>userName<\/code> \u2014 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f;<\/li>\n<li><code>createdAt<\/code>, <code>updatedAt<\/code> \u2014 \u0434\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e (<code>timestamps: true<\/code>).<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u044b (\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>utils<\/code>).<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043e\u043a (<code>onError.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default function onError(err, req, res, next) {   console.log(err)    \/\/ \u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0442\u0432\u0435\u0442\u0430   if (res) {     \/\/ \u0441\u0442\u0430\u0442\u0443\u0441 \u043e\u0448\u0438\u0431\u043a\u0438     const status = err.status || err.statusCode || 500     \/\/ \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435     const message = err.message || 'Something went wrong. Try again later'     res.status(status).json({ message })   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 (<code>file.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { unlink } from 'fs\/promises' import { dirname, join } from 'path' import { fileURLToPath } from 'url' import onError from '.\/onError.js'  \/\/ \u043f\u0443\u0442\u044c \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 const _dirname = dirname(fileURLToPath(import.meta.url))  \/\/ \u043f\u0443\u0442\u044c \u043a \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 const fileDir = join(_dirname, '..\/files')  \/\/ \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0443 export const getFilePath = (filePath) => join(fileDir, filePath)  \/\/ \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 export const removeFile = async (filePath) => {   try {     await unlink(join(fileDir, filePath))   } catch (e) {     onError(e)   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 (<code>upload.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { existsSync, mkdirSync } from 'fs' import multer from 'multer' import { dirname, join } from 'path' import { fileURLToPath } from 'url'  \/\/ \u043f\u0443\u0442\u044c \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 const _dirname = dirname(fileURLToPath(import.meta.url))  const upload = multer({   storage: multer.diskStorage({     \/\/ \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0444\u0430\u0439\u043b\u043e\u0432     destination: async (req, _, cb) => {       \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438\u0437 HTTP-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 `X-Room-Id`       const roomId = req.headers['x-room-id']       \/\/ \u0444\u0430\u0439\u043b\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043f\u043e \u043a\u043e\u043c\u043d\u0430\u0442\u0430\u043c       \/\/ \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 - \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043d\u0430\u0442\u044b       const dirPath = join(_dirname, '..\/files', roomId)        \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438       if (!existsSync(dirPath)) {         mkdirSync(dirPath, { recursive: true })       }        cb(null, dirPath)     },     filename: (_, file, cb) => {       \/\/ \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438       \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0432\u0440\u0435\u043c\u044f \u0441 \u043d\u0430\u0447\u0430\u043b\u0430 \u044d\u043f\u043e\u0445\u0438 \u0438 \u0434\u0435\u0444\u0438\u0441       const fileName = `${Date.now()}-${file.originalname}`        cb(null, fileName)     }   }) })  export default upload<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (<code>index.js<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u0438 \u0432\u0441\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import cors from 'cors' import express from 'express' import { createServer } from 'http' import mongoose from 'mongoose' import { Server } from 'socket.io' import { ALLOWED_ORIGIN, MONGODB_URI } from '.\/config.js' import onConnection from '.\/socket_io\/onConnection.js' import { getFilePath } from '.\/utils\/file.js' import onError from '.\/utils\/onError.js' import upload from '.\/utils\/upload.js'<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>Express-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/code> \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 <code>CORS<\/code> \u0438 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 <code>JSON<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const app = express()  app.use(   cors({     origin: ALLOWED_ORIGIN   }) ) app.use(express.json())<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0444\u0430\u0439\u043b\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">app.use('\/upload', upload.single('file'), (req, res) => {   if (!req.file) return res.sendStatus(400)    \/\/ \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443   const relativeFilePath = req.file.path     .replace(\/\\\\\/g, '\/')     .split('server\/files')[1]    \/\/ \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e   res.status(201).json(relativeFilePath) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">app.use('\/files', (req, res) => {   \/\/ \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443   const filePath = getFilePath(req.url)    \/\/ \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u0443\u0442\u0438   res.status(200).sendFile(filePath) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043a \u0411\u0414:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">app.use(onError)  try {   await mongoose.connect(MONGODB_URI, {     useNewUrlParser: true,     useUnifiedTopology: true   })   console.log('? Connected') } catch (e) {   onError(e) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 <code>Socket.io<\/code> \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const server = createServer(app)  const io = new Server(server, {   cors: ALLOWED_ORIGIN,   serveClient: false })  io.on('connection', (socket) => {   onConnection(io, socket) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u0440\u0442 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const PORT = process.env.PORT || 4000 server.listen(PORT, () => {   console.log(`? Server started on port ${PORT}`) })<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u0430:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import cors from 'cors' import express from 'express' import { createServer } from 'http' import mongoose from 'mongoose' import { Server } from 'socket.io' import { ALLOWED_ORIGIN, MONGODB_URI } from '.\/config.js' import onConnection from '.\/socket_io\/onConnection.js' import { getFilePath } from '.\/utils\/file.js' import onError from '.\/utils\/onError.js' import upload from '.\/utils\/upload.js'  const app = express()  app.use(   cors({     origin: ALLOWED_ORIGIN   }) ) app.use(express.json())  app.use('\/upload', upload.single('file'), (req, res) => {   if (!req.file) return res.sendStatus(400)    const relativeFilePath = req.file.path     .replace(\/\\\\\/g, '\/')     .split('server\/files')[1]    res.status(201).json(relativeFilePath) })  app.use('\/files', (req, res) => {   const filePath = getFilePath(req.url)    res.status(200).sendFile(filePath) })  app.use(onError)  try {   await mongoose.connect(MONGODB_URI, {     useNewUrlParser: true,     useUnifiedTopology: true   })   console.log('? Connected') } catch (e) {   onError(e) }  const server = createServer(app)  const io = new Server(server, {   cors: ALLOWED_ORIGIN,   serveClient: false })  io.on('connection', (socket) => {   onConnection(io, socket) })  const PORT = process.env.PORT || 4000 server.listen(PORT, () => {   console.log(`? Server started on port ${PORT}`) })<\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0441\u043e\u043a\u0435\u0442\u0430\u043c\u0438 (\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f <code>socket_io<\/code>).<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f (<code>onConnection.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import userHandlers from '.\/handlers\/user.handlers.js' import messageHandlers from '.\/handlers\/message.handlers.js'  export default function onConnection(io, socket) {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f   const { roomId, userName } = socket.handshake.query    \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u0445 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u043a\u0435\u0442\u0430   socket.roomId = roomId   socket.userName = userName    \/\/ \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c\u0441\u044f \u043a \u043a\u043e\u043c\u043d\u0430\u0442\u0435   socket.join(roomId)    \/\/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439   userHandlers(io, socket)    \/\/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439   messageHandlers(io, socket) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 (<code>handlers\/user.handlers.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \"\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\" \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 const users = {}  export default function userHandlers(io, socket) {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u043e\u043a\u0435\u0442\u0430   const { roomId, userName } = socket    \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439   if (!users[roomId]) {     users[roomId] = []   }    \/\/ \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439   const updateUserList = () => {     \/\/ \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u043a\u043e\u043c\u043d\u0430\u0442\u0435     io.to(roomId).emit('user_list:update', users[roomId])   }    \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f   socket.on('user:add', async (user) => {     \/\/ \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043e\u0431 \u044d\u0442\u043e\u043c     socket.to(roomId).emit('log', `User ${userName} connected`)      \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0441\u043e\u043a\u0435\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f     user.socketId = socket.id      \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435     users[roomId].push(user)      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439     updateUserList()   })    \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f   socket.on('disconnect', () => {     if (!users[roomId]) return      \/\/ \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c     socket.to(roomId).emit('log', `User ${userName} disconnected`)      \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430     users[roomId] = users[roomId].filter((u) => u.socketId !== socket.id)      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439     updateUserList()   }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 (<code>handlers\/message.handlers.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import Message from '..\/..\/models\/message.model.js' import { removeFile } from '..\/..\/utils\/file.js' import onError from '..\/..\/utils\/onError.js'  \/\/ \"\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\" \u0434\u043b\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 const messages = {}  export default function messageHandlers(io, socket) {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043d\u0430\u0442\u044b   const { roomId } = socket    \/\/ \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439   const updateMessageList = () => {     io.to(roomId).emit('message_list:update', messages[roomId])   }    \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439   socket.on('message:get', async () => {     try {       \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u043e `id` \u043a\u043e\u043c\u043d\u0430\u0442\u044b       const _messages = await Message.find({         roomId       })       \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439       messages[roomId] = _messages        \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439       updateMessageList()     } catch (e) {       onError(e)     }   })    \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   socket.on('message:add', (message) => {     \/\/ \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0436\u0434\u0430\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0411\u0414     Message.create(message).catch(onError)      \/\/ \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430     message.createdAt = Date.now()      \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438,     \/\/ \u0442.\u0435. \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044f, \u0447\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0411\u0414 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439     messages[roomId].push(message)      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439     updateMessageList()   })    \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   socket.on('message:remove', (message) => {     const { messageId, messageType, textOrPathToFile } = message      \/\/ \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0436\u0434\u0430\u0442\u044c \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0438\u0437 \u0411\u0414     \/\/ \u0438 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (\u0435\u0441\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b\u043e\u043c)     Message.deleteOne({ messageId })       .then(() => {         if (messageType !== 'text') {           removeFile(textOrPathToFile)         }       })       .catch(onError)      \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438     messages[roomId] = messages[roomId].filter((m) => m.messageId !== messageId)      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439     updateMessageList()   }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u044f \u0438\u0441\u0445\u043e\u0434\u0438\u043b \u0438\u0437 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e\u0439, \u0447\u0435\u043c \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u043e\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0438\u0437 \u0411\u0414, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435, \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u043c\u0435\u0442\u044c \u0432 \u0411\u0414 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0434\u043b\u044f \u0444\u0438\u043a\u0441\u0430\u0446\u0438\u0438 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"klient\">\u041a\u043b\u0438\u0435\u043d\u0442<\/h2>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>client<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">cd client  # \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 yarn add react-router-dom zustand react-icons emoji-mart react-speech-kit react-timeago socket.io-client nanoid # or npm i ...  # \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 yarn add -D sass # or npm i -D sass<\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/reactrouter.com\/\">react-router-dom<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430;<\/li>\n<li><a href=\"https:\/\/github.com\/pmndrs\/zustand\">zustand<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li><a href=\"https:\/\/react-icons.github.io\/react-icons\/\">react-icons<\/a> \u2014 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043a\u043e\u043d\u043e\u043a \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432;<\/li>\n<li><a href=\"https:\/\/github.com\/missive\/emoji-mart\">emoji-mart<\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u044d\u043c\u043e\u0434\u0437\u0438;<\/li>\n<li><a href=\"https:\/\/github.com\/MikeyParton\/react-speech-kit\">react-speech-kit<\/a> \u2014 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Web_Speech_API\"><code>Web Speech API<\/code><\/a> \u0434\u043b\u044f <code>react<\/code>;<\/li>\n<li><a href=\"https:\/\/github.com\/nmn\/react-timeago\">react-timeago<\/a> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/socket.io-client\">socket.io-client<\/a> \u2014 \u043a\u043b\u0438\u0435\u043d\u0442 <code>socket.io<\/code>;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/nanoid\">nanoid<\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432;<\/li>\n<li><a href=\"https:\/\/sass-scss.ru\/\">sass<\/a> \u2014 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Glossary\/CSS_preprocessor\">\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440<\/a> <code>CSS<\/code>.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">- api   - file.api.js - \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 - components   - NameInput     - NameInput.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f   - Room     - MessageInput       - EmojiMart         - EmojiMart.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u044d\u043c\u043e\u0434\u0437\u0438       - FileInput         - FileInput.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 (\u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f) \u0444\u0430\u0439\u043b\u0430 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438         - FilePreview.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0444\u0430\u0439\u043b\u0430       - Recorder         - Recorder.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u0438         - RecordingModal.js - \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0438\u043f\u0430 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c \u0437\u0430\u043f\u0438\u0441\u0438       - MessageInput.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c, \u0432\u044b\u0431\u043e\u0440\u0430 \u044d\u043c\u043e\u0434\u0437\u0438, \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u0438     - MessageList       - MessageItem.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f       - MessageList.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439     - UserList       - UserList - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439     - Room.js - \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043d\u0430\u0442\u044b   - index.js - \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 - hooks   - useChat.js - \u0445\u0443\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u043a\u0435\u0442\u0430\u043c\u0438   - useStore.js - \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0444\u043e\u0440\u043c\u0435 \u0445\u0443\u043a\u0430 - pages   - Home     - Home.js - \u0434\u043e\u043c\u0430\u0448\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430   - index.js - \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 - routes   - app.routes.js - \u0440\u043e\u0443\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f - styles - \u0441\u0442\u0438\u043b\u0438 (\u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043d\u0430 \u043d\u0438\u0445 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f, \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0445 \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430) - utils   - recording.js - \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u0438   - storage.js - \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c - App.js - \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f - App.scss - \u0441\u0442\u0438\u043b\u0438 - constants.js - \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b - index.js - \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (<code>App.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { BrowserRouter } from 'react-router-dom' import AppRoutes from 'routes\/app.routes' import '.\/App.scss'  function App() {   return (     &lt;BrowserRouter>       &lt;AppRoutes \/>     &lt;\/BrowserRouter>   ) }  export default App<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0440\u043e\u0443\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u0438 \u0440\u043e\u0443\u0442\u044b (<code>routes\/app.routes.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Home } from 'pages' import { Route, Routes } from 'react-router-dom'  const AppRoutes = () => (   &lt;Routes>     &lt;Route path='*' element={&lt;Home \/>} \/>   &lt;\/Routes> )  export default AppRoutes<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0434\u043e\u0440\u043e\u0433\u0438, \u0442.\u0435. \u043f\u0443\u0442\u0438 \u0432\u0435\u0434\u0443\u0442 \u0432 \u0420\u0438\u043c, \u0442.\u0435. \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0440\u043e\u0443\u0442\u0435\u0440, \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b. \u041f\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u043c\u0443 \u0441\u0447\u0435\u0442\u0443, \u043e\u043d \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u043d\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439.<\/p>\n<p>  <\/p>\n<p>\u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0434\u043e\u043c\u0430\u0448\u043d\u044e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (<code>pages\/Home\/Home.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { NameInput, Room } from 'components' import { USER_KEY } from 'constants' import storage from 'utils\/storage'  export const Home = () => {   const user = storage.get(USER_KEY)    return user ? &lt;Room \/> : &lt;NameInput \/> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0438, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438\u043b\u0438 \u0438\u043d\u043f\u0443\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>  <\/p>\n<p>\u0423\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c (<code>utils\/storage.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const storage = {   get: (key) =>     window.localStorage.getItem(key)       ? JSON.parse(window.localStorage.getItem(key))       : null,   set: (key, value) => window.localStorage.setItem(key, JSON.stringify(value)) }  export default storage<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b (<code>constants.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const USER_KEY = 'chat_app_user' export const SERVER_URI = 'http:\/\/localhost:4000'<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (<code>components<\/code>).<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (<code>NameInput\/NameInput.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u044b import { USER_KEY } from 'constants' import { nanoid } from 'nanoid' import { useEffect, useState } from 'react' import storage from 'utils\/storage'  export const NameInput = () => {   \/\/ \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435   const [formData, setFormData] = useState({     userName: '',     \/\/ \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c (\"\u0445\u0430\u0440\u0434\u043a\u043e\u0434\u0438\u043c\") \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 (\u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440) \u043a\u043e\u043c\u043d\u0430\u0442\u044b     roomId: 'main_room'   })   \/\/ \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u043a\u043d\u043e\u043f\u043a\u0438   const [submitDisabled, setSubmitDisabled] = useState(true)    \/\/ \u0432\u0441\u0435 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438   useEffect(() => {     const isSomeFieldEmpty = Object.values(formData).some((v) => !v.trim())     setSubmitDisabled(isSomeFieldEmpty)   }, [formData])    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445   const onChange = ({ target: { name, value } }) => {     setFormData({ ...formData, [name]: value })   }    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b   const onSubmit = (e) => {     e.preventDefault()     if (submitDisabled) return      \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f     const userId = nanoid()      \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435     storage.set(USER_KEY, {       userId,       userName: formData.userName,       roomId: formData.roomId     })      \/\/ \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \"\u043f\u043e\u043f\u0430\u0441\u0442\u044c\" \u0432 \u043a\u043e\u043c\u043d\u0430\u0442\u0443     window.location.reload()   }    return (     &lt;div className='container name-input'>       &lt;h2>Welcome&lt;\/h2>       &lt;form onSubmit={onSubmit} className='form name-room'>         &lt;div>           &lt;label htmlFor='userName'>Enter your name&lt;\/label>           &lt;input             type='text'             id='userName'             name='userName'             minLength={2}             required             value={formData.userName}             onChange={onChange}           \/>         &lt;\/div>         {\/* \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043d\u0430\u0442\u044b (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f) *\/}         &lt;div class='visually-hidden'>           &lt;label htmlFor='roomId'>Enter room ID&lt;\/label>           &lt;input             type='text'             id='roomId'             name='roomId'             minLength={4}             required             value={formData.roomId}             onChange={onChange}           \/>         &lt;\/div>         &lt;button disabled={submitDisabled} className='btn chat'>           Chat         &lt;\/button>       &lt;\/form>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u043c\u043d\u0430\u0442\u044b (<code>Room\/Room.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import useChat from 'hooks\/useChat' import MessageInput from '.\/MessageInput\/MessageInput' import MessageList from '.\/MessageList\/MessageList' import UserList from '.\/UserList\/UserList'  export const Room = () => {   \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   const { users, messages, log, sendMessage, removeMessage } = useChat()   \/\/ \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0438\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c   return (     &lt;div className='container chat'>       &lt;div className='container message'>         &lt;MessageList           log={log}           messages={messages}           removeMessage={removeMessage}         \/>         &lt;MessageInput sendMessage={sendMessage} \/>       &lt;\/div>       &lt;UserList users={users} \/>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0445\u0443\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u043a\u0435\u0442\u0430\u043c\u0438 (<code>hooks\/useChat.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { SERVER_URI, USER_KEY } from 'constants' import { useEffect, useRef, useState } from 'react' import { io } from 'socket.io-client' import storage from 'utils\/storage'  export default function useChat() {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const user = storage.get(USER_KEY)   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439   const [users, setUsers] = useState([])   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439   const [messages, setMessages] = useState([])   \/\/ \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   const [log, setLog] = useState(null)   \/\/ \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u043a\u0435\u0442\u0430   const { current: socket } = useRef(     io(SERVER_URI, {       query: {         \/\/ \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440         roomId: user.roomId,         userName: user.userName       }     })   )    \/\/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438   useEffect(() => {     \/\/ \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \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     socket.emit('user:add', user)      \/\/ \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0438\u0437 \u0411\u0414     socket.emit('message:get')      \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f     socket.on('log', (log) => {       setLog(log)     })      \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439     socket.on('user_list:update', (users) => {       setUsers(users)     })      \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439     socket.on('message_list:update', (messages) => {       setMessages(messages)     })   }, [])    \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   const sendMessage = (message) => {     socket.emit('message:add', message)   }    \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   const removeMessage = (message) => {     socket.emit('message:remove', message)   }    return { users, messages, log, sendMessage, removeMessage } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 (<code>UserList\/UserList.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { AiOutlineUser } from 'react-icons\/ai'  export default function UserList({ users }) {   return (     &lt;div className='container user'>       &lt;h2>Users&lt;\/h2>       &lt;ul className='list user'>         {users.map(({ userId, userName }) => (           &lt;li key={userId} className='item user'>             &lt;AiOutlineUser className='icon user' \/>             {userName}           &lt;\/li>         ))}       &lt;\/ul>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u043c\u0435\u043d.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 (<code>MessageList\/MessageList.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { useEffect, useRef } from 'react' import MessageItem from '.\/MessageItem'  export default function MessageList({ log, messages, removeMessage }) {   \/\/ \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439   const logRef = useRef()   \/\/ \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u0435\u0446 \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439   const bottomRef = useRef()    \/\/ \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u043a \u043a\u043e\u043d\u0446\u0443 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   \/\/ \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439,   \/\/ \u043a\u043e\u0433\u0434\u0430 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0447\u0430\u0442\u0430 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   useEffect(() => {     bottomRef.current.scrollIntoView({       behavior: 'smooth'     })   }, [messages])    \/\/ \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   useEffect(() => {     if (log) {       logRef.current.style.opacity = 0.8       logRef.current.style.zIndex = 1        const timerId = setTimeout(() => {         logRef.current.style.opacity = 0         logRef.current.style.zIndex = -1          clearTimeout(timerId)       }, 1500)     }   }, [log])    return (     &lt;div className='container message'>       &lt;h2>Messages&lt;\/h2>       &lt;ul className='list message'>         {\/* \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f *\/}         {messages.map((message) => (           &lt;MessageItem             key={message.messageId}             message={message}             removeMessage={removeMessage}           \/>         ))}          &lt;p ref={bottomRef}>&lt;\/p>          &lt;p ref={logRef} className='log'>           {log}         &lt;\/p>       &lt;\/ul>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (<code>MessageList\/MessageItem.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { SERVER_URI, USER_KEY } from 'constants' import { CgTrashEmpty } from 'react-icons\/cg' import { GiSpeaker } from 'react-icons\/gi' import { useSpeechSynthesis } from 'react-speech-kit' import TimeAgo from 'react-timeago' import storage from 'utils\/storage'  export default function MessageItem({ message, removeMessage }) {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const user = storage.get(USER_KEY)   \/\/ \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0440\u0435\u0447\u044c   const { speak, voices } = useSpeechSynthesis()   \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u044f\u0437\u044b\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f   const lang = document.documentElement.lang || 'en'   \/\/ \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u043b\u043e\u0441 \u043e\u0442 \u0433\u0443\u0433\u043b\u0430   const voice = voices.find(     (v) => v.lang.includes(lang) &amp;&amp; v.name.includes('Google')   )    \/\/ \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   let element    \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u0437 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0442\u0438\u043f \u0438 \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443   const { messageType, textOrPathToFile } = message    \/\/ \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443   const pathToFile = `${SERVER_URI}\/files${textOrPathToFile}`    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0438\u043f\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   switch (messageType) {     case 'text':       element = (         &lt;>           &lt;button             className='btn'             \/\/ \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438             onClick={() => speak({ text: textOrPathToFile, voice })}           >             &lt;GiSpeaker className='icon speak' \/>           &lt;\/button>           &lt;p>{textOrPathToFile}&lt;\/p>         &lt;\/>       )       break     case 'image':       element = &lt;img src={pathToFile} alt='' \/>       break     case 'audio':       element = &lt;audio src={pathToFile} controls>&lt;\/audio>       break     case 'video':       element = &lt;video src={pathToFile} controls>&lt;\/video>       break     default:       return null   }    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e   const isMyMessage = user.userId === message.userId    return (     &lt;li className={`item message ${isMyMessage ? 'my' : ''}`}>       &lt;p className='username'>{isMyMessage ? 'Me' : message.userName}&lt;\/p>        &lt;div className='inner'>         {element}          {isMyMessage &amp;&amp; (           {\/* \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f *\/}           &lt;button className='btn' onClick={() => removeMessage(message)}>             &lt;CgTrashEmpty className='icon remove' \/>           &lt;\/button>         )}       &lt;\/div>        &lt;p className='datetime'>         &lt;TimeAgo date={message.createdAt} \/>       &lt;\/p>     &lt;\/li>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0432 \u0444\u043e\u0440\u043c\u0435 \u0445\u0443\u043a\u0430 (<code>hooks\/useStore.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import create from 'zustand'  const useStore = create((set, get) => ({   \/\/ \u0444\u0430\u0439\u043b   file: null,   \/\/ \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0444\u0430\u0439\u043b\u0430   showPreview: false,   \/\/ \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u044d\u043c\u043e\u0434\u0437\u0438   showEmoji: false,   \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430   setFile: (file) => {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0444\u0430\u0439\u043b     const prevFile = get().file     if (prevFile) {       \/\/ https:\/\/w3c.github.io\/FileAPI\/#creating-revoking       \/\/ \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0443\u0442\u0435\u0447\u0435\u043a \u043f\u0430\u043c\u044f\u0442\u0438       URL.revokeObjectURL(prevFile)     }     \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b     set({ file })   },   \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0432\u044c\u044e   setShowPreview: (showPreview) => set({ showPreview }),   \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u043c\u043e\u0434\u0437\u0438   setShowEmoji: (showEmoji) => set({ showEmoji }) }))  export default useStore<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (<code>MessageInput\/MessageInput.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import fileApi from 'api\/file.api' import { USER_KEY } from 'constants' import useStore from 'hooks\/useStore' import { nanoid } from 'nanoid' import { useEffect, useRef, useState } from 'react' import { FiSend } from 'react-icons\/fi' import storage from 'utils\/storage' import EmojiMart from '.\/EmojiMart\/EmojiMart' import FileInput from '.\/FileInput\/FileInput' import Recorder from '.\/Recorder\/Recorder'  export default function MessageInput({ sendMessage }) {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const user = storage.get(USER_KEY)   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const state = useStore((state) => state)   const {     file,     setFile,     showPreview,     setShowPreview,     showEmoji,     setShowEmoji   } = state   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   const [text, setText] = useState('')   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u043a\u043d\u043e\u043f\u043a\u0438   const [submitDisabled, setSubmitDisabled] = useState(true)   \/\/ \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u043d\u043f\u0443\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   const inputRef = useRef()    \/\/ \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043b\u0438\u0431\u043e \u0444\u0430\u0439\u043b   useEffect(() => {     setSubmitDisabled(!text.trim() &amp;&amp; !file)   }, [text, file])    \/\/ \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u043f\u0440\u0435\u0432\u044c\u044e \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0444\u0430\u0439\u043b\u0430   useEffect(() => {     setShowPreview(file)   }, [file, setShowPreview])    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   const onSubmit = async (e) => {     e.preventDefault()     if (submitDisabled) return      \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435     const { userId, userName, roomId } = user     let message = {       messageId: nanoid(),       userId,       userName,       roomId     }      if (!file) {       \/\/ \u0442\u0438\u043f\u043e\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442       message.messageType = 'text'       message.textOrPathToFile = text     } else {       \/\/ \u0442\u0438\u043f\u043e\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b       try {         \/\/ \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u043d\u0435\u043c\u0443         const path = await fileApi.upload({ file, roomId })         \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0438\u043f \u0444\u0430\u0439\u043b\u0430         const type = file.type.split('\/')[0]          message.messageType = type         message.textOrPathToFile = path       } catch (e) {         console.error(e)       }     }      \/\/ \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u044d\u043c\u043e\u0434\u0437\u0438, \u0435\u0441\u043b\u0438 \u043e\u043d \u043e\u0442\u043a\u0440\u044b\u0442     if (showEmoji) {       setShowEmoji(false)     }      \/\/ \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435     sendMessage(message)      \/\/ \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435     setText('')     setFile(null)   }    return (     &lt;form onSubmit={onSubmit} className='form message'>       &lt;EmojiMart setText={setText} messageInput={inputRef.current} \/>       &lt;FileInput \/>       &lt;Recorder \/>       &lt;input         type='text'         autoFocus         placeholder='Message...'         value={text}         onChange={(e) => setText(e.target.value)}         ref={inputRef}         \/\/ \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0444\u0430\u0439\u043b\u0430 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043d\u0435\u043b\u044c\u0437\u044f         disabled={showPreview}       \/>       &lt;button className='btn' type='submit' disabled={submitDisabled}>         &lt;FiSend className='icon' \/>       &lt;\/button>     &lt;\/form>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u043c\u043e\u0434\u0437\u0438 (<code>MessageInput\/EmojiMart\/EmojiMart.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Picker } from 'emoji-mart' import 'emoji-mart\/css\/emoji-mart.css' import useStore from 'hooks\/useStore' import { useCallback, useEffect } from 'react' import { BsEmojiSmile } from 'react-icons\/bs'  export default function EmojiMart({ setText, messageInput }) {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const { showEmoji, setShowEmoji, showPreview } = useStore(     ({ showEmoji, setShowEmoji, showPreview }) => ({       showEmoji,       setShowEmoji,       showPreview     })   )    \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 `Esc`   const onKeydown = useCallback(     (e) => {       if (e.key === 'Escape') {         setShowEmoji(false)       }     },     [setShowEmoji]   )    \/\/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 `window`   useEffect(() => {     window.addEventListener('keydown', onKeydown)      return () => {       window.removeEventListener('keydown', onKeydown)     }   }, [onKeydown])    \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043c\u043e\u0434\u0437\u0438 \u043a \u0442\u0435\u043a\u0441\u0442\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f   const onSelect = ({ native }) => {     setText((text) => text + native)     messageInput.focus()   }    return (     &lt;div className='container emoji'>       &lt;button         className='btn'         type='button'         {\/* \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\/\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u044d\u043c\u043e\u0434\u0437\u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 *\/}         onClick={() => setShowEmoji(!showEmoji)}         disabled={showPreview}       >         &lt;BsEmojiSmile className='icon' \/>       &lt;\/button>       {showEmoji &amp;&amp; (         &lt;Picker           onSelect={onSelect}           emojiSize={20}           showPreview={false}           perLine={6}         \/>       )}     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 (<code>MessageInput\/FileInput\/FileInput.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import useStore from 'hooks\/useStore' import { useEffect, useRef } from 'react' import { MdAttachFile } from 'react-icons\/md' import FilePreview from '..\/FilePreview\/FilePreview'  export default function FileInput() {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0438 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const { file, setFile } = useStore(({ file, setFile }) => ({ file, setFile }))   \/\/ \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u043d\u043f\u0443\u0442 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430   \/\/ \u043c\u044b \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u043f\u0443\u0442 \u0437\u0430 \u043a\u043d\u043e\u043f\u043a\u043e\u0439   const inputRef = useRef()    \/\/ \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430 \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0444\u0430\u0439\u043b\u0430   useEffect(() => {     if (!file) {       inputRef.current.value = ''     }   }, [file])    return (     &lt;div className='container file'>       &lt;input         type='file'         accept='image\/*, audio\/*, video\/*'         onChange={(e) => setFile(e.target.files[0])}         className='visually-hidden'         ref={inputRef}       \/>       &lt;button         type='button'         className='btn'         \/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043a\u043b\u0438\u043a \u0438\u043d\u043f\u0443\u0442\u0443         onClick={() => inputRef.current.click()}       >         &lt;MdAttachFile className='icon' \/>       &lt;\/button>        {file &amp;&amp; &lt;FilePreview \/>}     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0444\u0430\u0439\u043b\u0430 (<code>MessageInput\/FileInput\/FilePreview.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import useStore from 'hooks\/useStore' import { useEffect, useState } from 'react' import { AiOutlineClose } from 'react-icons\/ai'  export default function FilePreview() {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0438 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const { file, setFile } = useStore(({ file, setFile }) => ({ file, setFile }))   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0444\u0430\u0439\u043b\u0430   const [src, setSrc] = useState()   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0442\u0438\u043f\u0430 \u0444\u0430\u0439\u043b\u0430   const [type, setType] = useState()    \/\/ \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0444\u0430\u0439\u043b\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438 \u0442\u0438\u043f \u0444\u0430\u0439\u043b\u0430   useEffect(() => {     if (file) {       setSrc(URL.createObjectURL(file))       setType(file.type.split('\/')[0])     }   }, [file])    \/\/ \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0444\u0430\u0439\u043b\u0430   let element    switch (type) {     case 'image':       element = &lt;img src={src} alt={file.name} \/>       break     case 'audio':       element = &lt;audio src={src} controls>&lt;\/audio>       break     case 'video':       element = &lt;video src={src} controls>&lt;\/video>       break     default:       element = null       break   }    return (     &lt;div className='container preview'>       {element}        &lt;button         type='button'         className='btn close'         \/\/ \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b \u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043f\u0440\u0435\u0432\u044c\u044e         onClick={() => setFile(null)}       >         &lt;AiOutlineClose className='icon close' \/>       &lt;\/button>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u0438. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b (<code>utils\/recording.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ https:\/\/www.w3.org\/TR\/mediastream-recording\/ \/\/ \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u043a\u043e\u0440\u0434\u0435\u0440\u0430, \u0447\u0430\u0441\u0442\u0435\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043f\u043e\u0442\u043e\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 let mediaRecorder = null let mediaChunks = [] let mediaConstraints = null  \/\/ https:\/\/w3c.github.io\/mediacapture-main\/#constrainable-interface \/\/ \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0430\u0443\u0434\u0438\u043e\u043f\u043e\u0442\u043e\u043a\u0443 export const audioConstraints = {   audio: {     echoCancellation: true,     autoGainControl: true,     noiseSuppression: true   } }  \/\/ \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u043c\u0435\u0434\u0438\u0430\u043f\u043e\u0442\u043e\u043a\u0443 (\u0430\u0443\u0434\u0438\u043e + \u0432\u0438\u0434\u0435\u043e) export const videoConstraints = {   ...audioConstraints,   video: {     width: 1920,     height: 1080,     frameRate: 60.0   } }  \/\/ \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0438 export const isRecordingStarted = () => !!mediaRecorder  \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 export const pauseRecording = () => {   mediaRecorder.pause() }  \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 export const resumeRecording = () => {   mediaRecorder.resume() }  \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0438 \/\/ \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u043f\u043e\u0442\u043e\u043a\u0443 export const startRecording = async (constraints) => {   mediaConstraints = constraints    try {     \/\/ https:\/\/w3c.github.io\/mediacapture-main\/#dom-mediadevices-getusermedia     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e\u0442\u043e\u043a \u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f     const stream = await navigator.mediaDevices.getUserMedia(constraints)     \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0438\u043f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438     const type = constraints.video ? 'video' : 'audio'      \/\/ https:\/\/www.w3.org\/TR\/mediastream-recording\/#mediarecorder-constructor     \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0440\u0435\u043a\u043e\u0440\u0434\u0435\u0440\u0430     mediaRecorder = new MediaRecorder(stream, { mimeType: `${type}\/webm` })      \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044c \u0434\u0430\u043d\u043d\u044b\u0445     mediaRecorder.ondataavailable = ({ data }) => {       mediaChunks.push(data)     }      \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044c     mediaRecorder.start(250)      \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u043e\u0442\u043e\u043a     return stream   } catch (e) {     console.error(e)   } }  \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 export const stopRecording = () => {   \/\/ \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u043a\u043e\u0440\u0434\u0435\u0440   mediaRecorder.stop()   \/\/ \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0442\u0440\u0435\u043a\u0438 \u0438\u0437 \u043f\u043e\u0442\u043e\u043a\u0430   mediaRecorder.stream.getTracks().forEach((t) => {     t.stop()   })    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0438\u043f \u0437\u0430\u043f\u0438\u0441\u0438   const type = mediaConstraints.video ? 'video' : 'audio'   \/\/ https:\/\/w3c.github.io\/FileAPI\/#file-constructor   \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b   const file = new File(mediaChunks, 'my_record.webm', {     type: `${type}\/webm`   })    \/\/ \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0438\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437   mediaRecorder.ondataavailable = null   \/\/ \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u043c \u0440\u0435\u043a\u043e\u0440\u0434\u0435\u0440   mediaRecorder = null   \/\/ \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438   mediaChunks = []    \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0444\u0430\u0439\u043b   return file }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 (<code>MessageInput\/Recorder\/Recorder.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import useStore from 'hooks\/useStore' import { useState } from 'react' import { RiRecordCircleLine } from 'react-icons\/ri' import RecordingModal from '.\/RecordingModal'  export default function Recorder() {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const showPreview = useStore(({ showPreview }) => showPreview)   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430   const [showModal, setShowModal] = useState(false)    return (     &lt;div className='container recorder'>       &lt;button         type='button'         className='btn'         \/\/ \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438         onClick={() => setShowModal(true)}         \/\/ \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0435\u0432\u044c\u044e \u0444\u0430\u0439\u043b\u0430         disabled={showPreview}       >         &lt;RiRecordCircleLine className='icon' \/>       &lt;\/button>       {showModal &amp;&amp; &lt;RecordingModal setShowModal={setShowModal} \/>}     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0438\u043f\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 (<code>MessageInput\/Recorder\/RecordingModal.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import useStore from 'hooks\/useStore' import { useRef, useState } from 'react' import { BsFillPauseFill, BsFillPlayFill, BsFillStopFill } from 'react-icons\/bs' import {   audioConstraints,   isRecordingStarted,   pauseRecording,   resumeRecording,   startRecording,   stopRecording,   videoConstraints } from 'utils\/recording'  export default function RecordingModal({ setShowModal }) {   \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const setFile = useStore(({ setFile }) => setFile)   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043f\u043e\u0442\u043e\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445   \/\/ \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0430\u0443\u0434\u0438\u043e\u0437\u0430\u043f\u0438\u0441\u044c   const [constraints, setConstraints] = useState(audioConstraints)   \/\/ \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0438   const [recording, setRecording] = useState(false)   \/\/ \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0438\u043f\u0430 \u0437\u0430\u043f\u0438\u0441\u0438   const selectBlockRef = useRef()   \/\/ \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 `video`   const videoRef = useRef()    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043f\u043e\u0442\u043e\u043a\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0438\u043f\u0430 \u0437\u0430\u043f\u0438\u0441\u0438   const onChange = ({ target: { value } }) =>     value === 'audio'       ? setConstraints(audioConstraints)       : setConstraints(videoConstraints)    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438\/\u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438   const pauseResume = () => {     if (recording) {       pauseRecording()     } else {       resumeRecording()     }     setRecording(!recording)   }    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0438   const start = async () => {     if (isRecordingStarted()) {       return pauseResume()     }      \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e\u0442\u043e\u043a     const stream = await startRecording(constraints)      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0438     setRecording(true)      \/\/ \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0438\u043f\u0430 \u0437\u0430\u043f\u0438\u0441\u0438     selectBlockRef.current.style.display = 'none'      \/\/ \u0435\u0441\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u044c     if (constraints.video &amp;&amp; stream) {       videoRef.current.style.display = 'block'       \/\/ \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0442\u043e\u043a \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 `video`       videoRef.current.srcObject = stream     }   }    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438   const stop = () => {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0444\u0430\u0439\u043b     const file = stopRecording()      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0438     setRecording(false)      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0444\u0430\u0439\u043b     setFile(file)      \/\/ \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u043a\u0443     setShowModal(false)   }    return (     &lt;div       className='overlay'       onClick={(e) => {         \/\/ \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043e\u043a\u043d\u043e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0437\u0430 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438         if (e.target.className !== 'overlay') return         setShowModal(false)       }}     >       &lt;div className='modal'>         &lt;div ref={selectBlockRef}>           &lt;h2>Select type&lt;\/h2>           &lt;select onChange={onChange}>             &lt;option value='audio'>Audio&lt;\/option>             &lt;option value='video'>Video&lt;\/option>           &lt;\/select>         &lt;\/div>          {\/* \u0432\u043e\u0442 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b 2 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0438 *\/}         {isRecordingStarted() &amp;&amp; &lt;p>{recording ? 'Recording...' : 'Paused'}&lt;\/p>}          &lt;video ref={videoRef} autoPlay muted \/>          &lt;div className='controls'>           &lt;button className='btn play' onClick={start}>             {recording ? (               &lt;BsFillPauseFill className='icon' \/>             ) : (               &lt;BsFillPlayFill className='icon' \/>             )}           &lt;\/button>           {isRecordingStarted() &amp;&amp; (             &lt;button className='btn stop' onClick={stop}>               &lt;BsFillStopFill className='icon' \/>             &lt;\/button>           )}         &lt;\/div>       &lt;\/div>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e, \u043c\u044b \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e, \u043d\u043e, \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<h2 id=\"proverka-rabotosposobnosti-prilozheniya\">\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>yarn dev<\/code> \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c 2 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>http:\/\/localhost:3000<\/code> (\u043e\u0434\u043d\u0443 \u0438\u0437 \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0438\u043d\u043a\u043e\u0433\u043d\u0438\u0442\u043e).<\/p>\n<p>  <\/p>\n<p>\u0412\u0432\u043e\u0434\u0438\u043c \u0438\u043c\u0435\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u0432\u0445\u043e\u0434\u0438\u043c \u0432 \u043a\u043e\u043c\u043d\u0430\u0442\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/qe\/9u\/4e\/qe9u4eaz8am9msuolxa-a8fq95w.png\" data-src=\"https:\/\/habrastorage.org\/webt\/qe\/9u\/4e\/qe9u4eaz8am9msuolxa-a8fq95w.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/yd\/uw\/-u\/yduw-udx--cle5j2whsigtdgjl0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/yd\/uw\/-u\/yduw-udx--cle5j2whsigtdgjl0.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u044d\u043c\u043e\u0434\u0437\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/x2\/gb\/8z\/x2gb8zi6norlv6mky2aqxcaeahe.png\" data-src=\"https:\/\/habrastorage.org\/webt\/x2\/gb\/8z\/x2gb8zi6norlv6mky2aqxcaeahe.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0444\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/4v\/as\/aa\/4vasaahjqmllndhg3cuvl8nbhr0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/4v\/as\/aa\/4vasaahjqmllndhg3cuvl8nbhr0.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0430\u0443\u0434\u0438\u043e\/\u0432\u0438\u0434\u0435\u043e \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/po\/be\/5i\/pobe5ild8ddh5omzggi-5v9gnls.png\" data-src=\"https:\/\/habrastorage.org\/webt\/po\/be\/5i\/pobe5ild8ddh5omzggi-5v9gnls.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/1t\/-i\/9x\/1t-i9x_hc_b5al2z25m9r87wz-y.png\" data-src=\"https:\/\/habrastorage.org\/webt\/1t\/-i\/9x\/1t-i9x_hc_b5al2z25m9r87wz-y.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u043e\u0447\u043a\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/pk\/eo\/8g\/pkeo8gzcyyq7gx0fcocbzwnzbse.png\" data-src=\"https:\/\/habrastorage.org\/webt\/pk\/eo\/8g\/pkeo8gzcyyq7gx0fcocbzwnzbse.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443, \u0443 \u043d\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 <code>id<\/code>, \u043d\u0438\u0447\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u043d\u0430\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u043e\u0432 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c <code>WebRTC<\/code>, \u043e \u0447\u0435\u043c \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0432 <a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/649369\/\">\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a>. \u0411\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u043e \u0432\u0430\u0448\u0438\u043c \u0434\u043e\u043c\u0430\u0448\u043d\u0438\u043c \u0437\u0430\u0434\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u044d\u0442\u043e \u0432\u0441\u0435, \u0447\u0435\u043c \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 happy coding!<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p><a href=\"https:\/\/cloud.timeweb.com\/vds-promo-1-rub?utm_source=habr&amp;utm_medium=banner&amp;utm_campaign=vds-promo-1-rub\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/st\/f9\/ui\/stf9uiznc_h9q5qyjl2fw7sx0m0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/st\/f9\/ui\/stf9uiznc_h9q5qyjl2fw7sx0m0.png\"\/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/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\/company\/timeweb\/blog\/655143\/\"> https:\/\/habr.com\/ru\/company\/timeweb\/blog\/655143\/<\/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_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/gp\/rx\/uj\/gprxuj2skxbmhitwrnlg1ibcalm.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/gp\/rx\/uj\/gprxuj2skxbmhitwrnlg1ibcalm.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u043c\u0435\u043d\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/socket.io\/\"><code>Socket.io<\/code><\/a>, <a href=\"https:\/\/expressjs.com\/ru\/\"><code>Express<\/code><\/a> \u0438 <a href=\"https:\/\/ru.reactjs.org\/\"><code>React<\/code><\/a> \u0441 \u0430\u043a\u0446\u0435\u043d\u0442\u043e\u043c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043c\u0435\u0434\u0438\u0430.<\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0432\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f;<\/li>\n<li>\u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0435\u0433\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435;<\/li>\n<li>\u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043c\u044f \u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 (\u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438\/\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438);<\/li>\n<li>\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/WebSocket\">\u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442\u044b<\/a> \u0438 \u0432\u0445\u043e\u0434 \u0432 \u043a\u043e\u043c\u043d\u0430\u0442\u0443 <code>main_room<\/code> (\u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430 \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043d\u0430\u0442);<\/li>\n<li>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/li>\n<li>\u0442\u0438\u043f\u043e\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u0430\u0443\u0434\u0438\u043e, \u0432\u0438\u0434\u0435\u043e \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435;<\/li>\n<li>\u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435;<\/li>\n<li>\u043f\u0443\u0442\u044c \u043a \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0444\u0430\u0439\u043b\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435;<\/li>\n<li>\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445;<\/li>\n<li>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f;<\/li>\n<li>\u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0430\u0443\u0434\u0438\u043e \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430;<\/li>\n<li>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u044d\u043c\u043e\u0434\u0437\u0438;<\/li>\n<li>\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f;<\/li>\n<li>\u0438 \u0442.\u0434.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/harryheman\/react-express-socket.io-chat-app\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043f\u0440\u043e\u0448\u0443 \u043f\u043e\u0434 \u043a\u0430\u0442.<\/p>\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-330516","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/330516","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=330516"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/330516\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=330516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=330516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=330516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}