{"id":105301,"date":"2025-04-09T19:13:53","date_gmt":"2025-04-09T14:43:53","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/"},"modified":"2025-04-09T19:13:53","modified_gmt":"2025-04-09T14:43:53","slug":"cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/","title":{"rendered":"\u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 CloudFlare \u0648 Nuxt: \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0686\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc"},"content":{"rendered":"<div data-article-id=\"2394639\" id=\"article-body\">\n<p>\u0627\u0632 \u0632\u0645\u0627\u0646 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u062f\u0631 Nuxflare \u060c \u0627\u06cc\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0648\u0636\u0648\u0639 \u0631\u0627 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u0627\u0634\u06cc\u0627\u0621 \u0628\u0627 \u062f\u0648\u0627\u0645 Cloudflare \u0686\u06cc\u0633\u062a\u061f \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 NUXT \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/p>\n<p>\u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0628\u0647 \u0637\u0631\u0632 \u0634\u06af\u0641\u062a \u0622\u0648\u0631 \u0645\u0642\u0631\u0648\u0646 \u0628\u0647 \u0635\u0631\u0641\u0647 \u0647\u0633\u062a\u0646\u062f \u060c \u0627\u0645\u0627 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u06a9\u0645\u06cc \u0645\u0631\u0645\u0648\u0632 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u0646\u062f. \u0645\u0646 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0633\u0631\u06cc \u067e\u0633\u062a \u0647\u0627 \u062a\u062c\u0632\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u062f \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u0628\u0647\u0631\u0647 \u0631\u0627 \u0628\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646\u0686\u0647 \u0631\u0627 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0633\u0627\u0632\u06cc\u0645 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<p><\/p>\n<p>\u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u0646\u062f\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f: https:\/\/websockets-demo.nuxflare.com<\/p>\n<p>\u0627\u0632 repo github \u062f\u06cc\u062f\u0646 \u06a9\u0646\u06cc\u062f: https:\/\/github.com\/nuxflare\/dabor-websockets<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%A8%DB%8C%D8%A7%DB%8C%DB%8C%D8%AF_%D8%B4%D8%B1%D9%88%D8%B9_%DA%A9%D9%86%DB%8C%D9%85\" >\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_nuxflare\" >\u062a\u0646\u0638\u06cc\u0645 nuxflare<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D8%B2%DB%8C%D8%B1%D8%B3%D8%A7%D8%AE%D8%AA_%D9%87%D8%A7\" >\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0632\u06cc\u0631\u0633\u0627\u062e\u062a \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%AF%D8%B1%DA%A9_%D8%A7%D8%B4%DB%8C%D8%A7%D8%A1_%D8%A8%D8%A7%D8%AF%D9%88%D8%A7%D9%85\" >\u062f\u0631\u06a9 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%84%D8%A7%D8%B3_%D8%A7%D8%B4%DB%8C%D8%A7%D8%A1_%D8%A8%D8%A7%D8%AF%D9%88%D8%A7%D9%85_%D9%85%D8%A7\" >\u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u0627\u0633 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0645\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_WebSocket\" >\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc WebSocket<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D8%A8%D8%A7_%D8%B9%D9%86%D9%88%D8%A7%D9%86_%D9%BE%D8%B1%D9%88%D8%AA%DA%A9%D9%84_WebSocket\" >\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u0627 \u0639\u0646\u0648\u0627\u0646 \u067e\u0631\u0648\u062a\u06a9\u0644 WebSocket<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#WebSocket_Hibernation_%D9%88_SerializeDeserialize_%D9%BE%DB%8C%D9%88%D8%B3%D8%AA\" >WebSocket Hibernation \u0648 Serialize\/Deserialize \u067e\u06cc\u0648\u0633\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_WebSocket\" >\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc WebSocket<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%AA%D8%A7%D8%A8%D8%B9_%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1\" >\u062a\u0627\u0628\u0639 \u0627\u0646\u062a\u0634\u0627\u0631<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D9%86%D9%88%D8%B4%D8%AA%D9%86_%DA%A9%D8%A7%D8%B1%DA%AF%D8%B1_%D9%85%D8%A7\" >\u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0631\u06af\u0631 \u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D9%86%D9%88%D8%B4%D8%AA%D9%86_%D8%AC%D8%A8%D9%87%D9%87_%D8%A8%D8%A7_useWebSocket\" >\u0646\u0648\u0634\u062a\u0646 \u062c\u0628\u0647\u0647 \u0628\u0627 useWebSocket<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%85%D8%A7\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/cloudflare-durable-objects-nuxt-building-a-real-time-chat-app-pii\/#%D9%82%D8%A8%D9%84_%D8%A7%D8%B2_%D8%B1%D9%81%D8%AA%D9%86_%E2%80%A6\" >\u0642\u0628\u0644 \u0627\u0632 \u0631\u0641\u062a\u0646 &#8230;<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%DB%8C%D8%A7%DB%8C%DB%8C%D8%AF_%D8%B4%D8%B1%D9%88%D8%B9_%DA%A9%D9%86%DB%8C%D9%85\"><\/span>\n<p>  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0646 \u0627\u0632 Bun \u0628\u0631\u0627\u06cc \u062e\u0646\u06a9 DX \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u060c \u0627\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 NPM \u060c PNPM \u06cc\u0627 \u0646\u062e \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f &#8211; \u0647\u0631\u0686\u0647 \u0631\u0627\u062d\u062a \u062a\u0631 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f Nuxt \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>bunx nuxi@latest init durable-websockets <span class=\"nt\">-t<\/span> v4-compat\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0627\u0632 \u062d\u0627\u0644\u062a \u0633\u0627\u0632\u06af\u0627\u0631\u06cc Nuxt 4 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0632 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 Nuxt 4 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u0647\u0646\u06af\u0627\u0645 \u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0622\u0645\u0627\u062f\u0647 \u0634\u0648\u06cc\u0645.<\/p>\n<p>\u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>bunx nuxi@latest module add ui vueuse <span class=\"c\"># Nuxt UI v3, @vueuse\/core<\/span>\nbun i <span class=\"nt\">-D<\/span> nuxflare @cloudflare\/workers-types\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0627\u0632 Nuxflare \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0648 \u0686\u06cc\u0632 \u0628\u0647 CloudFlare \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<ol>\n<li>  \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0635\u0644\u06cc Nuxt \u0628\u0647 \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 CloudFlare.<\/li>\n<li>  \u0633\u0631\u0648\u0631 WebSOCKETS \u0628\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645.<\/li>\n<\/ol>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0634\u0645\u0627 <em>\u0642\u0648\u0637\u06cc<\/em> \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u0628\u062f\u0648\u0646 Nuxflare \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f \u060c \u0648\u0627\u0642\u0639\u0627\u064b \u062f\u0644\u06cc\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f. \u062d\u062a\u06cc \u0627\u06af\u0631 \u0631\u0627\u062d\u062a \u0645\u06cc \u0646\u0648\u06cc\u0633\u06cc\u062f <code>wrangler.toml<\/code> \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062e\u0648\u062f\u062a\u0627\u0646 \u060c Nuxflare \u0627\u06cc\u062c\u0627\u062f \u0648 \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u062f\u0646 \u0645\u0646\u0627\u0628\u0639 \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0634\u0645\u0627 \u0647\u0646\u0648\u0632 \u0647\u0645 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0627\u0645\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u062e\u0635\u06cc \u0633\u0627\u0632\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Wrangler \u062e\u0648\u062f \u062f\u0631 \u0647\u0631 \u0635\u0648\u0631\u062a \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062e\u0648\u062f \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_nuxflare\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 nuxflare<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f Nuxflare \u0631\u0627 \u0622\u063a\u0627\u0632 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>bun nuxflare init\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Nuxflare \u0686\u0646\u062f\u06cc\u0646 \u0633\u0624\u0627\u0644 \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u060c \u062f\u0627\u0645\u0646\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc (\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 Dev and Prod) \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0642\u062f\u0627\u0645\u0627\u062a GitHub \u0627\u0632 \u0634\u0645\u0627 \u0645\u06cc \u067e\u0631\u0633\u062f. \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645 <code>websockets-demo.nuxflare.com<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062f\u0627\u0645\u0646\u0647 \u062a\u0648\u0644\u06cc\u062f \u0648 \u0631\u0647\u0627 \u06a9\u0631\u062f\u0646 \u062f\u0627\u0645\u0646\u0647 \u062a\u0648\u0633\u0639\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 CloudFlare \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0642\u062f\u0627\u0645\u0627\u062a GitHub \u060c \u0645\u0646 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u06cc\u06cc\u0646 \u0634\u062f\u0647 &#8220;Deployments Conseplements&#8221; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u060c \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u06a9\u062f \u062f\u0631 <code>main<\/code> \u0634\u0627\u062e\u0647 \u062f\u0631 <code>nuxflare\/durable-websockets<\/code> \u0645\u062e\u0632\u0646 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0647 <code>websockets-demo.nuxflare.com<\/code>\u0628\u0634\u0631<\/p>\n<p>Nuxflare CLI \u0647\u0645\u0686\u0646\u06cc\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0648\u0627\u062f\u0627\u0631 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc A \u0645\u06cc \u06a9\u0646\u062f <code>CLOUDFLARE_API_TOKEN<\/code> \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u0646\u0627\u0628\u0639 \u0628\u0647 CloudFlare.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u060c Nuxflare \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0645\u0627\u0646\u0646\u062f \u0631\u0627 \u0646\u0635\u0628 \u0645\u06cc \u06a9\u0646\u062f <code>sst<\/code> (sst.dev) \u0648 <code>wrangler<\/code>\u060c \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0646\u0627\u0628\u0639 CloudFlare \u0644\u0627\u0632\u0645 \u0627\u0633\u062a. \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f <code>nuxflare<\/code> \u0648 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 <code>sst.config.ts<\/code>\u0628\u0634\u0631<\/p>\n<p>\u0627\u062d\u0633\u0627\u0633 \u063a\u0631\u0642 \u0634\u062f\u0646\u061f \u0646\u06af\u0631\u0627\u0646 \u0622\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f \u062f\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0645\u0648\u0627\u0631\u062f \u060c \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0645\u0644\u0627\u064b \u0646\u0627\u062f\u06cc\u062f\u0647 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>nuxflare<\/code> \u067e\u0648\u0634\u0647-\u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645\u0647 \u0632\u06cc\u0631\u0633\u0627\u062e\u062a \u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 &#8220;\u062c\u0627\u062f\u0648\u06af\u0631&#8221; \u06a9\u062f\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f. \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0645\u0646\u0628\u0639 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0645\u0631\u062a\u06a9\u0628 \u0634\u0648\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D8%B2%DB%8C%D8%B1%D8%B3%D8%A7%D8%AE%D8%AA_%D9%87%D8%A7\"><\/span>\n<p>  \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0632\u06cc\u0631\u0633\u0627\u062e\u062a \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u0627\u0644 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0632\u06cc\u0631\u0633\u0627\u062e\u062a \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645 <code>run()<\/code> \u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u062f <code>sst.config.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">async<\/span> <span class=\"nf\">run<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Nuxt<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"k\">import<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.\/nuxflare\/nuxt<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Worker<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"k\">import<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.\/nuxflare\/worker<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">domain<\/span> <span class=\"o\">=<\/span>\n    <span class=\"nx\">$app<\/span><span class=\"p\">.<\/span><span class=\"nx\">stage<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">production<\/span><span class=\"dl\">\"<\/span>\n      <span class=\"p\">?<\/span> <span class=\"nx\">prodDomain<\/span> <span class=\"o\">||<\/span> <span class=\"kc\">undefined<\/span>\n      <span class=\"p\">:<\/span> <span class=\"nx\">devDomain<\/span>\n        <span class=\"p\">?<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">$app<\/span><span class=\"p\">.<\/span><span class=\"nx\">stage<\/span><span class=\"p\">}<\/span><span class=\"s2\">.<\/span><span class=\"p\">${<\/span><span class=\"nx\">devDomain<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n        <span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"c1\">\/\/ Create WebSockets worker<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">websocketsUrl<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nc\">Worker<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">WebSockets<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">dir<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/websockets<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">main<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">index.ts<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">durableObjects<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span> <span class=\"na\">className<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">WebSockets<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">bindingName<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">WEBSOCKETS<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}],<\/span>\n  <span class=\"p\">});<\/span>\n  <span class=\"c1\">\/\/ Create Nuxt app and pass the WebSockets URL<\/span>\n  <span class=\"nc\">Nuxt<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">App<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">dir<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">domain<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">outputDir<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.output<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">extraVars<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">NUXT_PUBLIC_WEBSOCKETS_URL<\/span><span class=\"p\">:<\/span> <span class=\"nx\">websocketsUrl<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f \u060c \u0645\u0627 \u062f\u0648 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>  \u0633\u0631\u0648\u0631 WebSOCKETS \u0628\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645.<\/li>\n<li>  \u0628\u0631\u0646\u0627\u0645\u0647 Nuxt \u06a9\u0647 \u0628\u0647 \u0633\u0631\u0648\u0631 WebSockets \u0645\u062a\u0635\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ol>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Nuxt \u060c \u0645\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>dir: \".\"<\/code>\u060c \u0648 Nuxflare \u0622\u0646 \u0631\u0627 \u0628\u0627 \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 CloudFlare \u0633\u0627\u062e\u062a\u0647 \u0648 \u0645\u0633\u062a\u0642\u0631 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f. \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 WebSockets \u060c \u0645\u0627 \u06cc\u06a9 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>websockets<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0627 <code>index.ts<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u06af\u0631.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1%DA%A9_%D8%A7%D8%B4%DB%8C%D8%A7%D8%A1_%D8%A8%D8%A7%D8%AF%D9%88%D8%A7%D9%85\"><\/span>\n<p>  \u062f\u0631\u06a9 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u0645\u0639\u0627\u0645\u0644\u0647 \u0628\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0686\u06cc\u0633\u062a\u061f<\/p>\n<p>\u06cc\u06a9 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u062f\u0631 \u0627\u0635\u0644 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0627\u0633\u062a. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u0646\u062f\u06cc\u0646 \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0622\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u060c \u0648 \u0647\u0631 \u0646\u0645\u0648\u0646\u0647 \u0648\u0636\u0639\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u062a\u0635\u0627\u0644\u0627\u062a WebSocket \u062e\u0648\u062f \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0622\u0646\u0686\u0647 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0631\u0627 \u062e\u0627\u0635 \u0645\u06cc \u06a9\u0646\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0631 \u0646\u0632\u062f\u06cc\u06a9\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0686\u062a \u0645\u0627 \u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u0627\u062a\u0627\u0642 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u060c \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0634\u06cc\u0621 \u0628\u0627 \u062f\u0648\u0627\u0645 \u062c\u062f\u06cc\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0633\u0631\u0648\u0631 CloudFlare \u0646\u0632\u062f\u06cc\u06a9 \u0628\u0647 \u0622\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0648\u0642\u062a\u06cc \u062f\u06cc\u06af\u0631\u0627\u0646 \u0628\u0647 \u0647\u0645\u0627\u0646 \u0627\u062a\u0627\u0642 \u0686\u062a (\u0627\u0632 \u0647\u0631 \u0646\u0642\u0637\u0647 \u062f\u0646\u06cc\u0627) \u0645\u06cc \u067e\u06cc\u0648\u0646\u062f\u0646\u062f \u060c \u0628\u0647 \u0647\u0645\u0627\u0646 \u0646\u0645\u0648\u0646\u0647 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0645\u062a\u0635\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u062f\u0648\u0646 \u0646\u06af\u0631\u0627\u0646\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0633\u0631\u0648\u0631 \u060c \u0631\u0648\u06cc \u0646\u0648\u0634\u062a\u0646 \u0645\u0646\u0637\u0642 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u062e\u0648\u062f \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f \u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0647\u0646\u0648\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u062a\u0627\u062e\u06cc\u0631 \u0645\u0645\u06a9\u0646 \u0631\u0627 \u062f\u0627\u0631\u0646\u062f.<\/p>\n<blockquote>\n<p>\u062a\u0648\u062c\u0647: \u06cc\u06a9 \u0634\u06cc \u0628\u0627 \u062f\u0648\u0627\u0645 &#8211; \u062d\u062f\u0627\u0642\u0644 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 &#8211; \u06cc\u06a9 \u0628\u0627\u0631 \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a \u062c\u0627\u0628\u062c\u0627 \u0646\u0645\u06cc \u0634\u0648\u0646\u062f. \u0627\u06af\u0631 \u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631 \u06a9\u0647 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0627\u0632 \u0646\u0638\u0631 \u062c\u063a\u0631\u0627\u0641\u06cc\u0627\u06cc\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0639\u062f\u06cc \u0641\u0627\u0635\u0644\u0647 \u062f\u0627\u0631\u062f \u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062a\u0627\u062e\u06cc\u0631 \u0632\u06cc\u0631 \u062d\u062f \u0631\u0627 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0646\u0646\u062f. \u062d\u0644 \u0627\u06cc\u0646 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0628\u0627 \u0631\u0648\u06cc\u06a9\u0631\u062f\u0647\u0627\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0646\u06cc\u0632 \u062f\u0634\u0648\u0627\u0631 \u0627\u0633\u062a.<\/p>\n<\/blockquote>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u060c \u0628\u0644\u0647 \u060c \u06cc\u06a9 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0627\u0633\u062a \u060c \u0648 \u0645\u0627 \u0628\u0647 \u0645\u0627 \u0645\u06cc \u06af\u0648\u06cc\u06cc\u0645 <code>\"WebSockets\"<\/code>\u0628\u0634\u0631 \u0627\u0645\u0627 \u0627\u0633\u0645 \u0627\u0644\u0632\u0627\u0645 \u0622\u0648\u0631 \u0686\u06cc\u0633\u062a\u061f<\/p>\n<p>Cloudflare \u0627\u06cc\u0646 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0627\u0631\u062f: \u0647\u0631 \u0622\u0646\u0686\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u06a9\u0627\u0631\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0628\u0627\u06cc\u062f \u0627\u0632 \u0637\u0631\u06cc\u0642 &#8220;\u0627\u0644\u0632\u0627\u0645 \u0622\u0648\u0631&#8221; \u0639\u0628\u0648\u0631 \u06a9\u0646\u062f &#8211; \u062e\u0648\u0627\u0647 KV \u060c D1 \u060c \u0635\u0641 \u0647\u0627 \u06cc\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627 \u062f\u0648\u0627\u0645 \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0647\u0631 \u0648\u06cc\u0698\u06af\u06cc \u060c \u0628\u0647 \u06cc\u06a9 \u0646\u0627\u0645 \u0627\u0644\u0632\u0627\u0645 \u0622\u0648\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<p>\u0645\u0627 \u0645\u06cc \u06af\u0648\u06cc\u06cc\u0645: \u0627\u06af\u0631 \u06a9\u0627\u0631\u06af\u0631 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u062f\u0627\u0631\u062f <code>\"WebSockets\"<\/code> \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u060c \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f <code>\"WEBSOCKETS\"<\/code> (<code>env.WEBSOCKETS<\/code>).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%84%D8%A7%D8%B3_%D8%A7%D8%B4%DB%8C%D8%A7%D8%A1_%D8%A8%D8%A7%D8%AF%D9%88%D8%A7%D9%85_%D9%85%D8%A7\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u0627\u0633 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0627\u0635\u0648\u0644 \u0631\u0627 \u062f\u0631\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0644\u0627\u0633 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">WebSockets<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">DurableObject<\/span> <span class=\"p\">{}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0645\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f:<\/p>\n<ol>\n<li>  \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f (\u0648\u0642\u062a\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u06af\u0631 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u0627\u062f\u0627\u0631\u0647 \u06a9\u0646\u062f).<\/li>\n<li>  \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u06a9\u0646\u06cc\u062f (\u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u06af\u067e \u067e\u06cc\u0627\u0645 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f).<\/li>\n<li>  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0627\u062a\u0635\u0627\u0644 WebSocket \u0628\u0633\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f (\u062d\u0627\u0644\u062a \u062a\u0645\u06cc\u0632 \u06a9\u0631\u062f\u0646 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0627\u062a\u0635\u0627\u0644) \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>  \u0627\u0641\u0634\u0627\u06cc <code>publish<\/code> \u0628\u0631\u0627\u06cc \u067e\u062e\u0634 \u067e\u06cc\u0627\u0645 \u0647\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062e\u0627\u0635 \u06a9\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 WebSockets \u0645\u062a\u0635\u0644 \u0647\u0633\u062a\u0646\u062f \u060c \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_WebSocket\"><\/span>\n<p>  \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc WebSocket<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0645\u0627\u0631\u0647 1 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 <code>fetch<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f. \u0645\u0627 \u06a9\u0627\u0645\u0644 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>request<\/code> \u0634\u06cc\u0621 \u0627\u0632 \u06a9\u0627\u0631\u06af\u0631. \u0627\u0632 \u0622\u0646\u062c\u0627 \u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u0627\u06cc\u0646 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a WebSockets \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631 \u060c \u0648 \u0622\u06cc\u0627 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0627\u0633\u062a \u060c \u0645\u0627 \u06cc\u06a9 \u062c\u0641\u062a WebSockets \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u06cc\u06a9 \u062c\u0641\u062a WebSocket \u0645\u0627\u0646\u0646\u062f Walkie-Talkies \u0627\u0633\u062a: \u0628\u0631\u0627\u06cc \u0647\u0631 \u0645\u0634\u062a\u0631\u06cc \u06a9\u0647 \u0627\u062a\u0635\u0627\u0644 WebSockets \u0631\u0627 \u0628\u0627 \u0633\u0631\u0648\u0631 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0633\u0631\u0648\u0631 \u06cc\u06a9 \u06af\u0631\u0647 \u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f \u0648 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0645\u06cc \u062f\u0647\u062f. \u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u06af\u0631\u0647 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u06cc\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">WebSockets<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">DurableObject<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">override<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Request<\/span><span class=\"p\">):<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Response<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">.<\/span><span class=\"nx\">headers<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">upgrade<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">websocket<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">room<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">extractRoomAndUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">);<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">protocols<\/span> <span class=\"o\">=<\/span>\n          <span class=\"nx\">request<\/span><span class=\"p\">.<\/span><span class=\"nx\">headers<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">sec-websocket-protocol<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">?.<\/span><span class=\"nf\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">,<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">x<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">x<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">())<\/span> <span class=\"o\">||<\/span> <span class=\"p\">[];<\/span>\n        <span class=\"nx\">protocols<\/span><span class=\"p\">.<\/span><span class=\"nf\">shift<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ remove the room:userId from protocols<\/span>\n\n        <span class=\"kd\">const<\/span> <span class=\"nx\">webSocketPair<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">WebSocketPair<\/span><span class=\"p\">();<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">client<\/span><span class=\"p\">,<\/span> <span class=\"nx\">server<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">values<\/span><span class=\"p\">(<\/span><span class=\"nx\">webSocketPair<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">server<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">server<\/span><span class=\"p\">.<\/span><span class=\"nf\">serializeAttachment<\/span><span class=\"p\">({<\/span>\n            <span class=\"nx\">room<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">});<\/span>\n          <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">acceptWebSocket<\/span><span class=\"p\">(<\/span><span class=\"nx\">server<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">room<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">]);<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"kd\">const<\/span> <span class=\"nx\">res<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">101<\/span><span class=\"p\">,<\/span> <span class=\"na\">webSocket<\/span><span class=\"p\">:<\/span> <span class=\"nx\">client<\/span> <span class=\"p\">});<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">protocols<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">headers<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">sec-websocket-protocol<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">protocols<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">]<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">string<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">res<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error in websocket fetch:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">400<\/span> <span class=\"p\">});<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0646\u0648\u0632 \u0686\u0646\u062f \u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9\u06cc \u06cc\u06a9\u06cc \u0628\u0631\u0648\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D8%A8%D8%A7_%D8%B9%D9%86%D9%88%D8%A7%D9%86_%D9%BE%D8%B1%D9%88%D8%AA%DA%A9%D9%84_WebSocket\"><\/span>\n<p>  \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u0627 \u0639\u0646\u0648\u0627\u0646 \u067e\u0631\u0648\u062a\u06a9\u0644 WebSocket<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0647\u06a9 Header Protocols WebSocket \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0635\u062d\u0628\u062a \u06a9\u0646\u06cc\u0645.<\/p>\n<p>WebSockets \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u062f\u0631 \u062f\u0633\u062a \u0627\u0648\u0644 \u0645\u0627\u0646\u0646\u062f \u0647\u062f\u0631\u0647\u0627\u06cc HTTP \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f: \u0647\u062f\u0631 \u067e\u0631\u0648\u062a\u06a9\u0644 WebSocket \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u067e\u0631\u0648\u062a\u06a9\u0644 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062c\u062f\u0627 \u0627\u0632 \u06a9\u0627\u0645\u0627 \u0634\u0627\u0645\u0644 \u0634\u0648\u062f.<\/p>\n<p>\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0627\u062a\u0627\u0642 \u0648 \u0634\u0646\u0627\u0633\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u062f \u062f\u0631 Base64 \u0647\u0633\u062a\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u062a\u06a9\u0644 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0633\u0631\u0648\u0631 \u0627\u06cc\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0647 \u0622\u0646 \u0628\u067e\u06cc\u0648\u0646\u062f\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06af\u067e \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u062f \u060c \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ NOTE: in a real-world scenario, the token should instead be JWT or similar<\/span>\n<span class=\"c1\">\/\/ from which we could extract and validate room\/user\/topic and such<\/span>\n<span class=\"c1\">\/\/ or, the info can even be stored inside a KV<\/span>\n<span class=\"kd\">function<\/span> <span class=\"nf\">extractRoomAndUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Request<\/span><span class=\"p\">):<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">room<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">protocolHeader<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">request<\/span><span class=\"p\">.<\/span><span class=\"nx\">headers<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">sec-websocket-protocol<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">protocolHeader<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Missing sec-websocket-protocol header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">encoded<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">protocolHeader<\/span><span class=\"p\">.<\/span><span class=\"nf\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">,<\/span><span class=\"dl\">\"<\/span><span class=\"p\">).<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">x<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">x<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">());<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">encoded<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Invalid sec-websocket-protocol format<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">decoded<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Buffer<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span><span class=\"nx\">encoded<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">base64<\/span><span class=\"dl\">\"<\/span><span class=\"p\">).<\/span><span class=\"nf\">toString<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">utf-8<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">room<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">decoded<\/span><span class=\"p\">.<\/span><span class=\"nf\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">room<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">userId<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Room and User ID must be separated by a colon<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">room<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<blockquote>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u0623\u06cc\u06cc\u062f \u0647\u0648\u06cc\u062a WebSocket \u0627\u06cc\u0646 \u067e\u0633\u062a Overflow Stack \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f: https:\/\/stackoverflow.com\/questions\/4361173\/http-headers-in-websockets-client-api<\/p>\n<\/blockquote>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u060c \u0645\u0627 \u0647\u06cc\u0686 &#8220;\u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc&#8221; \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0627\u0646\u062c\u0627\u0645 \u0646\u0645\u06cc \u062f\u0647\u06cc\u0645 \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06a9\u0633\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0645\u06cc \u06af\u0648\u06cc\u0646\u062f. \u0627\u06cc\u0646 \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0627\u0631 \u0646\u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0628\u0627\u06cc\u062f \u0627\u0632 \u06cc\u06a9 \u0646\u0634\u0627\u0646\u0647 JWT \u06cc\u0627 \u0645\u0634\u0627\u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0633\u0631\u0648\u0631 \u062a\u0623\u06cc\u06cc\u062f \u0634\u0648\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"WebSocket_Hibernation_%D9%88_SerializeDeserialize_%D9%BE%DB%8C%D9%88%D8%B3%D8%AA\"><\/span>\n<p>  WebSocket Hibernation \u0648 Serialize\/Deserialize \u067e\u06cc\u0648\u0633\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627 \u062f\u0648\u0627\u0645 \u060c \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0632\u0645\u0627\u0646 \u0641\u0639\u0627\u0644 \u0628\u0648\u062f\u0646 \u0647\u0632\u06cc\u0646\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627 \u06af\u0631\u0627\u0646 \u0634\u0648\u062f \u0632\u06cc\u0631\u0627 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u06cc\u06a9 \u0627\u062a\u0627\u0642 \u06af\u067e \u0648\u0635\u0644 \u0634\u0648\u0646\u062f \u0627\u0645\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0641\u0639\u0627\u0644 \u06af\u067e \u0646\u0645\u06cc \u0632\u0646\u0646\u062f \u060c \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0628\u06cc\u06a9\u0627\u0631 \u0627\u0633\u062a \u0648 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0636\u0639\u06cc\u062a \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0647\u0632\u06cc\u0646\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0647\u0632\u06cc\u0646\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647 \u060c CloudFlare WebSocket \u0631\u0627 \u062e\u0648\u0627\u0628 \u0632\u0645\u0633\u062a\u0627\u0646\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0627\u06af\u0631 \u06cc\u06a9 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u062f\u0627\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0641\u0639\u0627\u0644 WebSocket \u0628\u0627\u0634\u062f \u0627\u0645\u0627 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u067e\u0631\u062f\u0627\u0632\u0634 \u0631\u0627 \u0646\u062f\u0627\u0631\u062f \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f &#8220;\u062e\u0648\u0627\u0628 \u0632\u0645\u0633\u062a\u0627\u0646\u06cc&#8221; \u0628\u0627\u0634\u062f \u0648 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0632\u0645\u0627\u0646 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u067e\u0631\u062f\u0627\u062e\u062a \u0646\u0645\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u062a\u0635\u0627\u0644 WebSocket \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc \u0628\u0627\u0632 \u0627\u0633\u062a \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0641\u0639\u0627\u0644\u06cc\u062a \u060c \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0622\u0646 &#8220;\u0627\u062d\u06cc\u0627 \u0634\u062f\u0647&#8221; \u0627\u0633\u062a.<\/p>\n<p>\u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0645\u0642\u062f\u0627\u0631 \u06a9\u0645\u06cc \u0627\u0632 \u062d\u0627\u0644\u062a (2KB) \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0628\u0627\u0632\u06af\u0634\u062a \u0622\u0646\u0644\u0627\u06cc\u0646 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u0634\u0648\u062f \u060c \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0628\u0627\u06cc\u062f \u062d\u0627\u0648\u06cc \u062d\u062f\u0627\u0642\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0645\u0634\u062a\u0631\u06cc \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u060c \u0628\u0627\u06cc\u062f \u0627\u0632 API \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627 \u062f\u0648\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u060c \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0632 \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 KV \u062a\u0645\u0627\u0645 \u0639\u06cc\u0627\u0631 \u0628\u0631\u0627\u06cc \u067e\u0627\u06cc\u062f\u0627\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_WebSocket\"><\/span>\n<p>  \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc WebSocket<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0633\u062a \u0632\u062f\u0646 \u0628\u0647 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc WebSocket:<\/p>\n<ol>\n<li>  \u0645\u0627 \u0627\u0628\u062a\u062f\u0627 \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0634\u06cc\u0626\u06cc \u06a9\u0647 \u0628\u0647 \u0647\u0631 \u0645\u0634\u062a\u0631\u06cc \u0648\u0635\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/li>\n<li>  \u0645\u0627 \u0627\u0632 \u062f\u0648 \u0646\u0648\u0639 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645: \u06cc\u06a9\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0646\u0627\u0645 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u0645\u06cc \u06a9\u0646\u062f (\u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f) \u0648 \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u06af\u067e \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u062f.\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">WebSockets<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">DurableObject<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ ...<\/span>\n  <span class=\"nx\">override<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">webSocketMessage<\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">ws<\/span><span class=\"p\">:<\/span> <span class=\"nx\">WebSocket<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">message<\/span><span class=\"p\">:<\/span> <span class=\"nb\">ArrayBuffer<\/span> <span class=\"o\">|<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">room<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">deserializeAttachment<\/span><span class=\"p\">();<\/span>\n    <span class=\"c1\">\/\/ Validate message type and size<\/span>\n    <span class=\"c1\">\/\/ [...]<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">parsed<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">message<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">WebSocketMessage<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">chat<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span>\n          <span class=\"k\">typeof<\/span> <span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">||<\/span>\n          <span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">().<\/span><span class=\"nx\">length<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span>\n        <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Invalid chat message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">userName<\/span> <span class=\"o\">=<\/span>\n          <span class=\"p\">(<\/span><span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">storage<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"s2\">`name:<\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">))<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">publish<\/span><span class=\"p\">(<\/span><span class=\"nx\">room<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">chat<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n          <span class=\"nx\">userName<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">time<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">().<\/span><span class=\"nf\">toISOString<\/span><span class=\"p\">(),<\/span>\n        <span class=\"p\">});<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">name<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span>\n          <span class=\"k\">typeof<\/span> <span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">||<\/span>\n          <span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">().<\/span><span class=\"nx\">length<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span>\n        <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Invalid name<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">storage<\/span><span class=\"p\">.<\/span><span class=\"nf\">put<\/span><span class=\"p\">(<\/span><span class=\"s2\">`name:<\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span> <span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">());<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">publish<\/span><span class=\"p\">(<\/span><span class=\"nx\">room<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">name<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">parsed<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">(),<\/span>\n          <span class=\"na\">time<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">().<\/span><span class=\"nf\">toISOString<\/span><span class=\"p\">(),<\/span>\n        <span class=\"p\">});<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Unknown message type<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Message processing error:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">close<\/span><span class=\"p\">(<\/span><span class=\"mi\">1003<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Invalid message format<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"nx\">override<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">webSocketClose<\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">ws<\/span><span class=\"p\">:<\/span> <span class=\"nx\">WebSocket<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">code<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">reason<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">_wasClean<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">deserializeAttachment<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">storage<\/span><span class=\"p\">.<\/span><span class=\"k\">delete<\/span><span class=\"p\">(<\/span><span class=\"s2\">`name:<\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">close<\/span><span class=\"p\">(<\/span><span class=\"nx\">code<\/span><span class=\"p\">,<\/span> <span class=\"nx\">reason<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u0627\u0632 API \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645 <code>await this.ctx.storage.put<\/code> \u0648\u062a <code>await this.ctx.storage.get<\/code>\u0628\u0634\u0631<\/p>\n<p>\u0648\u0642\u062a\u06cc \u0627\u062a\u0635\u0627\u0644 WebSocket \u0628\u0633\u062a\u0647 \u0634\u062f \u060c KV \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0627\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D8%A7%D8%A8%D8%B9_%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1\"><\/span>\n<p>  \u062a\u0627\u0628\u0639 \u0627\u0646\u062a\u0634\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u062a\u0635\u0644 \u0628\u0647 \u0627\u062a\u0627\u0642 \u060c \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>publish<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f.<\/p>\n<p>\u0645\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0645\u0627\u0645 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0645\u062a\u0635\u0644 \u0628\u0647 \u0646\u0645\u0648\u0646\u0647 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u062e\u0648\u062f \u062d\u0644\u0642\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0627\u0631 \u067e\u06cc\u0627\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646\u0647\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">WebSockets<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">DurableObject<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">async<\/span> <span class=\"nf\">publish<\/span><span class=\"p\">(<\/span><span class=\"nx\">room<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">websockets<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">getWebSockets<\/span><span class=\"p\">();<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">websockets<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&lt;<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">ws<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">websockets<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">deserializeAttachment<\/span><span class=\"p\">()<\/span> <span class=\"o\">||<\/span> <span class=\"p\">{};<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">room<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">room<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">send<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">));<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">return<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">publish err<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<blockquote>\n<p>\u062a\u0648\u062c\u0647: \u0628\u0631\u0631\u0633\u06cc \u0627\u062a\u0627\u0642 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0632\u0627\u0626\u062f \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0628\u0647 \u0647\u0631 \u062d\u0627\u0644 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0627\u062a\u0627\u0642 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u0645\u0627 \u0627\u0641\u0632\u0648\u0646\u06af\u06cc \u0639\u0645\u062f\u06cc \u0627\u0633\u062a \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0628\u0639\u062f\u0627\u064b \u0645\u0646\u0637\u0642 \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u0634\u06cc\u0621 \u0628\u0627 \u062f\u0648\u0627\u0645 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645.<\/p>\n<\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%88%D8%B4%D8%AA%D9%86_%DA%A9%D8%A7%D8%B1%DA%AF%D8%B1_%D9%85%D8%A7\"><\/span>\n<p>  \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0631\u06af\u0631 \u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u062a\u0635\u0627\u0644\u0627\u062a WebSocket \u0647\u0633\u062a\u0646\u062f \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u062f \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 CloudFlare \u0631\u0627 \u06a9\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Worker<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">WorkerEntrypoint<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">override<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Request<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">binding<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nx\">WEBSOCKETS<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">DurableObjectNamespace<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">WebSockets<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">room<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">extractRoomAndUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">);<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">stub<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">binding<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">binding<\/span><span class=\"p\">.<\/span><span class=\"nf\">idFromName<\/span><span class=\"p\">(<\/span><span class=\"nx\">room<\/span><span class=\"p\">));<\/span> <span class=\"c1\">\/\/ infer durable object instance from room name<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">stub<\/span><span class=\"p\">.<\/span><span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error in worker fetch:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">400<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"k\">async<\/span> <span class=\"nf\">publish<\/span><span class=\"p\">(<\/span><span class=\"nx\">room<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">binding<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nx\">WEBSOCKETS<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">DurableObjectNamespace<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">WebSockets<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">stub<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">binding<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">binding<\/span><span class=\"p\">.<\/span><span class=\"nf\">idFromName<\/span><span class=\"p\">(<\/span><span class=\"nx\">room<\/span><span class=\"p\">));<\/span> <span class=\"c1\">\/\/ infer durable object instance from room name<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">stub<\/span><span class=\"p\">.<\/span><span class=\"nf\">publish<\/span><span class=\"p\">(<\/span><span class=\"nx\">room<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>WEBSOCKETS<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0627\u0645 \u0627\u0644\u0632\u0627\u0645 \u0622\u0648\u0631 \u0628\u0631\u0627\u06cc \u06cc\u0627\u0641\u062a\u0646 \u06a9\u0644\u0627\u0633 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645.<\/p>\n<p>\u0627\u0634\u06cc\u0627\u0621 \u0628\u0627 \u062f\u0648\u0627\u0645 \u0646\u062f\u0627\u0631\u0646\u062f <code>create<\/code> \u0631\u0648\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u0641\u0642\u0637 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>get<\/code>\u0628\u0634\u0631 \u0627\u06af\u0631 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u060c \u06cc\u06a9 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0631\u06a9\u062a \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631 <code>idFromName<\/code> \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u06cc\u06a9 \u0634\u0646\u0627\u0633\u0647 \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc \u06a9\u0647 \u0634\u0646\u0627\u0633\u0647 \u0645\u0634\u0627\u0628\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u0627\u0646 \u0631\u0634\u062a\u0647 (\u0648 \u0634\u0646\u0627\u0633\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u0631\u0634\u062a\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641) \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u06cc\u0645 \u060c \u0627\u0632 \u0646\u0627\u0645 \u0627\u062a\u0627\u0642 \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0645\u0639\u0631\u0636 <code>publish<\/code> \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u06af\u0631 \u06a9\u0647 \u0686\u06cc\u0632\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>this.publish<\/code> \u0631\u0648\u0634 \u062f\u0631 \u0634\u06cc\u0621 \u0628\u0627\u062f\u0648\u0627\u0645. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0631\u0627 \u0627\u0632 \u0628\u0631\u062e\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u06a9\u0627\u0631\u06af\u0631 \u0628\u0627 \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u062f\u0647\u0646\u062f\u0647 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u0645 \u0648 \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc &#8220;\u0633\u0631\u0648\u0631&#8221; \u0628\u062f\u0627\u0647\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%88%D8%B4%D8%AA%D9%86_%D8%AC%D8%A8%D9%87%D9%87_%D8%A8%D8%A7_useWebSocket\"><\/span>\n<p>  \u0646\u0648\u0634\u062a\u0646 \u062c\u0628\u0647\u0647 \u0628\u0627 <code>useWebSocket<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0645\u062e\u0632\u0646 \u060c \u0645\u0627 \u06cc\u06a9 UI \u0686\u062a \u0627\u0633\u0627\u0633\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Nuxt UI V3 \u0648 Tailwind \u062f\u0627\u0631\u06cc\u0645. \u0628\u062e\u0634 \u0645\u0647\u0645 \u062f\u0631 <code>Messages.vue<\/code> \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0647 \u0633\u0631\u0648\u0631 WebSockets \u0648\u0635\u0644 \u0645\u06cc \u0634\u0648\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">protocol<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">btoa<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">chatRoom<\/span><span class=\"p\">}<\/span><span class=\"s2\">:<\/span><span class=\"p\">${<\/span><span class=\"nx\">currentUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">send<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useWebSocket<\/span><span class=\"p\">(<\/span><span class=\"nf\">useRuntimeConfig<\/span><span class=\"p\">().<\/span><span class=\"k\">public<\/span><span class=\"p\">.<\/span><span class=\"nx\">websocketsUrl<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">protocols<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">protocol<\/span><span class=\"p\">.<\/span><span class=\"nf\">replaceAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">=<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">),<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">chat<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n  <span class=\"na\">onConnected<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">send<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">name<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">currentUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}),<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">onMessage<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">_ws<\/span><span class=\"p\">,<\/span> <span class=\"nx\">event<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">chat<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">messages<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">sender<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">userName<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"na\">content<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">timestamp<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">time<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>useWebSocket<\/code> \u0627\u0632 <code>@vueuse\/core<\/code> \u0632\u06cc\u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u0648 \u0636\u0631\u0628\u0627\u0646 \u0642\u0644\u0628 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc <code>websocketsUrl<\/code>\u060c \u0645\u0627 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>runtimeConfig<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">defineNuxtConfig<\/span><span class=\"p\">({<\/span>\n  <span class=\"c1\">\/\/ [...]<\/span>\n  <span class=\"na\">runtimeConfig<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">public<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">websocketsUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">ws:\/\/localhost:8787<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ default used for dev<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c \u0627\u0645\u0627 \u0645\u0627 \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0628\u0647 \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 CloudFlare \u062f\u0631 <code>sst.config.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ [...]<\/span>\n<span class=\"nc\">Nuxt<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">App<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">dir<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">domain<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">outputDir<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.output<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">extraVars<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">NUXT_PUBLIC_WEBSOCKETS_URL<\/span><span class=\"p\">:<\/span> <span class=\"nx\">websocketsUrl<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<blockquote>\n<p>\u0645\u0646 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u062d\u0627\u0644 \u06a9\u0627\u0631 \u0628\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0633\u062a\u0645 \u062a\u0627 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc Nuxflare \u0622\u0633\u0627\u0646\u062a\u0631 \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0648 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0633\u0631\u0648\u06cc\u0633 \u062f\u0631 \u062d\u0627\u0644\u062a DEV \u0633\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0686\u0627\u0644\u0634 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0633\u0631\u0648\u0631 Dev Server \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f. \u062d\u0627\u0644\u062a dev \u0628\u0631\u0627\u06cc D1 \u060c KV \u060c R2 \u0648 \u063a\u06cc\u0631\u0647. <code>@nuxt-hub\/core<\/code> \u0648\u062a <code>nitro-cloudflare-dev<\/code>\u0628\u0634\u0631<\/p>\n<\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%85%D8%A7\"><\/span>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u060c \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>bun nuxflare deploy <span class=\"nt\">--stage<\/span> hello <span class=\"c\"># Use whatever stage you like<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0645\u0631\u062d\u0644\u0647 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>bun nuxflare remove <span class=\"nt\">--stage<\/span> hello\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0647\u0645\u06cc\u0646 \u0627\u0633\u062a! \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0686\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0631\u0648\u06cc \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 CloudFlare \u0628\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0648 Nuxt \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f. \u062e\u06cc\u0644\u06cc \u0628\u0627\u062d\u0627\u0644 \u060c \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u061f<\/p>\n<p>\u0627\u06cc\u0646 \u062a\u0646\u0647\u0627 \u0633\u0637\u062d \u06a9\u0627\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f \u060c \u062e\u0631\u0627\u0634\u06cc\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u067e\u0633\u062a \u0647\u0627\u06cc \u0622\u06cc\u0646\u062f\u0647 \u060c \u0645\u0646 \u0639\u0645\u06cc\u0642 \u062a\u0631 \u0628\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062a\u0631 \u0634\u06cc\u0631\u062c\u0647 \u0645\u06cc \u0632\u0646\u0645.<\/p>\n<p>\u0627\u06af\u0631 \u0633\u0624\u0627\u0644\u06cc \u062f\u0627\u0631\u06cc\u062f \u06cc\u0627 \u0627\u06af\u0631 \u0686\u06cc\u0632 \u062e\u0627\u0635\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u060c \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u0645\u0646 \u0631\u0627 \u0628\u067e\u0648\u0634\u0627\u0646\u0645 (x \u060c discord)<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%82%D8%A8%D9%84_%D8%A7%D8%B2_%D8%B1%D9%81%D8%AA%D9%86_%E2%80%A6\"><\/span>\n<p>  \u0642\u0628\u0644 \u0627\u0632 \u0631\u0641\u062a\u0646 &#8230;<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u0644\u0627\u0645 \u060c \u0627\u06af\u0631 \u0627\u06cc\u0646 \u0631\u0627 \u062a\u0627 \u06a9\u0646\u0648\u0646 \u062e\u0648\u0627\u0646\u062f\u0647 \u0627\u06cc\u062f \u060c \u062d\u062f\u0633 \u0645\u06cc \u0632\u0646\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0627 \u0645\u0641\u06cc\u062f \u062f\u0627\u0646\u0633\u062a\u06cc\u062f.<\/p>\n<p>\u0645\u0646 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0645 <strong>Nuxflare Pro<\/strong> &#8211; \u0627\u06cc\u0646 \u06cc\u06a9 \u06a9\u06cc\u062a \u06a9\u0627\u0645\u0644 Nuxt + Cloudflare \u0627\u0633\u062a\u0627\u0631\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u0639\u062b \u0635\u0631\u0641\u0647 \u062c\u0648\u06cc\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<ul>\n<li>\u0627\u06cc\u0646 \u06cc\u06a9 \u0627\u0633\u062a <strong>\u062e\u0631\u06cc\u062f \u06cc\u06a9 \u0628\u0627\u0631<\/strong> \u0628\u0627 <strong>\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0637\u0648\u0644 \u0639\u0645\u0631<\/strong> \u0628\u0647 \u0647\u0645\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a Nuxflare \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647<\/li>\n<li>\u0634\u0645\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u06a9\u0627\u0631 \u0645\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062f\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0648 \u0627\u06cc\u062c\u0627\u062f \u0645\u062d\u062a\u0648\u0627 (\u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u067e\u0633\u062a) \u0628\u0633\u0627\u0632\u06cc\u062f (\u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u067e\u0633\u062a)<\/li>\n<li>\u0634\u0645\u0627 \u0628\u0647 \u0647\u0631 \u0622\u0646\u0686\u0647 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 Nuxt \u0648 CloudFlare \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u0645 \u060c \u0632\u0648\u062f\u062a\u0631 \u062f\u0633\u062a\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u06cc\u0627\u0641\u062a<\/li>\n<\/ul>\n<p><strong>\u0635\u062d\u0628\u062a \u0627\u0632 \u0622\u0646 &#8230;<\/strong> \u0645\u0646 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a Nuxflare Landing \u0647\u0633\u062a\u0645 &#8211; \u06cc\u06a9 \u0633\u0627\u0632\u0646\u062f\u0647 \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0634\u062f\u0647 AI \u06a9\u0647 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc Nuxt UI \u0648 Nuxt \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0639\u0636\u0648 \u062d\u0631\u0641\u0647 \u0627\u06cc \u060c \u0647\u0646\u06af\u0627\u0645 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0622\u0646 \u060c \u0622\u0646 \u0631\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0631\u0627\u06cc\u06af\u0627\u0646 \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n<p>Nuxflare Pro \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u0627\u0635\u0644\u0627\u064b \u0647\u06cc\u0686 \u0641\u0634\u0627\u0631\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f &#8211; \u0648 \u0627\u0632 \u062e\u0648\u0627\u0646\u062f\u0646 \u0628\u0647 \u0647\u0631 \u0635\u0648\u0631\u062a \u0645\u062a\u0634\u06a9\u0631\u0645.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0632 \u0632\u0645\u0627\u0646 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u062f\u0631 Nuxflare \u060c \u0627\u06cc\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0648\u0636\u0648\u0639 \u0631\u0627 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a. \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627 \u062f\u0648\u0627\u0645 Cloudflare \u0686\u06cc\u0633\u062a\u061f \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 NUXT \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f \u0627\u0634\u06cc\u0627\u0621 \u0628\u0627\u062f\u0648\u0627\u0645 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0628\u0647 \u0637\u0631\u0632 \u0634\u06af\u0641\u062a \u0622\u0648\u0631 \u0645\u0642\u0631\u0648\u0646 \u0628\u0647 \u0635\u0631\u0641\u0647 \u0647\u0633\u062a\u0646\u062f \u060c \u0627\u0645\u0627 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u06a9\u0645\u06cc \u0645\u0631\u0645\u0648\u0632 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u0646\u062f. \u0645\u0646 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0645 \u06a9\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":105302,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-105301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=105301"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105301\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/105302"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=105301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=105301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=105301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}