{"id":33652,"date":"2023-05-29T01:59:39","date_gmt":"2023-08-14T03:21:30","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/"},"modified":"2024-04-30T06:27:39","modified_gmt":"2024-04-29T22:27:39","slug":"%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/","title":{"rendered":"\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868"},"content":{"rendered":"<p>\u5c06\u7528\u4e8e\u521b\u5efa\u5ea7\u4f4d\u8868\u7684 Canvas \u6570\u636e\u6e90\u4ece JSON \u66f4\u6539\u4e3a Redis\u3002<br \/>\n\u901a\u8fc7 Webdis \u8bbf\u95ee Redis\u3002<\/p>\n<h2>\u5c06\u6570\u636e\u5b58\u5165Redis<\/h2>\n<pre class=\"post-pre\"><code><span class=\"p\">{<\/span>\r\n<span class=\"nl\">\"id0001\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u4e2d\u5cf6\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0002\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u9577\u8c37\u5ddd\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0003\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u85e4\u7530\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0004\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u9752\u5c71\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0005\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u5ddd\u4e0a\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0006\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u5409\u7530\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0007\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u5c0f\u6797\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0008\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u5742\u672c\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0009\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u5b89\u85e4\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">},<\/span>\r\n<span class=\"nl\">\"id0010\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"\u4e2d\u6751\"<\/span><span class=\"p\">,<\/span><span class=\"nl\">\"office\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"cp\">#! \/usr\/bin\/node\r\n<\/span><span class=\"c1\">\/\/ ---------------------------------------------------------------<\/span>\r\n<span class=\"c1\">\/\/\tdata_prepare.js<\/span>\r\n<span class=\"c1\">\/\/<\/span>\r\n<span class=\"c1\">\/\/\t\t\t\t\tAug\/02\/2023<\/span>\r\n<span class=\"c1\">\/\/<\/span>\r\n<span class=\"c1\">\/\/ ---------------------------------------------------------------<\/span>\r\n<span class=\"dl\">'<\/span><span class=\"s1\">use strict<\/span><span class=\"dl\">'<\/span>\r\n\r\n<span class=\"kd\">var<\/span> <span class=\"nx\">fs<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fs<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">redis<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">redis<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\r\n\r\n<span class=\"c1\">\/\/ ---------------------------------------------------------------<\/span>\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">data_prepare_proc<\/span> <span class=\"p\">()<\/span>\r\n<span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">var<\/span> <span class=\"nx\">dict_aa<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Object <\/span><span class=\"p\">()<\/span>\r\n\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">file_json<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">status.json<\/span><span class=\"dl\">\"<\/span>\r\n\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">json_str<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fs<\/span><span class=\"p\">.<\/span><span class=\"nf\">readFileSync <\/span><span class=\"p\">(<\/span><span class=\"nx\">file_json<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">utf8<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\r\n\r\n\t<span class=\"k\">try<\/span>\r\n\t\t<span class=\"p\">{<\/span>\r\n\t\t<span class=\"nx\">dict_aa<\/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\">json_str<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"p\">}<\/span>\r\n\t<span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"p\">{<\/span>\r\n\t\t<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 *** from JSON.parse ***<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"p\">}<\/span>\r\n\r\n\t\r\n\t<span class=\"k\">return<\/span>\t<span class=\"nx\">dict_aa<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ ---------------------------------------------------------------<\/span>\r\n<span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">create_proc<\/span><span class=\"p\">(<\/span><span class=\"nx\">options<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">var<\/span> <span class=\"nx\">dict_aa<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">data_prepare_proc <\/span><span class=\"p\">()<\/span>\r\n\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">client<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">redis<\/span><span class=\"p\">.<\/span><span class=\"nf\">createClient<\/span><span class=\"p\">()<\/span>\r\n\t<span class=\"k\">await<\/span> <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nf\">connect<\/span><span class=\"p\">()<\/span>\r\n\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">keys<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">keys<\/span><span class=\"p\">(<\/span><span class=\"nx\">dict_aa<\/span><span class=\"p\">)<\/span>\r\n\r\n\t<span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">var<\/span> <span class=\"nx\">it<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">keys<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"p\">{<\/span>\r\n\t\t<span class=\"kd\">const<\/span> <span class=\"nx\">key<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">keys<\/span><span class=\"p\">[<\/span><span class=\"nx\">it<\/span><span class=\"p\">]<\/span>\r\n\t\t<span class=\"kd\">const<\/span> <span class=\"nx\">str_json<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify <\/span><span class=\"p\">(<\/span><span class=\"nx\">dict_aa<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">])<\/span>\r\n\t\t<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">,<\/span><span class=\"nx\">str_json<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"k\">try<\/span>\r\n\t\t\t<span class=\"p\">{<\/span>\r\n\t\t\t<span class=\"k\">await<\/span> <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">,<\/span> <span class=\"nx\">str_json<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"p\">}<\/span>\r\n\t\t<span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"p\">{<\/span>\r\n\t\t\t<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 *** from client.set ***<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error <\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"p\">}<\/span>\r\n\r\n\t\t<span class=\"p\">}<\/span>\r\n\r\n\t<span class=\"k\">await<\/span> <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nf\">disconnect<\/span><span class=\"p\">()<\/span>\r\n\t<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\">*** \u7d42\u4e86 ***<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\t\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ ---------------------------------------------------------------<\/span>\r\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\">*** \u958b\u59cb ***<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\r\n\r\n<span class=\"nf\">create_proc<\/span><span class=\"p\">({<\/span> <span class=\"na\">argv<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">argv<\/span> <span class=\"p\">})<\/span>\r\n\r\n<span class=\"c1\">\/\/ ---------------------------------------------------------------<\/span>\r\n<\/code><\/pre>\n<h2>\u7f51\u9875<\/h2>\n<pre class=\"post-pre\"><code><span class=\"cp\">&lt;!DOCTYPE HTML&gt;<\/span>\r\n<span class=\"nt\">&lt;html<\/span> <span class=\"na\">lang=<\/span><span class=\"s\">\"ja\"<\/span><span class=\"nt\">&gt;<\/span>\r\n<span class=\"nt\">&lt;head&gt;<\/span>\r\n<span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span><span class=\"nt\">&gt;<\/span>\r\n<span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"zaiseki_redis.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n<span class=\"nt\">&lt;title&gt;<\/span>\u5728\u5e2d\u8868<span class=\"nt\">&lt;\/title&gt;<\/span>\r\n<span class=\"nt\">&lt;\/head&gt;<\/span>\r\n<span class=\"nt\">&lt;body&gt;<\/span>\r\n<span class=\"nt\">&lt;div&gt;<\/span>\r\n<span class=\"nt\">&lt;canvas<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"bar_area\"<\/span> <span class=\"na\">width=<\/span><span class=\"s\">\"400\"<\/span> <span class=\"na\">height=<\/span><span class=\"s\">\"600\"<\/span><span class=\"nt\">&gt;&lt;\/canvas&gt;<\/span>\r\n<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<span class=\"nt\">&lt;hr<\/span> <span class=\"nt\">\/&gt;<\/span>\r\nversion Aug\/02\/2023 PM 14:00<span class=\"nt\">&lt;p<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n<span class=\"nt\">&lt;\/body&gt;<\/span>\r\n<span class=\"nt\">&lt;\/html&gt;<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ -------------------------------------------------------------------------<\/span>\r\n<span class=\"c1\">\/\/\tzaiseki_redis.js<\/span>\r\n<span class=\"c1\">\/\/<\/span>\r\n<span class=\"c1\">\/\/\t\t\t\t\t\tAug\/02\/2023<\/span>\r\n<span class=\"c1\">\/\/ -------------------------------------------------------------------------<\/span>\r\n<span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">onload<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span><span class=\"o\">=&gt;<\/span>\r\n<span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">url_keys<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:7379\/keys\/id*<\/span><span class=\"dl\">\"<\/span>\r\n\r\n\t<span class=\"nf\">p01_proc <\/span><span class=\"p\">(<\/span><span class=\"nx\">url_keys<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ -------------------------------------------------------------------------<\/span>\r\n<span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">p01_proc<\/span> <span class=\"p\">(<\/span><span class=\"nx\">url_keys<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">data_a<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">url_keys<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">res_a<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">data_a<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">()<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">keys_a<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">res_a<\/span><span class=\"p\">.<\/span><span class=\"nx\">keys<\/span>\r\n\t<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">keys_a<\/span><span class=\"p\">)<\/span>\r\n\r\n\t<span class=\"kd\">var<\/span> <span class=\"nx\">dict_bb<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{}<\/span>\r\n\r\n\t<span class=\"kd\">var<\/span> <span class=\"nx\">icount<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span>\r\n\t<span class=\"nx\">keys_a<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach <\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"nf\">function <\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">,<\/span><span class=\"nx\">index<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"p\">{<\/span>\r\n\t\t<span class=\"kd\">const<\/span> <span class=\"nx\">url_key<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:7379\/GET\/<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">key<\/span>\r\n\r\n\t\t<span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">url_key<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"kd\">const<\/span> <span class=\"nx\">res<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">()<\/span>\r\n\r\n\t\t<span class=\"nx\">dict_bb<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">]<\/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\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">GET<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"nx\">icount<\/span> <span class=\"o\">+=<\/span> <span class=\"mi\">1<\/span>\r\n\r\n\t\t<span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">icount<\/span> <span class=\"o\">==<\/span> <span class=\"nx\">keys_a<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span>\r\n              \t\t<span class=\"p\">{<\/span>\r\n\t\t\t<span class=\"nf\">display_proc <\/span><span class=\"p\">(<\/span><span class=\"nx\">dict_bb<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"p\">}<\/span>\r\n\t\t<span class=\"p\">})<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ -------------------------------------------------------------------------<\/span>\r\n<span class=\"c1\">\/\/ [4]:<\/span>\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">display_proc<\/span> <span class=\"p\">(<\/span><span class=\"nx\">dict_aa<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">var<\/span> <span class=\"nx\">bar<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">bar_area<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"kd\">var<\/span> <span class=\"nx\">ctx<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">bar<\/span><span class=\"p\">.<\/span><span class=\"nf\">getContext<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2d<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\r\n\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">font<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">18px '\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af'<\/span><span class=\"dl\">\"<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">strokeStyle<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">black<\/span><span class=\"dl\">\"<\/span> \r\n\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">delt_y<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">40<\/span>\r\n\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">xx<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">100<\/span>\r\n\t<span class=\"kd\">var<\/span> <span class=\"nx\">yy<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">30<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">strokeText<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\u5728\u5e2d\u8868<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span><span class=\"nx\">xx<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">20<\/span><span class=\"p\">,<\/span><span class=\"nx\">yy<\/span><span class=\"p\">)<\/span>\r\n\r\n\t<span class=\"nx\">yy<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">70<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">strokeStyle<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">blue<\/span><span class=\"dl\">\"<\/span> \r\n\t<span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">var<\/span> <span class=\"nx\">key<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">dict_aa<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"p\">{<\/span>\r\n\t\t<span class=\"kd\">const<\/span> <span class=\"nx\">unit<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">dict_aa<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">]<\/span>\r\n\t\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">strokeText<\/span><span class=\"p\">(<\/span><span class=\"nx\">unit<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span><span class=\"nx\">xx<\/span><span class=\"p\">,<\/span><span class=\"nx\">yy<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"kd\">var<\/span> <span class=\"nx\">color<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">red<\/span><span class=\"dl\">'<\/span>\r\n\t\t<span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">unit<\/span><span class=\"p\">.<\/span><span class=\"nx\">office<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"p\">{<\/span>\r\n\t\t\t<span class=\"nx\">color<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">green<\/span><span class=\"dl\">'<\/span>\r\n\t\t\t<span class=\"p\">}<\/span> \r\n\r\n\t\t<span class=\"nf\">draw_circle_proc <\/span><span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">,<\/span><span class=\"nx\">xx<\/span><span class=\"o\">+<\/span><span class=\"mi\">100<\/span><span class=\"p\">,<\/span><span class=\"nx\">yy<\/span><span class=\"o\">-<\/span><span class=\"mi\">8<\/span><span class=\"p\">,<\/span><span class=\"nx\">color<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"nx\">yy<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">delt_y<\/span>\r\n\t\t<span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ -------------------------------------------------------------------------<\/span>\r\n<span class=\"c1\">\/\/ [4-4]:<\/span>\r\n<span class=\"kd\">function<\/span>  <span class=\"nf\">draw_circle_proc<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">,<\/span><span class=\"nx\">xx<\/span><span class=\"p\">,<\/span><span class=\"nx\">yy<\/span><span class=\"p\">,<\/span><span class=\"nx\">color<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">radius<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">10<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">beginPath<\/span><span class=\"p\">()<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">fillStyle<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">color<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">arc <\/span><span class=\"p\">(<\/span><span class=\"nx\">xx<\/span><span class=\"p\">,<\/span><span class=\"nx\">yy<\/span><span class=\"p\">,<\/span><span class=\"nx\">radius<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nx\">PI<\/span><span class=\"o\">*<\/span><span class=\"mi\">2<\/span><span class=\"p\">,<\/span><span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">()<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">closePath<\/span><span class=\"p\">()<\/span>\r\n\t<span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">stroke<\/span><span class=\"p\">()<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ -------------------------------------------------------------------------<\/span>\r\n<\/code><\/pre>\n<p>\u9700\u8981\u8fd0\u884cRedis\u548cWebdis\u3002<\/p>\n<pre class=\"post-pre\"><code>$ systemctl status redis\r\n\u25cf redis.service - Advanced key-value store\r\n     Loaded: loaded (\/usr\/lib\/systemd\/system\/redis.service; disabled; preset: d&gt;\r\n     Active: active (running) since Wed 2023-08-02 09:18:59 JST; 9h ago\r\n   Main PID: 2016 (redis-server)\r\n     Status: \"Ready to accept connections\"\r\n      Tasks: 5 (limit: 37748)\r\n     Memory: 8.2M\r\n        CPU: 18.629s\r\n     CGroup: \/system.slice\/redis.service\r\n             \u2514\u25002016 \"\/usr\/bin\/redis-server 127.0.0.1:6379\"\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code>$ systemctl status webdis\r\n\u25cf webdis.service - REST server for Redis data\r\n     Loaded: loaded (\/usr\/lib\/systemd\/system\/webdis.service; disabled; preset: &gt;\r\n     Active: active (running) since Wed 2023-08-02 10:48:45 JST; 7h ago\r\n    Process: 9990 ExecStart=\/usr\/bin\/webdis \/etc\/webdis.prod.json (code=exited,&gt;\r\n   Main PID: 9991 (webdis)\r\n      Tasks: 5 (limit: 37748)\r\n     Memory: 2.8M\r\n        CPU: 60ms\r\n     CGroup: \/system.slice\/webdis.service\r\n             \u2514\u25009991 \/usr\/bin\/webdis \/etc\/webdis.prod.json\r\n<\/code><\/pre>\n<p>\u4f7f\u7528 Webdis \u7684\u65b9\u6cd5\u53ef\u4ee5\u5728\u8fd9\u4e2a\u53c2\u8003\u9875\u9762\u4e0a\u627e\u5230\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5c06\u7528\u4e8e\u521b\u5efa\u5ea7\u4f4d\u8868\u7684 Canvas \u6570\u636e\u6e90\u4ece JSON \u66f4\u6539\u4e3a Redis\u3002 \u901a\u8fc7 Webdis \u8bbf\u95ee Redi [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-33652","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528webdis\u7684\u5750\u5e2d\u8868\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868\" \/>\n<meta property=\"og:description\" content=\"\u5c06\u7528\u4e8e\u521b\u5efa\u5ea7\u4f4d\u8868\u7684 Canvas \u6570\u636e\u6e90\u4ece JSON \u66f4\u6539\u4e3a Redis\u3002 \u901a\u8fc7 Webdis \u8bbf\u95ee Redi [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528webdis\u7684\u5750\u5e2d\u8868\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-14T03:21:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T22:27:39+00:00\" \/>\n<meta name=\"author\" content=\"\u96c5, \u609f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u96c5, \u609f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/\",\"name\":\"\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-08-14T03:21:30+00:00\",\"dateModified\":\"2024-04-29T22:27:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\",\"name\":\"\u96c5, \u609f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"caption\":\"\u96c5, \u609f\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528webdis\u7684\u5750\u5e2d\u8868\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868","og_description":"\u5c06\u7528\u4e8e\u521b\u5efa\u5ea7\u4f4d\u8868\u7684 Canvas \u6570\u636e\u6e90\u4ece JSON \u66f4\u6539\u4e3a Redis\u3002 \u901a\u8fc7 Webdis \u8bbf\u95ee Redi [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528webdis\u7684\u5750\u5e2d\u8868\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-08-14T03:21:30+00:00","article_modified_time":"2024-04-29T22:27:39+00:00","author":"\u96c5, \u609f","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u96c5, \u609f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/","name":"\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-08-14T03:21:30+00:00","dateModified":"2024-04-29T22:27:39+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528Webdis\u7684\u5750\u5e2d\u8868"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6","name":"\u96c5, \u609f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","caption":"\u96c5, \u609f"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8webdis%e7%9a%84%e5%9d%90%e5%b8%ad%e8%a1%a8\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/33652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=33652"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/33652\/revisions"}],"predecessor-version":[{"id":90254,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/33652\/revisions\/90254"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=33652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=33652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=33652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}