{"id":20376,"date":"2023-04-30T02:43:24","date_gmt":"2023-04-29T23:13:24","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-a-real-time-analytics-dashboard-with-nodejs-websocket-and-redis-165l\/"},"modified":"2023-04-30T02:43:24","modified_gmt":"2023-04-29T23:13:24","slug":"building-a-real-time-analytics-dashboard-with-nodejs-websocket-and-redis-165l","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-a-real-time-analytics-dashboard-with-nodejs-websocket-and-redis-165l\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0628\u0627 Node.js\u060c WebSocket \u0648 Redis"},"content":{"rendered":"<div data-article-id=\"1452332\" id=\"article-body\">\n<p>\u062f\u0627\u0634\u0628\u0648\u0631\u062f\u0647\u0627\u06cc \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0641\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0648 \u062f\u0631\u06a9 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0647\u0633\u062a\u0646\u062f.  \u0627\u06af\u0631 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062a\u062d\u0644\u06cc\u0644\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u062c\u0627\u0645\u0639 \u0647\u0633\u062a\u06cc\u062f\u060c \u062a\u0631\u06a9\u06cc\u0628 Node.js\u060c WebSocket \u0648 Redis \u06cc\u06a9 \u06af\u0632\u06cc\u0646\u0647 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0631\u0648\u0646\u062f \u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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\/building-a-real-time-analytics-dashboard-with-nodejs-websocket-and-redis-165l\/#%D9%86%D8%B5%D8%A8_Nodejs_%D9%88_WebSocket\" >\u0646\u0635\u0628 Node.js \u0648 WebSocket<\/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\/building-a-real-time-analytics-dashboard-with-nodejs-websocket-and-redis-165l\/#%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Redis_PubSub_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B1%DB%8C%D8%A7%D9%81%D8%AA_%D8%AF%D8%A7%D8%AF%D9%87\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Redis Pub\/Sub \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647<\/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\/building-a-real-time-analytics-dashboard-with-nodejs-websocket-and-redis-165l\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AF%D8%A7%D8%B4%D8%A8%D9%88%D8%B1%D8%AF_%D8%A8%D9%84%D8%A7%D8%AF%D8%B1%D9%86%DA%AF\" >\u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0644\u0627\u062f\u0631\u0646\u06af<\/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\/building-a-real-time-analytics-dashboard-with-nodejs-websocket-and-redis-165l\/#%D8%AA%D8%AC%D8%B3%D9%85_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\" >\u062a\u062c\u0633\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627<\/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\/building-a-real-time-analytics-dashboard-with-nodejs-websocket-and-redis-165l\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_Nodejs_%D9%88_WebSocket\"><\/span>\n<p>  \u0646\u0635\u0628 Node.js \u0648 WebSocket<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Node.js \u06cc\u06a9 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062f\u0627\u062f\u0647 \u0645\u062d\u0648\u0631 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a.  WebSocket \u06cc\u06a9 \u067e\u0631\u0648\u062a\u06a9\u0644 \u0628\u0631\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u062f\u0648 \u0637\u0631\u0641\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0627\u062a\u0635\u0627\u0644 TCP \u0627\u0633\u062a \u06a9\u0647 \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u062f\u0648 \u062c\u0647\u062a\u0647 \u0628\u0627 \u062a\u0627\u062e\u06cc\u0631 \u06a9\u0645 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. <\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639\u060c \u0628\u0627\u06cc\u062f Node.js \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 WebSocket \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ Install Node.js on Mac\nbrew install node\n\n\/\/ Install WebSocket library\nnpm install websocket\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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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<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_Redis_PubSub_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B1%DB%8C%D8%A7%D9%81%D8%AA_%D8%AF%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Redis Pub\/Sub \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 Node.js \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 WebSocket \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 Redis Pub\/Sub \u0631\u0627 \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.  Redis \u06cc\u06a9 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632\u060c \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u062f\u0647 \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\u060c \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646 \u0648 \u0648\u0627\u0633\u0637\u0647 \u067e\u06cc\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0633\u06cc\u0633\u062a\u0645 Pub\/Sub \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062f\u0631 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u0645\u0634\u062a\u0631\u06a9 \u0634\u0648\u0646\u062f \u0648 \u0627\u0632 \u0622\u0646\u0647\u0627 \u067e\u06cc\u0627\u0645 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0627\u06cc\u0646 \u0633\u06cc\u0633\u062a\u0645 \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627 \u0627\u0632 \u0628\u0627\u0637\u0646 \u062e\u0648\u062f \u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f Analytics \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u062a\u0648\u0627\u0646\u062f \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u0633\u0631\u0648\u0631 Redis \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ Start Redis server\nredis-server\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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a Node.js \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u06cc\u06a9 \u06a9\u0627\u0646\u0627\u0644 \u0645\u0634\u062a\u0631\u06a9 \u0634\u062f\u0647 \u0648 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0632 \u0622\u0646 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0627 \u0634\u0627\u0645\u0644 \u062f\u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f &#8211; \u06cc\u06a9\u06cc \u0628\u0631\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u062f\u0631 \u06cc\u06a9 \u06a9\u0627\u0646\u0627\u0644 \u0648 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u06cc\u0627\u0645 \u0627\u0632 \u06a9\u0627\u0646\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Subscribe to a channel<\/span>\n<span class=\"kd\">function<\/span> <span class=\"nx\">subscribeToChannel<\/span><span class=\"p\">(<\/span><span class=\"nx\">channel<\/span><span class=\"p\">,<\/span> <span class=\"nx\">callback<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">client<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">redis<\/span><span class=\"p\">.<\/span><span class=\"nx\">createClient<\/span><span class=\"p\">();<\/span>\n  <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nx\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">connect<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nx\">subscribe<\/span><span class=\"p\">(<\/span><span class=\"nx\">channel<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nx\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">message<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">callback<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Receive messages from a channel<\/span>\n<span class=\"kd\">function<\/span> <span class=\"nx\">receiveMessage<\/span><span class=\"p\">(<\/span><span class=\"nx\">channel<\/span><span class=\"p\">,<\/span> <span class=\"nx\">message<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Do something with the message<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Call the subscribeToChannel function and pass it the channel and callback<\/span>\n<span class=\"nx\">subscribeToChannel<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">myChannel<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">receiveMessage<\/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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AF%D8%A7%D8%B4%D8%A8%D9%88%D8%B1%D8%AF_%D8%A8%D9%84%D8%A7%D8%AF%D8%B1%D9%86%DA%AF\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0644\u0627\u062f\u0631\u0646\u06af<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0633\u06cc\u0633\u062a\u0645 Redis Pub\/Sub \u062e\u0648\u062f \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062e\u0648\u062f \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 Node.js\u060c HTML \u0648 CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0627\u0632 Node.js \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0648 \u0627\u0631\u0627\u0626\u0647 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc HTML \u0648 CSS \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 WebSocket \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u062a\u0635\u0627\u0644 \u0633\u0648\u06a9\u062a \u0628\u06cc\u0646 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0648 \u0628\u0627\u0637\u0646 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u0627\u0628\u062a\u062f\u0627\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 index.html \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0637\u0631\u062d \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u0627 \u0628\u0627\u0634\u062f.  \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0634\u0627\u0645\u0644 HTML \u0648 CSS \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f &#8211; \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;html&gt;<\/span>\n  <span class=\"nt\">&lt;head&gt;<\/span>\n    <span class=\"nt\">&lt;title&gt;<\/span>Real-Time Dashboard<span class=\"nt\">&lt;\/title&gt;<\/span>\n    <span class=\"nt\">&lt;style&gt;<\/span>\n      <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span> <span class=\"nb\">sans-serif<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nf\">#chart<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">500px<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"nt\">&lt;\/style&gt;<\/span>\n  <span class=\"nt\">&lt;\/head&gt;<\/span>\n  <span class=\"nt\">&lt;body&gt;<\/span>\n    <span class=\"nt\">&lt;h1&gt;<\/span>Real-Time Dashboard<span class=\"nt\">&lt;\/h1&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"container\"<\/span><span class=\"nt\">&gt;<\/span>\n      <span class=\"nt\">&lt;canvas<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"chart\"<\/span><span class=\"nt\">&gt;&lt;\/canvas&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n  <span class=\"nt\">&lt;\/body&gt;<\/span>\n<span class=\"nt\">&lt;\/html&gt;<\/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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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>\u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 server.js \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06a9\u062f Node.js \u0645\u0627 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u06a9\u062f \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc HTML \u0648 CSS \u0645\u0627 \u0631\u0627 \u0627\u0632 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u067e\u06cc\u0627\u0645\u06cc \u0627\u0632 \u06a9\u0627\u0646\u0627\u0644 Redis \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u067e\u06cc\u0627\u0645\u06cc \u0628\u0647 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Require the necessary packages<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">http<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">http<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">socketIO<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">socket.io<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Set up a server<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">server<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">http<\/span><span class=\"p\">.<\/span><span class=\"nx\">createServer<\/span><span class=\"p\">(<\/span><span class=\"nx\">onRequest<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">io<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">socketIO<\/span><span class=\"p\">(<\/span><span class=\"nx\">server<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Serve the HTML and CSS files<\/span>\n<span class=\"kd\">function<\/span> <span class=\"nx\">onRequest<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">,<\/span> <span class=\"nx\">res<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Serve the index.html and styles.css files here<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Listen for connections<\/span>\n<span class=\"nx\">io<\/span><span class=\"p\">.<\/span><span class=\"nx\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">connection<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onConnection<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Set up a socket connection<\/span>\n<span class=\"kd\">function<\/span> <span class=\"nx\">onConnection<\/span><span class=\"p\">(<\/span><span class=\"nx\">socket<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Subscribe to the Redis channel<\/span>\n  <span class=\"nx\">subscribeToChannel<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">myChannel<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">message<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Send a message to the frontend<\/span>\n    <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nx\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">message<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Start the server<\/span>\n<span class=\"nx\">server<\/span><span class=\"p\">.<\/span><span class=\"nx\">listen<\/span><span class=\"p\">(<\/span><span class=\"mi\">3000<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Server is listening on port 3000<\/span><span class=\"dl\">'<\/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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D8%AC%D8%B3%D9%85_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u062a\u062c\u0633\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0633\u0631\u0648\u0631 Node.js \u062e\u0648\u062f \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u062c\u0633\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0646\u0645\u0648\u062f\u0627\u0631 \u0645\u0627\u0646\u0646\u062f Chart.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0646\u0627\u0644 Redis \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u0627\u0628\u062a\u062f\u0627\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 Chart.js \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 HTML \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/2.9.3\/Chart.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0646\u0645\u0648\u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062f\u0631 \u0641\u0627\u06cc\u0644 server.js \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u067e\u06cc\u0627\u0645 \u0647\u0627 \u0631\u0627 \u0627\u0632 \u06a9\u0627\u0646\u0627\u0644 Redis \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0646\u0645\u0648\u062f\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Receive messages from the Redis channel <\/span>\n<span class=\"kd\">function<\/span> <span class=\"nx\">onMessage<\/span><span class=\"p\">(<\/span><span class=\"nx\">message<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nx\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Update the graph with the data<\/span>\n  <span class=\"nx\">updateGraph<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Function to update the graph<\/span>\n<span class=\"kd\">function<\/span> <span class=\"nx\">updateGraph<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Update the graph with the data here<\/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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u06cc\u0627\u0645 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 &#8211; \u062e\u0637 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u062a\u0627\u0628\u0639 onConnection \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Subscribe to the Redis channel<\/span>\n<span class=\"nx\">subscribeToChannel<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">myChannel<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onMessage<\/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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0628\u0627 Node.js\u060c WebSocket \u0648 Redis \u06cc\u06a9 \u0631\u0627\u0647 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0648 \u062f\u0631\u06a9 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0641\u0631\u0622\u06cc\u0646\u062f \u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.  \u0627\u0628\u062a\u062f\u0627 Node.js \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 WebSocket \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u06cc\u0645\u060c \u0633\u067e\u0633 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 Redis Pub\/Sub \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 \u062a\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0627\u0632 \u0628\u0627\u0637\u0646 \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645.  \u0633\u067e\u0633 \u06cc\u06a9 \u0633\u0631\u0648\u0631 Node.js \u0633\u0627\u062e\u062a\u06cc\u0645 \u0648 \u06cc\u06a9 \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u06cc\u0645 \u0648 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0627\u0632 Chart.js \u0628\u0631\u0627\u06cc \u062a\u062c\u0633\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u063a\u0644\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u062f\u0627\u0631\u0646\u062f \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f.  \u0628\u0627 Node.js\u060c WebSocket \u0648 Redis\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0627\u0634\u0628\u0648\u0631\u062f\u0647\u0627\u06cc \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0641\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0648 \u062f\u0631\u06a9 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0647\u0633\u062a\u0646\u062f. \u0627\u06af\u0631 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062a\u062d\u0644\u06cc\u0644\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u062c\u0627\u0645\u0639 \u0647\u0633\u062a\u06cc\u062f\u060c \u062a\u0631\u06a9\u06cc\u0628 Node.js\u060c WebSocket \u0648 Redis \u06cc\u06a9 \u06af\u0632\u06cc\u0646\u0647 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0631\u0648\u0646\u062f \u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0646\u0635\u0628 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":20377,"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-20376","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\/20376","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=20376"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/20376\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/20377"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=20376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=20376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=20376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}