{"id":766,"date":"2026-02-23T21:54:02","date_gmt":"2026-02-23T13:54:02","guid":{"rendered":"https:\/\/blog.itsmygo.uk\/2026\/02\/23\/%e3%80%90%e7%b3%bb%e7%b5%b1%e8%a8%ad%e8%a8%88-30-%e6%a6%82%e5%bf%b5%e3%80%9105-%e5%88%86%e6%95%a3%e5%bc%8f%e7%b3%bb%e7%b5%b1%e8%88%87%e5%85%a7%e5%ae%b9%e5%82%b3%e9%81%9e-cap-%e5%ae%9a\/"},"modified":"2026-02-23T21:54:02","modified_gmt":"2026-02-23T13:54:02","slug":"%e3%80%90%e7%b3%bb%e7%b5%b1%e8%a8%ad%e8%a8%88-30-%e6%a6%82%e5%bf%b5%e3%80%9105-%e5%88%86%e6%95%a3%e5%bc%8f%e7%b3%bb%e7%b5%b1%e8%88%87%e5%85%a7%e5%ae%b9%e5%82%b3%e9%81%9e-cap-%e5%ae%9a","status":"publish","type":"post","link":"https:\/\/blog.itsmygo.uk\/wordpress\/2026\/02\/23\/%e3%80%90%e7%b3%bb%e7%b5%b1%e8%a8%ad%e8%a8%88-30-%e6%a6%82%e5%bf%b5%e3%80%9105-%e5%88%86%e6%95%a3%e5%bc%8f%e7%b3%bb%e7%b5%b1%e8%88%87%e5%85%a7%e5%ae%b9%e5%82%b3%e9%81%9e-cap-%e5%ae%9a\/","title":{"rendered":"\u3010\u7cfb\u7d71\u8a2d\u8a08 30 \u6982\u5ff5\u3011#05 \u5206\u6563\u5f0f\u7cfb\u7d71\u8207\u5167\u5bb9\u50b3\u905e \u2014 CAP \u5b9a\u7406\u3001CDN \u8207\u5373\u6642\u901a\u8a0a"},"content":{"rendered":"\n<div id=\"quiz-8d501edb\">\n<style>\n#quiz-8d501edb .question {\n        background: white;\n        border-radius: 8px;\n        padding: 20px;\n        margin: 20px 0;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      }#quiz-8d501edb .question h3 {\n        margin-top: 0;\n        color: #333;\n      }#quiz-8d501edb .options {\n        list-style: none;\n        padding: 0;\n      }#quiz-8d501edb .options li {\n        padding: 12px 15px;\n        margin: 8px 0;\n        border: 2px solid #ddd;\n        border-radius: 6px;\n        cursor: pointer;\n        transition: all 0.2s;\n      }#quiz-8d501edb .options li:hover:not(.disabled) {\n        border-color: #4caf50;\n        background: #f0fff0;\n      }#quiz-8d501edb .options li.correct {\n        border-color: #4caf50;\n        background: #e8f5e9;\n      }#quiz-8d501edb .options li.wrong {\n        border-color: #f44336;\n        background: #ffebee;\n      }#quiz-8d501edb .options li.disabled {\n        cursor: default;\n        opacity: 0.7;\n      }#quiz-8d501edb .options li.show-answer {\n        border-color: #4caf50;\n        background: #e8f5e9;\n      }#quiz-8d501edb .feedback {\n        margin-top: 15px;\n        padding: 12px;\n        border-radius: 6px;\n        display: none;\n      }#quiz-8d501edb .feedback.correct {\n        background: #e8f5e9;\n        color: #2e7d32;\n        display: block;\n      }#quiz-8d501edb .feedback.wrong {\n        background: #ffebee;\n        color: #c62828;\n        display: block;\n      }#quiz-8d501edb .score {\n        text-align: center;\n        font-size: 1.5em;\n        padding: 20px;\n        background: white;\n        border-radius: 8px;\n        margin-top: 20px;\n      }#quiz-8d501edb .code-block {\n        background: #1e1e1e;\n        color: #d4d4d4;\n        padding: 14px;\n        border-radius: 6px;\n        font-family: \"Monaco\", \"Consolas\", \"Courier New\", monospace;\n        font-size: 0.9em;\n        overflow-x: auto;\n        margin: 12px 0;\n        white-space: pre-wrap;\n      }\n<\/style>\n<h1>\u6e2c\u9a57\uff1a\u5206\u6563\u5f0f\u7cfb\u7d71\u8207\u5167\u5bb9\u50b3\u905e \u2014 CAP \u5b9a\u7406\u3001CDN \u8207\u5373\u6642\u901a\u8a0a<\/h1>\n    <p>\u5171 5 \u984c\uff0c\u9ede\u9078\u7b54\u6848\u5f8c\u6703\u7acb\u5373\u986f\u793a\u7d50\u679c<\/p>\n\n    <div class=\"question\" id=\"q1\">\n      <h3>1. \u5728 CAP \u5b9a\u7406\u4e2d\uff0c\u70ba\u4ec0\u9ebc P\uff08\u5206\u5340\u5bb9\u932f\uff09\u88ab\u8a8d\u70ba\u662f\u300c\u5fc5\u9078\u300d\u7684\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(1, 'A', 'C')\">A. \u56e0\u70ba\u5206\u5340\u5bb9\u932f\u7684\u5be6\u4f5c\u6210\u672c\u6700\u4f4e<\/li>\n        <li onclick=\"checkAnswer(1, 'B', 'C')\">B. \u56e0\u70ba\u6c92\u6709\u5206\u5340\u5bb9\u932f\u5c31\u7121\u6cd5\u505a\u6c34\u5e73\u64f4\u5c55<\/li>\n        <li onclick=\"checkAnswer(1, 'C', 'C')\">C. \u56e0\u70ba\u5728\u771f\u5be6\u4e16\u754c\u4e2d\u7db2\u8def\u5206\u5340\u4e00\u5b9a\u6703\u767c\u751f\uff0c\u9019\u662f\u7121\u6cd5\u907f\u514d\u7684\u524d\u63d0<\/li>\n        <li onclick=\"checkAnswer(1, 'D', 'C')\">D. \u56e0\u70ba\u5206\u5340\u5bb9\u932f\u53ef\u4ee5\u540c\u6642\u4fdd\u8b49\u4e00\u81f4\u6027\u548c\u53ef\u7528\u6027<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb1\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q2\">\n      <h3>2. \u70ba\u4ec0\u9ebc\u5927\u6a94\u6848\uff08\u5982\u5716\u7247\u3001\u5f71\u7247\uff09\u4e0d\u9069\u5408\u76f4\u63a5\u5b58\u9032\u8cc7\u6599\u5eab\uff0c\u800c\u61c9\u8a72\u4f7f\u7528 Blob Storage\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(2, 'A', 'B')\">A. \u8cc7\u6599\u5eab\u7121\u6cd5\u5132\u5b58\u4e8c\u9032\u4f4d\u6a94\u6848\u683c\u5f0f<\/li>\n        <li onclick=\"checkAnswer(2, 'B', 'B')\">B. \u5927\u6a94\u6848\u585e\u9032\u8cc7\u6599\u5eab\u6703\u8b93\u8cc7\u6599\u5eab\u6548\u80fd\u56b4\u91cd\u4e0b\u964d\uff0cBlob Storage \u662f\u5c08\u9580\u8655\u7406\u5927\u6a94\u6848\u7684\u670d\u52d9<\/li>\n        <li onclick=\"checkAnswer(2, 'C', 'B')\">C. Blob Storage \u6bd4\u8cc7\u6599\u5eab\u4fbf\u5b9c\uff0c\u4f46\u901f\u5ea6\u8f03\u6162<\/li>\n        <li onclick=\"checkAnswer(2, 'D', 'B')\">D. \u8cc7\u6599\u5eab\u53ea\u80fd\u5b58\u6587\u5b57\u8cc7\u6599\uff0c\u4e0d\u80fd\u5b58\u6a94\u6848<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb2\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q3\">\n      <h3>3. CDN \u7b2c\u4e00\u6b21\u6536\u5230\u67d0\u500b\u7528\u6236\u7684\u8acb\u6c42\u6642\uff0c\u7bc0\u9ede\u4e0a\u9084\u6c92\u6709\u5feb\u53d6\u3002\u6b64\u6642 CDN \u6703\u600e\u9ebc\u505a\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(3, 'A', 'D')\">A. \u76f4\u63a5\u56de\u50b3 404 \u932f\u8aa4\uff0c\u544a\u8a34\u7528\u6236\u7a0d\u5f8c\u518d\u8a66<\/li>\n        <li onclick=\"checkAnswer(3, 'B', 'D')\">B. \u628a\u7528\u6236\u91cd\u65b0\u5c0e\u5411\u5230\u539f\u59cb Server \u7684 URL<\/li>\n        <li onclick=\"checkAnswer(3, 'C', 'D')\">C. \u5f9e\u5176\u4ed6\u5730\u5340\u7684 CDN \u7bc0\u9ede\u8907\u88fd\u5feb\u53d6\u904e\u4f86<\/li>\n        <li onclick=\"checkAnswer(3, 'D', 'D')\">D. \u5411\u539f\u59cb Server \u62ff\u8cc7\u6599\uff0c\u5feb\u53d6\u8d77\u4f86\u5f8c\u518d\u56de\u7d66\u7528\u6236<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb3\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q4\">\n      <h3>4. WebSocket \u548c Webhook \u6700\u6839\u672c\u7684\u5dee\u7570\u662f\u4ec0\u9ebc\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(4, 'A', 'B')\">A. WebSocket \u7528\u65bc\u524d\u7aef\uff0cWebhook \u7528\u65bc\u5f8c\u7aef<\/li>\n        <li onclick=\"checkAnswer(4, 'B', 'B')\">B. WebSocket \u662f Client \u548c Server \u4e4b\u9593\u7684\u6301\u7e8c\u96d9\u5411\u9023\u7dda\uff1bWebhook \u662f Server \u5c0d Server \u7684\u4e8b\u4ef6\u9a45\u52d5\u55ae\u5411\u901a\u77e5<\/li>\n        <li onclick=\"checkAnswer(4, 'C', 'B')\">C. WebSocket \u4f7f\u7528 HTTP \u5354\u5b9a\uff0cWebhook \u4f7f\u7528\u81ea\u5b9a\u7fa9\u5354\u5b9a<\/li>\n        <li onclick=\"checkAnswer(4, 'D', 'B')\">D. WebSocket \u53ea\u80fd\u50b3\u6587\u5b57\uff0cWebhook \u53ef\u4ee5\u50b3\u4efb\u4f55\u8cc7\u6599<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb4\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q5\">\n      <h3>5. \u4e00\u500b\u793e\u7fa4\u5a92\u9ad4\u5e73\u53f0\u6b63\u5728\u8a2d\u8a08\u300c\u6309\u8b9a\u300d\u529f\u80fd\u3002\u6839\u64da CAP \u5b9a\u7406\uff0c\u9019\u500b\u529f\u80fd\u5728\u5206\u6563\u5f0f\u7cfb\u7d71\u4e2d\u61c9\u8a72\u504f\u5411\u54ea\u7a2e\u8a2d\u8a08\uff1f\u70ba\u4ec0\u9ebc\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(5, 'A', 'C')\">A. CP \u7cfb\u7d71 \u2014 \u6309\u8b9a\u6578\u5fc5\u9808\u5373\u6642\u7cbe\u78ba\uff0c\u4e0d\u80fd\u6709\u4efb\u4f55\u8aa4\u5dee<\/li>\n        <li onclick=\"checkAnswer(5, 'B', 'C')\">B. CA \u7cfb\u7d71 \u2014 \u6309\u8b9a\u529f\u80fd\u4e0d\u9700\u8981\u5206\u5340\u5bb9\u932f<\/li>\n        <li onclick=\"checkAnswer(5, 'C', 'C')\">C. AP \u7cfb\u7d71 \u2014 \u6309\u8b9a\u6578\u665a\u5e7e\u79d2\u66f4\u65b0\u6c92\u95dc\u4fc2\uff0c\u91cd\u8981\u7684\u662f\u7528\u6236\u96a8\u6642\u90fd\u80fd\u64cd\u4f5c<\/li>\n        <li onclick=\"checkAnswer(5, 'D', 'C')\">D. CAP \u4e09\u8005\u517c\u9867 \u2014 \u6309\u8b9a\u529f\u80fd\u5f88\u7c21\u55ae\uff0c\u4e0d\u53d7 CAP \u5b9a\u7406\u9650\u5236<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb5\"><\/div>\n    <\/div>\n\n    <div class=\"score\" id=\"score\" style=\"display:none;\"><\/div>\n<script>\n\n      let answered = 0;\n      let correct = 0;\n      const total = 5;\n      const explanations = {\n        1: \"\u6587\u7ae0\u6307\u51fa\uff0c\u5728\u771f\u5be6\u4e16\u754c\u4e2d\u7db2\u8def\u4e00\u5b9a\u6703\u51fa\u554f\u984c\uff08\u6d77\u5e95\u96fb\u7e9c\u88ab\u9bca\u9b5a\u54ac\u3001\u6a5f\u623f\u8df3\u96fb\u3001\u8def\u7531\u5668\u7576\u6389\uff09\uff0c\u6240\u4ee5 P \u4e0d\u662f\u9078\u9805\u800c\u662f\u524d\u63d0\u3002\u771f\u6b63\u7684\u9078\u64c7\u662f\u5728 C\uff08\u4e00\u81f4\u6027\uff09\u548c A\uff08\u53ef\u7528\u6027\uff09\u4e4b\u9593\u53d6\u6368\u3002\u9078\u9805 B \u96d6\u7136\u807d\u8d77\u4f86\u5408\u7406\uff0c\u4f46\u6587\u7ae0\u5f37\u8abf\u7684\u662f\u300c\u7db2\u8def\u5206\u5340\u7121\u6cd5\u907f\u514d\u300d\u9019\u500b\u4e8b\u5be6\uff0c\u800c\u975e\u64f4\u5c55\u80fd\u529b\u3002\",\n        2: \"\u6587\u7ae0\u660e\u78ba\u6307\u51fa\u300c\u786c\u585e\u9032\u8cc7\u6599\u5eab\u6703\u8b93\u5b83\u6162\u5230\u7206\u70b8\u300d\uff0cBlob Storage \u662f\u5c08\u9580\u8655\u7406\u5927\u6a94\u6848\u7684\u670d\u52d9\u3002\u9078\u9805 A \u548c D \u4e0d\u6b63\u78ba\uff0c\u8cc7\u6599\u5eab\u6280\u8853\u4e0a\u53ef\u4ee5\u5132\u5b58\u4e8c\u9032\u4f4d\u8cc7\u6599\uff0c\u53ea\u662f\u6548\u80fd\u5f88\u5dee\u3002\u9078\u9805 C \u7684\u8aaa\u6cd5\u4e5f\u4e0d\u6e96\u78ba\uff0cBlob Storage \u7684\u8a2d\u8a08\u5c31\u662f\u9ad8\u64f4\u5c55\u6027\u548c\u9ad8\u8010\u4e45\u6027\u3002\",\n        3: \"\u6587\u7ae0\u4e2d\u7684\u5de5\u4f5c\u6d41\u7a0b\u5716\u6e05\u695a\u986f\u793a\uff1a\u7b2c\u4e00\u6b21\u8acb\u6c42\u6642\uff0cCDN \u7bc0\u9ede\u6c92\u6709\u5feb\u53d6\uff0c\u6703\u5411\u539f\u59cb Server \u62ff\u8cc7\u6599\uff0c\u5feb\u53d6\u8d77\u4f86\u5f8c\u518d\u56de\u7d66\u7528\u6236\u3002\u4e4b\u5f8c\u540c\u4e00\u5730\u5340\u7684\u7528\u6236\u518d\u8acb\u6c42\u540c\u6a23\u7684\u8cc7\u6e90\uff0cCDN \u7bc0\u9ede\u5c31\u80fd\u76f4\u63a5\u5f9e\u5feb\u53d6\u56de\u61c9\uff0c\u4e0d\u9700\u8981\u518d\u53bb\u539f\u59cb Server \u62ff\u3002\",\n        4: \"\u6587\u7ae0\u7528\u8868\u683c\u6bd4\u8f03\u4e86\u5169\u8005\u7684\u5dee\u7570\uff1aWebSocket \u662f Client \u548c Server \u4e4b\u9593\u7684\u6301\u7e8c\u96d9\u5411\u9023\u7dda\uff08\u50cf\u6253\u96fb\u8a71\uff09\uff0c\u9069\u5408\u5373\u6642\u4e92\u52d5\u5982\u804a\u5929\u548c\u904a\u6232\uff1bWebhook \u662f Server \u5c0d Server \u7684\u55ae\u5411\u901a\u77e5\uff08\u50cf\u5feb\u905e\u5230\u4e86\u6253\u96fb\u8a71\u901a\u77e5\u4f60\uff09\uff0c\u9069\u5408\u4e8b\u4ef6\u901a\u77e5\u5982\u4ed8\u6b3e\u6210\u529f\u3002\u9078\u9805 A \u904e\u65bc\u7c21\u5316\uff0cWebhook \u4e5f\u6d89\u53ca HTTP \u8acb\u6c42\u3002\u9078\u9805 C \u4e0d\u6b63\u78ba\uff0cWebhook \u672c\u8eab\u5c31\u662f\u900f\u904e HTTP POST \u8acb\u6c42\u5be6\u73fe\u7684\u3002\",\n        5: \"\u6587\u7ae0\u4ee5\u300c\u793e\u7fa4\u5a92\u9ad4\u6309\u8b9a\u6578\u300d\u70ba AP \u7cfb\u7d71\u7684\u4ee3\u8868\u7bc4\u4f8b\uff0c\u660e\u78ba\u6307\u51fa\u300c\u665a\u5e7e\u79d2\u66f4\u65b0\u6c92\u95dc\u4fc2\uff0c\u91cd\u8981\u7684\u662f\u80fd\u5237\u52d5\u614b\u300d\u3002\u9019\u4ee3\u8868\u53ef\u7528\u6027\u6bd4\u56b4\u683c\u4e00\u81f4\u6027\u66f4\u91cd\u8981\u3002\u9078\u9805 B \u4e0d\u6b63\u78ba\uff0c\u56e0\u70ba\u6587\u7ae0\u5f37\u8abf P \u662f\u5fc5\u9078\u7684\u524d\u63d0\uff0c\u4e0d\u5b58\u5728\u7d14 CA \u7684\u5be6\u52d9\u7cfb\u7d71\u3002\u9078\u9805 D \u4e5f\u4e0d\u5c0d\uff0cCAP \u5b9a\u7406\u9069\u7528\u65bc\u6240\u6709\u5206\u6563\u5f0f\u7cfb\u7d71\u3002\"\n      };\n\n      function checkAnswer(qNum, selected, correctAns) {\n        const question = document.getElementById(\"q\" + qNum);\n        if (question.classList.contains(\"answered\")) return;\n\n        question.classList.add(\"answered\");\n        answered++;\n\n        const options = question.querySelectorAll(\".options li\");\n        options.forEach((opt) => {\n          opt.classList.add(\"disabled\");\n          if (opt.textContent.startsWith(correctAns + \".\")) {\n            opt.classList.add(\"show-answer\");\n          }\n        });\n\n        const feedback = document.getElementById(\"fb\" + qNum);\n        if (selected === correctAns) {\n          correct++;\n          feedback.className = \"feedback correct\";\n          feedback.innerHTML = \"&#10003; \u6b63\u78ba\uff01\" + explanations[qNum];\n        } else {\n          feedback.className = \"feedback wrong\";\n          feedback.innerHTML =\n            \"&#10007; \u932f\u8aa4\u3002\u6b63\u78ba\u7b54\u6848\u662f \" + correctAns + \"\u3002\" + explanations[qNum];\n          options.forEach((opt) => {\n            if (opt.textContent.startsWith(selected + \".\")) {\n              opt.classList.add(\"wrong\");\n            }\n          });\n        }\n\n        if (answered === total) {\n          const scoreDiv = document.getElementById(\"score\");\n          scoreDiv.style.display = \"block\";\n          scoreDiv.innerHTML =\n            \"\u6e2c\u9a57\u5b8c\u6210\uff01\u5f97\u5206\uff1a\" +\n            correct +\n            \" \/ \" +\n            total +\n            (correct === total\n              ? \" &#127881; \u5168\u5c0d\uff01\"\n              : correct >= Math.ceil(total * 0.6)\n                ? \" &#128077; \u4e0d\u932f\uff01\"\n                : \" &#128218; \u518d\u8907\u7fd2\u4e00\u4e0b\u5427\");\n        }\n      }\n    \n<\/script>\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">**\u7cfb\u5217**\uff1a\u7cfb\u7d71\u8a2d\u8a08 30 \u6982\u5ff5\uff08\u7b2c 5 \u7bc7\uff0c\u5171 6 \u7bc7\uff09<br>**\u96e3\u5ea6**\uff1aL2-\u9032\u968e<br>**\u524d\u7f6e\u77e5\u8b58**\uff1a\u7b2c 1 \u7bc7\uff08HTTP\u3001Latency\uff09\u3001\u7b2c 3 \u7bc7\uff08\u6c34\u5e73\u64f4\u5c55\uff09\u3001\u7b2c 4 \u7bc7\uff08Replication \u4e00\u81f4\u6027\uff09<br>**\u4f86\u6e90**\uff1aSystem Design was HARD until I Learned these 30 Concepts \u2014 Ashish Pratap Singh<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u9019\u7bc7\u5728\u8b1b\u4ec0\u9ebc<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u524d\u5e7e\u7bc7\u6211\u5011\u5b78\u4e86\u8cc7\u6599\u5eab\u600e\u9ebc\u64f4\u5c55\u3001\u600e\u9ebc\u8907\u88fd\u3002\u4f46\u7576\u7cfb\u7d71\u5206\u6563\u5728\u591a\u53f0\u6a5f\u5668\u4e0a\uff0c\u65b0\u554f\u984c\u4f86\u4e86\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u8cc7\u6599\u4e00\u81f4\u8ddf\u7cfb\u7d71\u53ef\u7528\uff0c\u4f60\u53ea\u80fd\u9078\u4e00\u500b\uff1f\uff08CAP \u5b9a\u7406\uff09<\/li>\n\n\n<li>\u5927\u6a94\u6848\u653e\u54ea\u88e1\uff1f\u600e\u9ebc\u8b93\u5168\u7403\u7528\u6236\u5feb\u901f\u53d6\u5f97\uff1f\uff08Blob Storage + CDN\uff09<\/li>\n\n\n<li>\u600e\u9ebc\u505a\u5230\u300c\u5373\u6642\u300d\u901a\u8a0a\uff0c\u4e0d\u7528\u4e00\u76f4\u554f server \u6709\u6c92\u6709\u65b0\u6d88\u606f\uff1f\uff08WebSocket vs Webhook\uff09<\/li>\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u7bc7\u6db5\u84cb\u7cfb\u7d71\u8a2d\u8a08 30 \u6982\u5ff5\u7684\u7b2c 21-25 \u500b\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">21. CAP Theorem\uff08CAP \u5b9a\u7406\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e00\u53e5\u8a71\u8aaa\u660e<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5206\u6563\u5f0f\u7cfb\u7d71\u4e0d\u53ef\u80fd\u540c\u6642\u6eff\u8db3\u4e00\u81f4\u6027\u3001\u53ef\u7528\u6027\u3001\u5206\u5340\u5bb9\u932f \u2014 \u4e09\u9078\u4e8c\uff0c\u800c\u4e14\u5206\u5340\u5bb9\u932f\u662f\u5fc5\u9078\u7684\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e09\u500b\u5b57\u6bcd\u5206\u5225\u662f\u4ec0\u9ebc<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u5b57\u6bcd<\/th>\n<th>\u540d\u7a31<\/th>\n<th>\u767d\u8a71\u7ffb\u8b6f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>C<\/strong><\/td>\n<td>Consistency\uff08\u4e00\u81f4\u6027\uff09<\/td>\n<td>\u4e0d\u7ba1\u4f60\u554f\u54ea\u53f0 server\uff0c\u62ff\u5230\u7684\u8cc7\u6599\u90fd\u4e00\u6a23<\/td>\n<\/tr>\n<tr>\n<td><strong>A<\/strong><\/td>\n<td>Availability\uff08\u53ef\u7528\u6027\uff09<\/td>\n<td>\u4e0d\u7ba1\u4ec0\u9ebc\u6642\u5019\u554f\uff0c\u90fd\u80fd\u62ff\u5230\u56de\u61c9\uff08\u4e0d\u6703 503\uff09<\/td>\n<\/tr>\n<tr>\n<td><strong>P<\/strong><\/td>\n<td>Partition Tolerance\uff08\u5206\u5340\u5bb9\u932f\uff09<\/td>\n<td>\u5c31\u7b97\u67d0\u4e9b server \u4e4b\u9593\u65b7\u7dda\u4e86\uff0c\u7cfb\u7d71\u9084\u80fd\u7e7c\u7e8c\u904b\u4f5c<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u70ba\u4ec0\u9ebc\u4e09\u500b\u4e0d\u80fd\u540c\u6642\u6eff\u8db3<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u60f3\u50cf\u4f60\u6709\u5169\u53f0 server\uff08Server A \u548c Server B\uff09\uff0c\u5b83\u5011\u4e4b\u9593\u7684\u7db2\u8def\u65b7\u4e86\uff08\u9019\u5c31\u662f\u300c\u5206\u5340\u300d\uff09\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u7528\u6236 \u2500\u2500\u2192 Server A \u2500\u2500\u2715\u2500\u2500\u2192 Server B\n         \u6709\u65b0\u8cc7\u6599         \u9084\u662f\u820a\u8cc7\u6599\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">\u9019\u6642\u5019\u4f60\u6709\u5169\u500b\u9078\u64c7\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9078\u64c7 1\uff1a\u4fdd\u4e00\u81f4\u6027\uff08CP\uff09<\/strong> \u2014 Server A \u8aaa\u300c\u6211\u8ddf Server B \u540c\u6b65\u4e0d\u4e86\uff0c\u5148\u4e0d\u56de\u61c9\u4f60\uff0c\u7b49\u7db2\u8def\u6062\u5fa9\u300d<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u7d50\u679c\uff1a\u8cc7\u6599\u4e00\u81f4\uff0c\u4f46\u7528\u6236\u66ab\u6642\u7528\u4e0d\u4e86\uff08\u72a7\u7272\u53ef\u7528\u6027\uff09<\/li>\n\n\n<li>\u9069\u5408\uff1a<strong>\u9280\u884c\u8f49\u5e33<\/strong> \u2014 \u5be7\u53ef\u8b93\u4f60\u7b49\uff0c\u4e5f\u4e0d\u80fd\u5e33\u6236\u91d1\u984d\u4e0d\u4e00\u81f4<\/li>\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9078\u64c7 2\uff1a\u4fdd\u53ef\u7528\u6027\uff08AP\uff09<\/strong> \u2014 Server A \u8aaa\u300c\u6211\u5148\u7528\u624b\u4e0a\u7684\u8cc7\u6599\u56de\u4f60\uff0c\u4e4b\u5f8c\u518d\u8ddf Server B \u540c\u6b65\u300d<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u7d50\u679c\uff1a\u7528\u6236\u80fd\u7528\uff0c\u4f46\u53ef\u80fd\u770b\u5230\u820a\u8cc7\u6599\uff08\u72a7\u7272\u4e00\u81f4\u6027\uff09<\/li>\n\n\n<li>\u9069\u5408\uff1a<strong>\u793e\u7fa4\u5a92\u9ad4\u6309\u8b9a\u6578<\/strong> \u2014 \u665a\u5e7e\u79d2\u66f4\u65b0\u6c92\u95dc\u4fc2\uff0c\u91cd\u8981\u7684\u662f\u80fd\u5237\u52d5\u614b<\/li>\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u70ba\u4ec0\u9ebc P \u662f\u5fc5\u9078\u7684<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u771f\u5be6\u4e16\u754c\u4e2d\uff0c\u7db2\u8def\u4e00\u5b9a\u6703\u51fa\u554f\u984c \u2014 \u6d77\u5e95\u96fb\u7e9c\u88ab\u9bca\u9b5a\u54ac\u3001\u6a5f\u623f\u8df3\u96fb\u3001\u8def\u7531\u5668\u7576\u6389\u3002\u6240\u4ee5 P\uff08\u5206\u5340\u5bb9\u932f\uff09\u4e0d\u662f\u9078\u9805\uff0c\u662f\u524d\u63d0\u3002\u771f\u6b63\u7684\u9078\u64c7\u662f\uff1a<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">**CP \u9084\u662f AP\uff1f\u4e00\u81f4\u6027\u512a\u5148\uff0c\u9084\u662f\u53ef\u7528\u6027\u512a\u5148\uff1f**<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Vibe Coder \u6aa2\u67e5\u9ede<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u770b\u5230\u7cfb\u7d71\u8a2d\u8a08\u8a0e\u8ad6\u6642\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u9019\u500b\u529f\u80fd\u5c0d\u8cc7\u6599\u4e00\u81f4\u6027\u7684\u8981\u6c42\u6709\u591a\u9ad8\uff1f\uff08\u91d1\u6d41 vs \u6309\u8b9a\u6578\uff09<\/li>\n\n\n<li>\u7576\u90e8\u5206\u7cfb\u7d71\u639b\u4e86\uff0c\u61c9\u8a72\u62d2\u7d55\u670d\u52d9\u9084\u662f\u56de\u50b3\u53ef\u80fd\u904e\u6642\u7684\u8cc7\u6599\uff1f<\/li>\n\n\n<li>AI \u5e6b\u4f60\u8a2d\u8a08\u7684\u7cfb\u7d71\u5982\u679c\u7528\u4e86\u591a\u53f0 server\uff0c\u6709\u8003\u616e\u8cc7\u6599\u540c\u6b65\u7684\u554f\u984c\u55ce\uff1f<\/li>\n\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">22. Blob Storage\uff08\u7269\u4ef6\u5132\u5b58\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e00\u53e5\u8a71\u8aaa\u660e<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5c08\u9580\u5b58\u5927\u6a94\u6848\u7684\u96f2\u7aef\u5132\u5b58 \u2014 \u5716\u7247\u3001\u5f71\u7247\u3001PDF \u5f80\u9019\u88e1\u4e1f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u70ba\u4ec0\u9ebc\u9700\u8981 Blob Storage<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8cc7\u6599\u5eab\uff08MySQL\u3001PostgreSQL\uff09\u9069\u5408\u5b58\u7d50\u69cb\u5316\u8cc7\u6599\uff1a\u7528\u6236\u540d\u7a31\u3001\u8a02\u55ae\u7de8\u865f\u3001\u4ea4\u6613\u8a18\u9304\u3002\u4f46\u5982\u679c\u4f60\u8981\u5b58\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u4e00\u5f35 5MB \u7684\u5546\u54c1\u5716\u7247<\/li>\n\n\n<li>\u4e00\u6bb5 200MB \u7684\u6559\u5b78\u5f71\u7247<\/li>\n\n\n<li>\u4e00\u4efd 50MB \u7684 PDF \u5831\u544a<\/li>\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u786c\u585e\u9032\u8cc7\u6599\u5eab\u6703\u8b93\u5b83\u6162\u5230\u7206\u70b8\u3002Blob Storage \u5c31\u662f\u5c08\u9580\u5e79\u9019\u4ef6\u4e8b\u7684\u670d\u52d9\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b83\u600e\u9ebc\u904b\u4f5c<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u4f60\u7684\u61c9\u7528\u7a0b\u5f0f\n  \u2502\n  \u251c\u2500 \u7d50\u69cb\u5316\u8cc7\u6599 \u2500\u2500\u2192 \u8cc7\u6599\u5eab\uff08PostgreSQL\uff09\n  \u2502   \u7528\u6236\u540d\u7a31\u3001\u8a02\u55ae...     \u2191 \u5b58 URL \u6307\u5411 Blob\n  \u2502                          \u2502\n  \u2514\u2500 \u5927\u6a94\u6848 \u2500\u2500\u2500\u2500\u2500\u2500\u2192 Blob Storage\uff08S3\uff09\n      \u5716\u7247\u3001\u5f71\u7247...    \u56de\u50b3\u4e00\u500b\u516c\u958b URL\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">\u767d\u8a71\u7ffb\u8b6f\uff1a\u8cc7\u6599\u5eab\u88e1\u5b58\u7684\u662f\u300c\u9019\u5f35\u5716\u7247\u7684\u7db2\u5740\u300d\uff0c\u5716\u7247\u672c\u8eab\u653e\u5728 Blob Storage\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u4ee3\u8868\u670d\u52d9<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u670d\u52d9<\/th>\n<th>\u96f2\u7aef\u5e73\u53f0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>S3<\/strong>\uff08Simple Storage Service\uff09<\/td>\n<td>AWS<\/td>\n<\/tr>\n<tr>\n<td><strong>Cloud Storage<\/strong><\/td>\n<td>Google Cloud<\/td>\n<\/tr>\n<tr>\n<td><strong>Blob Storage<\/strong><\/td>\n<td>Azure<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">AI \u5e6b\u4f60\u5beb\u7684\u7a0b\u5f0f\u78bc\u88e1\u53ef\u80fd\u51fa\u73fe<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">import boto3\n\ns3 = boto3.client(<span class=\"hljs-string\">'s3'<\/span>)\n\n<span class=\"hljs-comment\"># \u4e0a\u50b3\u6a94\u6848\u5230 S3<\/span>\ns3.upload_file(<span class=\"hljs-string\">'photo.jpg'<\/span>, <span class=\"hljs-string\">'my-bucket'<\/span>, <span class=\"hljs-string\">'images\/photo.jpg'<\/span>)\n<span class=\"hljs-comment\">#               \u2191 \u672c\u5730\u6a94\u6848     \u2191 \u5132\u5b58\u6876\u540d\u7a31    \u2191 \u5b58\u5728\u54ea\u500b\u8def\u5f91<\/span>\n\n<span class=\"hljs-comment\"># \u7522\u751f\u4e00\u500b\u81e8\u6642\u4e0b\u8f09\u9023\u7d50\uff081 \u5c0f\u6642\u5f8c\u904e\u671f\uff09<\/span>\nurl = s3.generate_presigned_url(<span class=\"hljs-string\">'get_object'<\/span>,\n    Params={<span class=\"hljs-string\">'Bucket'<\/span>: <span class=\"hljs-string\">'my-bucket'<\/span>, <span class=\"hljs-string\">'Key'<\/span>: <span class=\"hljs-string\">'images\/photo.jpg'<\/span>},\n    ExpiresIn=<span class=\"hljs-number\">3600<\/span>)\n<span class=\"hljs-comment\"># \u2191 \u9019\u500b URL \u53ef\u4ee5\u76f4\u63a5\u7d66\u7528\u6236\u4e0b\u8f09\uff0c\u4e0d\u9700\u8981\u7d93\u904e\u4f60\u7684 server<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u628a\u672c\u5730\u7684 <code>photo.jpg<\/code> \u4e0a\u50b3\u5230\u96f2\u7aef\u7684 <code>my-bucket<\/code> \u5132\u5b58\u6876\uff0c\u7136\u5f8c\u7522\u751f\u4e00\u500b\u66ab\u6642\u7684\u4e0b\u8f09\u9023\u7d50\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vibe Coder \u6aa2\u67e5\u9ede<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u770b\u5230 AI \u7684\u7a0b\u5f0f\u78bc\u8655\u7406\u6a94\u6848\u4e0a\u50b3\u6642\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u5927\u6a94\u6848\u662f\u5b58\u5230 Blob Storage\uff08S3 \u7b49\uff09\uff0c\u4e0d\u662f\u585e\u9032\u8cc7\u6599\u5eab\uff1f<\/li>\n\n\n<li>\u6709\u6c92\u6709\u7528 presigned URL\uff1f\uff08\u4e0d\u8981\u8b93\u6240\u6709\u6a94\u6848\u90fd\u516c\u958b\u53ef\u8b80\uff09<\/li>\n\n\n<li>\u5132\u5b58\u6876\u7684\u6b0a\u9650\u8a2d\u5b9a\u5408\u7406\u55ce\uff1f\uff08AI \u6709\u6642\u6703\u8a2d\u6210\u5168\u516c\u958b\uff09<\/li>\n\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">23. CDN\uff08Content Delivery Network\uff0c\u5167\u5bb9\u50b3\u905e\u7db2\u8def\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e00\u53e5\u8a71\u8aaa\u660e<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u5168\u7403\u5404\u5730\u653e\u5feb\u53d6\u4f3a\u670d\u5668\uff0c\u8b93\u7528\u6236\u5f9e\u6700\u8fd1\u7684\u7bc0\u9ede\u53d6\u5167\u5bb9\uff0c\u4e0d\u7528\u8de8\u6d0b\u62ff\u8cc7\u6599\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u70ba\u4ec0\u9ebc\u9700\u8981 CDN<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5047\u8a2d\u4f60\u7684 server \u5728\u7f8e\u570b\uff0c\u53f0\u7063\u7684\u7528\u6236\u8981\u770b\u4e00\u5f35\u5716\u7247\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u6c92\u6709 CDN\uff1a\n\u53f0\u7063\u7528\u6236 \u2500\u2500\u2192 \u8de8\u592a\u5e73\u6d0b \u2500\u2500\u2192 \u7f8e\u570b Server \u2500\u2500\u2192 \u8de8\u592a\u5e73\u6d0b\u56de\u4f86\n                                           \u5ef6\u9072\uff1a200ms+\n\n\u6709 CDN\uff1a\n\u53f0\u7063\u7528\u6236 \u2500\u2500\u2192 \u53f0\u7063 CDN \u7bc0\u9ede\uff08\u5df2\u5feb\u53d6\uff09\n                \u5ef6\u9072\uff1a20ms\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">CDN \u5c31\u662f\u628a\u4f60\u7684\u975c\u614b\u6a94\u6848\uff08\u5716\u7247\u3001CSS\u3001JS\u3001\u5f71\u7247\uff09\u8907\u88fd\u5230\u5168\u7403\u5404\u5730\u7684\u4f3a\u670d\u5668\u3002\u7528\u6236\u8acb\u6c42\u6642\uff0c\u81ea\u52d5\u5c0e\u5230\u6700\u8fd1\u7684\u7bc0\u9ede\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b83\u7684\u5de5\u4f5c\u6d41\u7a0b<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u7b2c\u4e00\u6b21\u8acb\u6c42\uff1a\n\u7528\u6236 \u2500\u2500\u2192 CDN \u7bc0\u9ede\uff08\u6c92\u6709\u5feb\u53d6\uff09\u2500\u2500\u2192 \u5411\u539f\u59cb Server \u62ff \u2500\u2500\u2192 \u5feb\u53d6\u8d77\u4f86 \u2500\u2500\u2192 \u56de\u7d66\u7528\u6236\n\n\u7b2c\u4e8c\u6b21\u8acb\u6c42\uff08\u540c\u4e00\u5730\u5340\u7684\u7528\u6236\uff09\uff1a\n\u7528\u6236 \u2500\u2500\u2192 CDN \u7bc0\u9ede\uff08\u6709\u5feb\u53d6\u4e86\uff09\u2500\u2500\u2192 \u76f4\u63a5\u56de\u7d66\u7528\u6236 \u2713\n<\/code><\/span><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">CDN \u9069\u5408\u4ec0\u9ebc vs \u4e0d\u9069\u5408\u4ec0\u9ebc<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u9069\u5408\u653e CDN<\/th>\n<th>\u4e0d\u9069\u5408\u653e CDN<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u5716\u7247\u3001\u5f71\u7247<\/td>\n<td>\u500b\u4eba\u5316\u5167\u5bb9\uff08\u4f60\u7684\u8cfc\u7269\u8eca\uff09<\/td>\n<\/tr>\n<tr>\n<td>CSS\u3001JavaScript \u6a94\u6848<\/td>\n<td>\u5373\u6642\u8b8a\u52d5\u7684\u8cc7\u6599\uff08\u80a1\u50f9\uff09<\/td>\n<\/tr>\n<tr>\n<td>\u5b57\u578b\u6a94\u6848<\/td>\n<td>\u9700\u8981\u9a57\u8b49\u8eab\u4efd\u7684 API \u56de\u61c9<\/td>\n<\/tr>\n<tr>\n<td>\u975c\u614b HTML \u9801\u9762<\/td>\n<td>\u8cc7\u6599\u5eab\u67e5\u8a62\u7d50\u679c<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u4ee3\u8868\u670d\u52d9<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u670d\u52d9<\/th>\n<th>\u7279\u8272<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Cloudflare<\/strong><\/td>\n<td>\u514d\u8cbb\u65b9\u6848\u5f88\u5927\u65b9\uff0c\u4e5f\u63d0\u4f9b\u5b89\u5168\u9632\u8b77<\/td>\n<\/tr>\n<tr>\n<td><strong>AWS CloudFront<\/strong><\/td>\n<td>\u8ddf S3 \u7121\u7e2b\u6574\u5408<\/td>\n<\/tr>\n<tr>\n<td><strong>Akamai<\/strong><\/td>\n<td>\u8001\u724c CDN\uff0c\u4f01\u696d\u7d1a<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Blob Storage + CDN \u7684\u9ec3\u91d1\u7d44\u5408<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u5be6\u52d9\u4e2d\uff0c\u9019\u5169\u500b\u5e38\u5e38\u4e00\u8d77\u7528\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u4e0a\u50b3\u6d41\u7a0b\uff1a\n\u7528\u6236\u4e0a\u50b3\u5716\u7247 \u2500\u2500\u2192 \u4f60\u7684 Server \u2500\u2500\u2192 \u5b58\u5230 S3\uff08Blob Storage\uff09\n\n\u8b80\u53d6\u6d41\u7a0b\uff1a\n\u7528\u6236\u700f\u89bd\u5716\u7247 \u2500\u2500\u2192 CDN \u7bc0\u9ede \u2500\u2500\u2192\uff08\u5982\u679c\u6c92\u5feb\u53d6\uff09\u2500\u2500\u2192 \u5f9e S3 \u62ff\n                   \u2193\n              \u76f4\u63a5\u56de\u7d66\u7528\u6236\uff08\u8d85\u5feb\uff09\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">S3 \u8ca0\u8cac\u5b58\u6a94\uff0cCDN \u8ca0\u8cac\u5feb\u901f\u5206\u767c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vibe Coder \u6aa2\u67e5\u9ede<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u770b\u5230 AI \u7684\u7cfb\u7d71\u67b6\u69cb\u6642\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u975c\u614b\u8cc7\u6e90\uff08\u5716\u7247\u3001JS\u3001CSS\uff09\u6709\u6c92\u6709\u8d70 CDN\uff1f<\/li>\n\n\n<li>CDN \u7684\u5feb\u53d6\u6642\u9593\u8a2d\u591a\u4e45\uff1f\uff08\u592a\u9577\u6703\u770b\u5230\u820a\u7248\uff0c\u592a\u77ed\u6548\u679c\u4e0d\u597d\uff09<\/li>\n\n\n<li>\u66f4\u65b0\u6a94\u6848\u6642\u6709\u6c92\u6709\u505a cache busting\uff1f\uff08\u4f8b\u5982\u6a94\u540d\u52a0 hash\uff1a<code>app.3f7a.js<\/code>\uff09<\/li>\n\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">24. WebSockets<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e00\u53e5\u8a71\u8aaa\u660e<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">client \u548c server \u4e4b\u9593\u7684\u6301\u7e8c\u96d9\u5411\u901a\u8a0a\u901a\u9053 \u2014 \u5169\u908a\u90fd\u80fd\u96a8\u6642\u767c\u8a0a\u606f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u8ddf\u4e00\u822c HTTP \u6709\u4ec0\u9ebc\u4e0d\u540c<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u4e00\u822c HTTP\uff08\u50cf\u5bc4\u4fe1\uff09\uff1a\nClient: \u300c\u6709\u65b0\u6d88\u606f\u55ce\uff1f\u300d \u2500\u2500\u2192 Server: \u300c\u6c92\u6709\u300d\nClient: \u300c\u6709\u65b0\u6d88\u606f\u55ce\uff1f\u300d \u2500\u2500\u2192 Server: \u300c\u6c92\u6709\u300d\nClient: \u300c\u6709\u65b0\u6d88\u606f\u55ce\uff1f\u300d \u2500\u2500\u2192 Server: \u300c\u6709\uff01\u7d66\u4f60\u300d\n\u2191 \u8981\u4e00\u76f4\u554f\uff08polling\uff09\uff0c\u5f88\u6d6a\u8cbb\n\nWebSocket\uff08\u50cf\u6253\u96fb\u8a71\uff09\uff1a\nClient \u2190\u2500\u2500\u5efa\u7acb\u9023\u7dda\u2500\u2500\u2192 Server\n         \uff08\u4fdd\u6301\u901a\u8a71\u4e2d\uff09\nServer: \u300c\u6709\u65b0\u6d88\u606f\u4e86\uff01\u300d \u2500\u2500\u2192 Client    \u2190 server \u4e3b\u52d5\u63a8\nClient: \u300c\u6536\u5230\uff0c\u6211\u8981\u56de\u8986\u300d \u2500\u2500\u2192 Server  \u2190 client \u4e5f\u80fd\u96a8\u6642\u8aaa\n<\/code><\/span><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u6700\u5c0f\u7bc4\u4f8b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u524d\u7aef\u5efa\u7acb WebSocket \u9023\u7dda\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ \u5efa\u7acb WebSocket \u9023\u7dda\uff08ws:\/\/ \u662f WebSocket \u5354\u5b9a\uff09<\/span>\n<span class=\"hljs-keyword\">const<\/span> socket = <span class=\"hljs-keyword\">new<\/span> WebSocket(<span class=\"hljs-string\">'ws:\/\/example.com\/chat'<\/span>);\n\n<span class=\"hljs-comment\">\/\/ \u9023\u7dda\u6210\u529f\u6642<\/span>\nsocket.onopen = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    socket.send(<span class=\"hljs-string\">'\u4f60\u597d\uff01'<\/span>);  <span class=\"hljs-comment\">\/\/ \u767c\u8a0a\u606f\u7d66 server<\/span>\n};\n\n<span class=\"hljs-comment\">\/\/ \u6536\u5230 server \u7684\u8a0a\u606f\u6642<\/span>\nsocket.onmessage = <span class=\"hljs-function\">(<span class=\"hljs-params\">event<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'\u6536\u5230\uff1a'<\/span>, event.data);\n};\n\n<span class=\"hljs-comment\">\/\/ \u9023\u7dda\u65b7\u958b\u6642<\/span>\nsocket.onclose = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">'\u65b7\u7dda\u4e86'<\/span>);\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u9023\u4e0a server \u5f8c\uff0c\u96d9\u65b9\u96a8\u6642\u53ef\u4ee5\u4e92\u50b3\u8a0a\u606f\uff0c\u4e0d\u7528\u6bcf\u6b21\u90fd\u91cd\u65b0\u5efa\u7acb\u9023\u7dda\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f8c\u7aef\uff08\u7528 Python FastAPI \u70ba\u4f8b\uff09\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">from fastapi import WebSocket\n\n@app.websocket(<span class=\"hljs-string\">\"\/chat\"<\/span>)       <span class=\"hljs-comment\"># \u9019\u4e0d\u662f\u4e00\u822c\u7684 HTTP \u8def\u7531\uff0c\u662f WebSocket \u8def\u7531<\/span>\nasync def chat(ws: WebSocket):\n    await ws.accept()          <span class=\"hljs-comment\"># \u63a5\u53d7\u9023\u7dda<\/span>\n    <span class=\"hljs-keyword\">while<\/span> <span class=\"hljs-keyword\">True<\/span>:                <span class=\"hljs-comment\"># \u6301\u7e8c\u76e3\u807d\uff08\u4e0d\u6703\u7d50\u675f\uff09<\/span>\n        msg = await ws.receive_text()   <span class=\"hljs-comment\"># \u7b49\u7528\u6236\u8aaa\u8a71<\/span>\n        await ws.send_text(f<span class=\"hljs-string\">\"\u4f60\u8aaa\u4e86\uff1a{msg}\"<\/span>)  <span class=\"hljs-comment\"># \u56de\u8986<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1aserver \u63a5\u53d7\u9023\u7dda\u5f8c\uff0c\u9032\u5165\u4e00\u500b\u7121\u9650\u8ff4\u5708\uff0c\u4e00\u76f4\u7b49\u8457\u6536\u8a0a\u606f\u3001\u56de\u8a0a\u606f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u4ec0\u9ebc\u6642\u5019\u7528 WebSocket<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u5834\u666f<\/th>\n<th>\u70ba\u4ec0\u9ebc\u9700\u8981<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>\u5373\u6642\u804a\u5929<\/strong>\uff08LINE\u3001Slack\uff09<\/td>\n<td>\u8a0a\u606f\u8981\u5373\u6642\u9001\u9054<\/td>\n<\/tr>\n<tr>\n<td><strong>\u591a\u4eba\u904a\u6232<\/strong><\/td>\n<td>\u73a9\u5bb6\u52d5\u4f5c\u8981\u5373\u6642\u540c\u6b65<\/td>\n<\/tr>\n<tr>\n<td><strong>\u80a1\u7968\u884c\u60c5<\/strong><\/td>\n<td>\u50f9\u683c\u4e00\u76f4\u5728\u8b8a\uff0c\u8981\u5373\u6642\u66f4\u65b0<\/td>\n<\/tr>\n<tr>\n<td><strong>\u5354\u4f5c\u7de8\u8f2f<\/strong>\uff08Google Docs\uff09<\/td>\n<td>\u6bcf\u500b\u4eba\u7684\u6253\u5b57\u90fd\u8981\u5373\u6642\u986f\u793a<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u4ee3\u50f9<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WebSocket \u4e0d\u662f\u514d\u8cbb\u7684\u5348\u9910\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u6bcf\u500b\u9023\u7dda\u90fd\u5360\u7528 server \u8cc7\u6e90\uff08\u8a18\u61b6\u9ad4\u3001\u6a94\u6848\u63cf\u8ff0\u7b26\uff09<\/li>\n\n\n<li>1 \u842c\u500b\u7528\u6236\u540c\u6642\u5728\u7dda = 1 \u842c\u689d\u6301\u7e8c\u9023\u7dda<\/li>\n\n\n<li>\u9700\u8981\u8655\u7406\u65b7\u7dda\u91cd\u9023\u7684\u908f\u8f2f<\/li>\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Vibe Coder \u6aa2\u67e5\u9ede<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u770b\u5230 AI \u7528 WebSocket \u6642\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u771f\u7684\u9700\u8981\u5373\u6642\u96d9\u5411\u901a\u8a0a\u55ce\uff1f\u5982\u679c\u53ea\u662f\u5076\u723e\u62ff\u4e00\u6b21\u8cc7\u6599\uff0c\u7528\u4e00\u822c HTTP \u5c31\u597d<\/li>\n\n\n<li>\u6709\u6c92\u6709\u8655\u7406\u65b7\u7dda\u91cd\u9023\uff1f\uff08\u7db2\u8def\u4e0d\u7a69\u6642 WebSocket \u6703\u65b7\uff09<\/li>\n\n\n<li><code>ws:\/\/<\/code> \u662f\u4e0d\u52a0\u5bc6\u7684\uff0c\u6b63\u5f0f\u74b0\u5883\u8981\u7528 <code>wss:\/\/<\/code>\uff08\u5c31\u50cf <code>http<\/code> \u5c0d <code>https<\/code>\uff09<\/li>\n\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">25. Webhooks<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e00\u53e5\u8a71\u8aaa\u660e<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u300c\u4e8b\u60c5\u505a\u5b8c\u4e86\u53eb\u6211\u300d \u2014 server \u4e3b\u52d5\u901a\u77e5\u53e6\u4e00\u500b server\uff0c\u4e0d\u7528\u4e00\u76f4\u8f2a\u8a62\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u8ddf WebSocket \u6709\u4ec0\u9ebc\u4e0d\u540c<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f88\u591a\u4eba\u641e\u6df7\u9019\u5169\u500b\uff0c\u5176\u5be6\u5b83\u5011\u89e3\u6c7a\u7684\u554f\u984c\u5b8c\u5168\u4e0d\u540c\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>WebSocket<\/th>\n<th>Webhook<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>\u65b9\u5411<\/strong><\/td>\n<td>Client \u548c Server \u96d9\u5411<\/td>\n<td>Server \u5c0d Server \u55ae\u5411<\/td>\n<\/tr>\n<tr>\n<td><strong>\u9023\u7dda<\/strong><\/td>\n<td>\u6301\u7e8c\u4fdd\u6301\u9023\u7dda<\/td>\n<td>\u6c92\u6709\u6301\u7e8c\u9023\u7dda\uff0c\u4e8b\u4ef6\u89f8\u767c\u6642\u767c\u4e00\u500b HTTP \u8acb\u6c42<\/td>\n<\/tr>\n<tr>\n<td><strong>\u9069\u5408<\/strong><\/td>\n<td>\u5373\u6642\u4e92\u52d5\uff08\u804a\u5929\u3001\u904a\u6232\uff09<\/td>\n<td>\u4e8b\u4ef6\u901a\u77e5\uff08\u4ed8\u6b3e\u6210\u529f\u3001\u7a0b\u5f0f\u78bc\u63a8\u9001\uff09<\/td>\n<\/tr>\n<tr>\n<td><strong>\u767d\u8a71<\/strong><\/td>\n<td>\u6253\u96fb\u8a71\uff08\u4e00\u76f4\u901a\u8457\uff09<\/td>\n<td>\u5feb\u905e\u5230\u4e86\u6253\u96fb\u8a71\u901a\u77e5\u4f60\uff08\u53eb\u4e00\u6b21\u5c31\u639b\uff09<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u5be6\u969b\u5834\u666f\uff1aStripe \u4ed8\u6b3e\u901a\u77e5<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">\u6c92\u6709 Webhook\uff08\u4f60\u4e00\u76f4\u554f\uff09\uff1a\n\u4f60\u7684 Server: \u300c\u4ed8\u6b3e\u6210\u529f\u4e86\u55ce\uff1f\u300d \u2500\u2500\u2192 Stripe: \u300c\u9084\u6c92\u300d\n\u4f60\u7684 Server: \u300c\u4ed8\u6b3e\u6210\u529f\u4e86\u55ce\uff1f\u300d \u2500\u2500\u2192 Stripe: \u300c\u9084\u6c92\u300d\n\u4f60\u7684 Server: \u300c\u4ed8\u6b3e\u6210\u529f\u4e86\u55ce\uff1f\u300d \u2500\u2500\u2192 Stripe: \u300c\u6210\u529f\u4e86\uff01\u300d\n\u2191 \u6bcf\u79d2\u554f\u4e00\u6b21\uff0c\u6d6a\u8cbb\u8cc7\u6e90\uff08polling\uff09\n\n\u6709 Webhook\uff08Stripe \u901a\u77e5\u4f60\uff09\uff1a\n\u4f60\u7684 Server: \uff08\u505a\u81ea\u5df1\u7684\u4e8b...\uff09\n<span class=\"hljs-attr\">Stripe<\/span>: \u300c\u4ed8\u6b3e\u6210\u529f\u4e86\uff01\u300d \u2500\u2500\u2192 POST https:<span class=\"hljs-comment\">\/\/\u4f60\u7684server.com\/webhook\/stripe<\/span>\n\u2191 \u4e8b\u60c5\u767c\u751f\u6642\u624d\u901a\u77e5\uff0c\u9ad8\u6548\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u6700\u5c0f\u7bc4\u4f8b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f60\u9700\u8981\u505a\u7684\u4e8b \u2014 \u63d0\u4f9b\u4e00\u500b\u63a5\u6536\u901a\u77e5\u7684 API\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">from fastapi import Request\n\n@app.post(<span class=\"hljs-string\">\"\/webhook\/stripe\"<\/span>)         <span class=\"hljs-comment\"># Stripe \u6703\u6253\u9019\u500b\u7db2\u5740<\/span>\nasync def stripe_webhook(request: Request):\n    payload = await request.json()    <span class=\"hljs-comment\"># \u62ff\u5230 Stripe \u9001\u4f86\u7684\u8cc7\u6599<\/span>\n\n    event_type = payload&#91;<span class=\"hljs-string\">'type'<\/span>]      <span class=\"hljs-comment\"># \u770b\u662f\u4ec0\u9ebc\u4e8b\u4ef6<\/span>\n\n    <span class=\"hljs-keyword\">if<\/span> event_type == <span class=\"hljs-string\">'payment_intent.succeeded'<\/span>:\n        order_id = payload&#91;<span class=\"hljs-string\">'data'<\/span>]&#91;<span class=\"hljs-string\">'object'<\/span>]&#91;<span class=\"hljs-string\">'metadata'<\/span>]&#91;<span class=\"hljs-string\">'order_id'<\/span>]\n        await update_order_status(order_id, <span class=\"hljs-string\">'paid'<\/span>)   <span class=\"hljs-comment\"># \u66f4\u65b0\u8a02\u55ae\u72c0\u614b<\/span>\n\n    <span class=\"hljs-keyword\">return<\/span> {<span class=\"hljs-string\">\"status\"<\/span>: <span class=\"hljs-string\">\"ok\"<\/span>}           <span class=\"hljs-comment\"># \u56de\u8986 Stripe\uff1a\u6211\u6536\u5230\u4e86<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u4f60\u7684 server \u63d0\u4f9b\u4e00\u500b\u7db2\u5740\uff0cStripe \u4ed8\u6b3e\u6210\u529f\u5f8c\u6703\u81ea\u52d5\u767c\u4e00\u500b POST \u8acb\u6c42\u5230\u9019\u500b\u7db2\u5740\uff0c\u4f60\u63a5\u6536\u5230\u5f8c\u66f4\u65b0\u8a02\u55ae\u72c0\u614b\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e38\u898b\u7684 Webhook \u4f7f\u7528\u5834\u666f<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u670d\u52d9<\/th>\n<th>\u4ec0\u9ebc\u6642\u5019\u89f8\u767c<\/th>\n<th>\u901a\u77e5\u4ec0\u9ebc<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Stripe<\/strong><\/td>\n<td>\u4ed8\u6b3e\u6210\u529f\/\u5931\u6557<\/td>\n<td>\u4ea4\u6613\u7d50\u679c<\/td>\n<\/tr>\n<tr>\n<td><strong>GitHub<\/strong><\/td>\n<td>\u6709\u4eba push \u7a0b\u5f0f\u78bc<\/td>\n<td>commit \u8cc7\u8a0a<\/td>\n<\/tr>\n<tr>\n<td><strong>Slack<\/strong><\/td>\n<td>\u6709\u4eba\u5728\u983b\u9053\u767c\u8a0a\u606f<\/td>\n<td>\u8a0a\u606f\u5167\u5bb9<\/td>\n<\/tr>\n<tr>\n<td><strong>Shopify<\/strong><\/td>\n<td>\u6709\u65b0\u8a02\u55ae<\/td>\n<td>\u8a02\u55ae\u8cc7\u6599<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Webhook \u7684\u5b89\u5168\u6ce8\u610f\u4e8b\u9805<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4efb\u4f55\u4eba\u90fd\u53ef\u4ee5\u507d\u9020\u4e00\u500b POST \u8acb\u6c42\u6253\u5230\u4f60\u7684 webhook URL\uff0c\u6240\u4ee5\u5fc5\u9808\u9a57\u8b49\u4f86\u6e90\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">import hmac\nimport hashlib\n\ndef verify_stripe_signature(payload, signature, secret):\n    expected = hmac.<span class=\"hljs-keyword\">new<\/span>(\n        secret.encode(),\n        payload.encode(),\n        hashlib.sha256\n    ).hexdigest()\n    <span class=\"hljs-keyword\">return<\/span> hmac.compare_digest(expected, signature)\n    <span class=\"hljs-comment\"># \u2191 \u7528 Stripe \u7d66\u4f60\u7684 secret \u9a57\u8b49\u9019\u500b\u8acb\u6c42\u771f\u7684\u4f86\u81ea Stripe<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u7528\u4e00\u500b\u53ea\u6709\u4f60\u548c Stripe \u77e5\u9053\u7684\u5bc6\u9470\uff0c\u9a57\u7b97\u6536\u5230\u7684\u8cc7\u6599\u6709\u6c92\u6709\u88ab\u7ac4\u6539\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vibe Coder \u6aa2\u67e5\u9ede<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u770b\u5230 AI \u5beb\u4e86 webhook \u7aef\u9ede\u6642\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u6709\u6c92\u6709\u9a57\u8b49\u8acb\u6c42\u4f86\u6e90\uff1f\uff08\u4e0d\u9a57\u8b49\u7684\u8a71\u4efb\u4f55\u4eba\u90fd\u80fd\u507d\u9020\u901a\u77e5\uff09<\/li>\n\n\n<li>\u6709\u6c92\u6709\u56de\u8986\u6b63\u78ba\u7684 HTTP \u72c0\u614b\u78bc\uff1f\uff08\u901a\u5e38\u56de 200\uff0c\u5426\u5247\u5c0d\u65b9\u6703\u91cd\u8a66\uff09<\/li>\n\n\n<li>\u6709\u6c92\u6709\u8655\u7406\u300c\u91cd\u8907\u901a\u77e5\u300d\u7684\u60c5\u6cc1\uff1f\uff08\u7db2\u8def\u554f\u984c\u53ef\u80fd\u5c0e\u81f4\u540c\u4e00\u4e8b\u4ef6\u901a\u77e5\u5169\u6b21\uff09<\/li>\n\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e94\u500b\u6982\u5ff5\u7684\u95dc\u4fc2\u6574\u7406<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u4e94\u500b\u6982\u5ff5\u5728\u4e00\u500b\u771f\u5be6\u7cfb\u7d71\u4e2d\u53ef\u80fd\u540c\u6642\u51fa\u73fe\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">\u7528\u6236\u4e0a\u50b3\u5716\u7247\n  \u2502\n  \u251c\u2500 \u5716\u7247\u5b58\u5230 <span class=\"hljs-selector-tag\">Blob<\/span> <span class=\"hljs-selector-tag\">Storage<\/span>\uff08<span class=\"hljs-selector-tag\">S3<\/span>\uff09        \u2190 <span class=\"hljs-selector-id\">#22<\/span>\n  \u2502\n  \u251c\u2500 \u900f\u904e <span class=\"hljs-selector-tag\">CDN<\/span> \u5206\u767c\u7d66\u5168\u7403\u7528\u6236              \u2190 <span class=\"hljs-selector-id\">#23<\/span>\n  \u2502\n  \u251c\u2500 \u591a\u53f0 <span class=\"hljs-selector-tag\">Server<\/span> \u4e4b\u9593\u7684\u8cc7\u6599\u540c\u6b65           \u2190 <span class=\"hljs-selector-id\">#21<\/span> <span class=\"hljs-selector-tag\">CAP<\/span> \u5b9a\u7406\n  \u2502   \u8981\u9078 <span class=\"hljs-selector-tag\">CP<\/span> \u9084\u662f <span class=\"hljs-selector-tag\">AP<\/span>\uff1f\n  \u2502\n  \u251c\u2500 \u5373\u6642\u901a\u77e5\u597d\u53cb\u300c\u4e0a\u50b3\u4e86\u65b0\u7167\u7247\u300d          \u2190 <span class=\"hljs-selector-id\">#24<\/span> <span class=\"hljs-selector-tag\">WebSocket<\/span>\n  \u2502   \u900f\u904e\u6301\u7e8c\u9023\u7dda\u63a8\u9001\n  \u2502\n  \u2514\u2500 \u89f8\u767c\u7b2c\u4e09\u65b9\u5716\u7247\u8fa8\u8b58\u670d\u52d9               \u2190 <span class=\"hljs-selector-id\">#25<\/span> <span class=\"hljs-selector-tag\">Webhook<\/span>\n      \u8fa8\u8b58\u5b8c\u6210\u5f8c\u56de\u8abf\u901a\u77e5\u4f60\u7684 <span class=\"hljs-selector-tag\">server<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u672c\u7bc7\u7e3d\u7d50<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u6982\u5ff5<\/th>\n<th>\u4e00\u53e5\u8a71\u8a18\u61b6<\/th>\n<th>\u95dc\u9375\u8a5e<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>CAP \u5b9a\u7406<\/strong><\/td>\n<td>\u5206\u6563\u5f0f\u7cfb\u7d71\u4e09\u9078\u4e8c\uff0cP \u5fc5\u9078<\/td>\n<td>\u4e00\u81f4\u6027 vs \u53ef\u7528\u6027<\/td>\n<\/tr>\n<tr>\n<td><strong>Blob Storage<\/strong><\/td>\n<td>\u5927\u6a94\u6848\u5009\u5eab\uff0c\u8cc7\u6599\u5eab\u5b58 URL \u5c31\u597d<\/td>\n<td>S3\u3001\u5132\u5b58\u6876<\/td>\n<\/tr>\n<tr>\n<td><strong>CDN<\/strong><\/td>\n<td>\u5168\u7403\u5feb\u53d6\uff0c\u975c\u614b\u8cc7\u6e90\u5f9e\u6700\u8fd1\u7684\u7bc0\u9ede\u62ff<\/td>\n<td>Cloudflare\u3001\u5ef6\u9072<\/td>\n<\/tr>\n<tr>\n<td><strong>WebSocket<\/strong><\/td>\n<td>\u6301\u7e8c\u96d9\u5411\u901a\u8a71\uff0c\u5373\u6642\u4e92\u50b3\u8a0a\u606f<\/td>\n<td><code>ws:\/\/<\/code>\u3001\u5373\u6642\u804a\u5929<\/td>\n<\/tr>\n<tr>\n<td><strong>Webhook<\/strong><\/td>\n<td>\u4e8b\u60c5\u505a\u5b8c\u6253\u96fb\u8a71\u901a\u77e5\uff0c\u4e0d\u7528\u4e00\u76f4\u554f<\/td>\n<td>POST \u56de\u8abf\u3001\u4e8b\u4ef6\u9a45\u52d5<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u5fc5\u770b\u61c2 vs \u77e5\u9053\u5c31\u597d<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u5fc5\u770b\u61c2\uff08\u9762\u8a66\u548c\u5be6\u52d9\u90fd\u5e38\u898b\uff09\uff1a\n- CAP \u5b9a\u7406\u7684\u4e09\u9078\u4e8c\u908f\u8f2f \u2014 \u6703\u88ab\u554f\n- CDN \u7684\u904b\u4f5c\u539f\u7406 \u2014 \u6bcf\u500b Web \u61c9\u7528\u90fd\u5728\u7528\n- WebSocket \u548c Webhook \u7684\u5dee\u7570 \u2014 \u5f88\u5bb9\u6613\u641e\u6df7\n\n\u77e5\u9053\u5c31\u597d\uff08\u9047\u5230\u518d\u67e5\uff09\uff1a\n- S3 \u7684 ACL \u6b0a\u9650\u7d30\u7bc0\n- CDN \u7684 cache invalidation \u7b56\u7565\n- WebSocket \u7684\u5fc3\u8df3\u6a5f\u5236\u548c\u81ea\u52d5\u91cd\u9023\u5be6\u4f5c\n<\/code><\/span><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e0b\u4e00\u7bc7\u9810\u544a<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7b2c 6 \u7bc7\uff08\u5b8c\u7d50\u7bc7\uff09\u6703\u6db5\u84cb\u6982\u5ff5 26-30\uff1a\u5fae\u670d\u52d9\u67b6\u69cb\u3001\u8a0a\u606f\u4f47\u5217\u8207\u5e38\u898b\u7684\u67b6\u69cb\u6a21\u5f0f\u3002\u7576\u7cfb\u7d71\u8b8a\u5927\u3001\u5718\u968a\u8b8a\u591a\uff0c\u600e\u9ebc\u628a\u4e00\u500b\u5de8\u5927\u7684\u61c9\u7528\u62c6\u6210\u53ef\u7368\u7acb\u90e8\u7f72\u7684\u5c0f\u670d\u52d9\uff1f<\/p>\n\n\n\n<div id=\"quiz-cf6fb78a\">\n<style>\n#quiz-cf6fb78a .badge {\n        display: inline-block;\n        padding: 4px 10px;\n        border-radius: 12px;\n        font-size: 0.75em;\n        font-weight: bold;\n        margin-left: 8px;\n      }#quiz-cf6fb78a .badge.scenario {\n        background: #ebf8ff;\n        color: #2b6cb0;\n      }#quiz-cf6fb78a .badge.debug {\n        background: #fef3c7;\n        color: #92400e;\n      }#quiz-cf6fb78a .question-adv {\n        background: white;\n        border-radius: 10px;\n        padding: 24px;\n        margin: 20px 0;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n        border-left: 4px solid #ed8936;\n      }#quiz-cf6fb78a .question-adv h3 {\n        margin-top: 0;\n        color: #2d3748;\n      }#quiz-cf6fb78a .code-block {\n        background: #1e1e1e;\n        color: #d4d4d4;\n        padding: 14px;\n        border-radius: 6px;\n        font-family: \"Menlo\", \"Monaco\", \"Courier New\", monospace;\n        font-size: 0.9em;\n        overflow-x: auto;\n        margin: 12px 0;\n        white-space: pre-wrap;\n      }#quiz-cf6fb78a .options-adv {\n        list-style: none;\n        padding: 0;\n      }#quiz-cf6fb78a .options-adv li {\n        padding: 14px 16px;\n        margin: 10px 0;\n        border: 2px solid #e2e8f0;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.2s;\n      }#quiz-cf6fb78a .options-adv li:hover:not(.disabled) {\n        border-color: #ed8936;\n        background: #fffaf0;\n      }#quiz-cf6fb78a .options-adv li.disabled {\n        cursor: default;\n        opacity: 0.7;\n      }#quiz-cf6fb78a .options-adv li.show-answer {\n        border-color: #48bb78;\n        background: #f0fff4;\n      }#quiz-cf6fb78a .options-adv li.wrong {\n        border-color: #fc8181;\n        background: #fff5f5;\n      }#quiz-cf6fb78a .feedback-adv {\n        margin-top: 16px;\n        padding: 14px;\n        border-radius: 8px;\n        display: none;\n        line-height: 1.6;\n      }#quiz-cf6fb78a .feedback-adv.correct {\n        background: #f0fff4;\n        color: #276749;\n        display: block;\n      }#quiz-cf6fb78a .feedback-adv.wrong {\n        background: #fff5f5;\n        color: #c53030;\n        display: block;\n      }#quiz-cf6fb78a .feedback-adv \n      .score-adv {\n        text-align: center;\n        font-size: 1.4em;\n        padding: 24px;\n        background: white;\n        border-radius: 10px;\n        margin-top: 24px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n      }#quiz-cf6fb78a .intro {\n        background: #ebf8ff;\n        padding: 16px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        color: #2c5282;\n      }\n<\/style>\n<h1>\u9032\u968e\u6e2c\u9a57\uff1a\u5206\u6563\u5f0f\u7cfb\u7d71\u8207\u5167\u5bb9\u50b3\u905e \u2014 CAP \u5b9a\u7406\u3001CDN \u8207\u5373\u6642\u901a\u8a0a<\/h1>\n    <div class=\"intro\">\n      <strong>\u6e2c\u9a57\u76ee\u6a19\uff1a<\/strong>\u9a57\u8b49\u4f60\u662f\u5426\u80fd\u5728\u5be6\u969b\u60c5\u5883\u4e2d\u61c9\u7528\u6240\u5b78\u3002<br \/>\n      \u5171 5 \u984c\uff0c\u5305\u542b\u60c5\u5883\u984c\u8207\u932f\u8aa4\u8a3a\u65b7\u984c\u3002\n    <\/div>\n\n    <!-- \u60c5\u5883\u984c 1 -->\n    <div class=\"question-adv\" id=\"qAdv1\">\n      <h3>1. \u4f60\u6b63\u5728\u8a2d\u8a08\u4e00\u500b\u7dda\u4e0a\u9280\u884c\u8f49\u5e33\u7cfb\u7d71\uff0c\u90e8\u7f72\u5728\u4e09\u500b\u4e0d\u540c\u5730\u5340\u7684\u8cc7\u6599\u4e2d\u5fc3\u3002\u7522\u54c1\u7d93\u7406\u554f\u4f60\uff1a\u300c\u7576\u5176\u4e2d\u4e00\u500b\u8cc7\u6599\u4e2d\u5fc3\u8ddf\u5176\u4ed6\u5169\u500b\u65b7\u7dda\u6642\uff0c\u7528\u6236\u7684\u8f49\u5e33\u8acb\u6c42\u8a72\u600e\u9ebc\u8655\u7406\uff1f\u300d\u4f60\u6703\u600e\u9ebc\u5efa\u8b70\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(1, 'A', 'B')\">A. \u8b93\u65b7\u7dda\u7684\u8cc7\u6599\u4e2d\u5fc3\u7e7c\u7e8c\u7368\u7acb\u8655\u7406\u8f49\u5e33\uff0c\u4e4b\u5f8c\u518d\u540c\u6b65\u9918\u984d\uff0c\u78ba\u4fdd\u7528\u6236\u9ad4\u9a57\u4e0d\u53d7\u5f71\u97ff<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'B', 'B')\">B. \u66ab\u505c\u65b7\u7dda\u8cc7\u6599\u4e2d\u5fc3\u7684\u8f49\u5e33\u529f\u80fd\uff0c\u7b49\u7db2\u8def\u6062\u5fa9\u540c\u6b65\u5f8c\u624d\u5141\u8a31\u64cd\u4f5c\uff0c\u907f\u514d\u5e33\u6236\u9918\u984d\u4e0d\u4e00\u81f4<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'C', 'B')\">C. \u5c07\u6240\u6709\u7528\u6236\u7684\u8acb\u6c42\u90fd\u5c0e\u5230\u540c\u4e00\u500b\u8cc7\u6599\u4e2d\u5fc3\u8655\u7406\uff0c\u907f\u514d\u4efb\u4f55\u8cc7\u6599\u540c\u6b65\u554f\u984c<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'D', 'B')\">D. \u8b93\u7528\u6236\u81ea\u5df1\u9078\u64c7\u8981\u4e00\u81f4\u6027\u9084\u662f\u53ef\u7528\u6027\uff0c\u63d0\u4f9b\u5169\u7a2e\u6a21\u5f0f\u5207\u63db<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv1\"><\/div>\n    <\/div>\n\n    <!-- \u60c5\u5883\u984c 2 -->\n    <div class=\"question-adv\" id=\"qAdv2\">\n      <h3>2. \u4f60\u7684\u96fb\u5546\u5e73\u53f0\u8b93\u7528\u6236\u4e0a\u50b3\u5546\u54c1\u5716\u7247\u3002\u76ee\u524d\u5716\u7247\u662f\u7528 Base64 \u7de8\u78bc\u76f4\u63a5\u5b58\u5728 PostgreSQL \u8cc7\u6599\u5eab\u88e1\uff0c\u6700\u8fd1\u7528\u6236\u62b1\u6028\u9801\u9762\u8f09\u5165\u8d8a\u4f86\u8d8a\u6162\u3002AI \u5e6b\u4f60\u63d0\u51fa\u4e86\u4ee5\u4e0b\u6539\u5584\u65b9\u6848\uff0c\u54ea\u500b\u6700\u5408\u7406\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(2, 'A', 'C')\">A. \u5347\u7d1a\u8cc7\u6599\u5eab\u7684\u786c\u9ad4\u898f\u683c\uff08\u66f4\u591a RAM \u548c SSD\uff09\uff0c\u52a0\u901f\u5716\u7247\u8b80\u53d6<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'B', 'C')\">B. \u628a\u5716\u7247\u58d3\u7e2e\u5230\u66f4\u5c0f\u7684\u5c3a\u5bf8\u5f8c\u7e7c\u7e8c\u5b58\u5728\u8cc7\u6599\u5eab\u88e1<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'C', 'C')\">C. \u5c07\u5716\u7247\u9077\u79fb\u5230 S3\uff08Blob Storage\uff09\uff0c\u8cc7\u6599\u5eab\u53ea\u5b58\u5716\u7247\u7684 URL\uff0c\u4e26\u642d\u914d CDN \u5206\u767c<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'D', 'C')\">D. \u76f4\u63a5\u7528 CDN \u53d6\u4ee3\u8cc7\u6599\u5eab\u4f86\u5b58\u653e\u6240\u6709\u5546\u54c1\u8cc7\u6599\uff0c\u5305\u62ec\u5716\u7247\u548c\u5546\u54c1\u63cf\u8ff0<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv2\"><\/div>\n    <\/div>\n\n    <!-- \u60c5\u5883\u984c 3 -->\n    <div class=\"question-adv\" id=\"qAdv3\">\n      <h3>3. \u4f60\u6b63\u5728\u958b\u767c\u4e00\u500b\u61c9\u7528\uff0c\u9700\u8981\u5728\u7528\u6236\u5b8c\u6210 Stripe \u4ed8\u6b3e\u5f8c\u81ea\u52d5\u66f4\u65b0\u8a02\u55ae\u72c0\u614b\u3002\u4f60\u6709\u5169\u500b\u65b9\u6848\u53ef\u9078\uff0c\u54ea\u500b\u66f4\u5408\u9069\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <div class=\"code-block\">\u65b9\u6848 A\uff1a\u7528 WebSocket \u5efa\u7acb\u8207 Stripe \u7684\u6301\u7e8c\u9023\u7dda\uff0c\u5373\u6642\u63a5\u6536\u4ed8\u6b3e\u7d50\u679c\n\u65b9\u6848 B\uff1a\u8a2d\u5b9a\u4e00\u500b Webhook \u7aef\u9ede\uff0c\u8b93 Stripe \u4ed8\u6b3e\u6210\u529f\u5f8c\u4e3b\u52d5 POST \u901a\u77e5\u4f60\u7684 server<\/div>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(3, 'A', 'B')\">A. \u65b9\u6848 A \u66f4\u597d\uff0c\u56e0\u70ba WebSocket \u662f\u5373\u6642\u7684\uff0cWebhook \u6709\u5ef6\u9072<\/li>\n        <li onclick=\"checkAnswerAdv(3, 'B', 'B')\">B. \u65b9\u6848 B \u66f4\u597d\uff0c\u56e0\u70ba\u9019\u662f Server \u5c0d Server \u7684\u4e8b\u4ef6\u901a\u77e5\u5834\u666f\uff0c\u4e0d\u9700\u8981\u6301\u7e8c\u9023\u7dda\uff0cWebhook \u66f4\u9ad8\u6548<\/li>\n        <li onclick=\"checkAnswerAdv(3, 'C', 'B')\">C. \u5169\u8005\u6548\u679c\u4e00\u6a23\uff0c\u96a8\u4fbf\u9078\u90fd\u884c<\/li>\n        <li onclick=\"checkAnswerAdv(3, 'D', 'B')\">D. \u5169\u8005\u90fd\u4e0d\u9069\u5408\uff0c\u61c9\u8a72\u6bcf\u79d2\u7528 HTTP \u8f2a\u8a62 Stripe API \u6aa2\u67e5\u4ed8\u6b3e\u72c0\u614b<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv3\"><\/div>\n    <\/div>\n\n    <!-- \u932f\u8aa4\u8a3a\u65b7\u984c 1 -->\n    <div class=\"question-adv\" id=\"qAdv4\">\n      <h3>4. AI \u5e6b\u4f60\u5beb\u4e86\u4ee5\u4e0b WebSocket \u524d\u7aef\u7a0b\u5f0f\u78bc\uff0c\u6e96\u5099\u90e8\u7f72\u5230\u6b63\u5f0f\u74b0\u5883\u3002\u9019\u6bb5\u7a0b\u5f0f\u78bc\u6709\u4ec0\u9ebc\u554f\u984c\uff1f <span class=\"badge debug\">\u932f\u8aa4\u8a3a\u65b7<\/span><\/h3>\n      <div class=\"code-block\">const socket = new WebSocket(&#8216;ws:\/\/myapp.com\/chat&#8217;);\n\nsocket.onopen = () => {\n    socket.send(&#8216;\u9023\u7dda\u6210\u529f&#8217;);\n};\n\nsocket.onmessage = (event) => {\n    document.getElementById(&#8216;messages&#8217;).innerHTML += event.data;\n};<\/div>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(4, 'A', 'D')\">A. <code>onopen<\/code> \u88e1\u4e0d\u61c9\u8a72\u7acb\u523b\u767c\u9001\u8a0a\u606f\uff0c\u61c9\u8a72\u7b49\u5f85 server \u78ba\u8a8d<\/li>\n        <li onclick=\"checkAnswerAdv(4, 'B', 'D')\">B. <code>innerHTML +=<\/code> \u6709 XSS \u5b89\u5168\u98a8\u96aa\uff0c\u4f46\u8ddf WebSocket \u8a2d\u5b9a\u7121\u95dc<\/li>\n        <li onclick=\"checkAnswerAdv(4, 'C', 'D')\">C. \u7f3a\u5c11 <code>onerror<\/code> \u4e8b\u4ef6\u8655\u7406\uff0c\u4f46\u9023\u7dda\u672c\u8eab\u6c92\u554f\u984c<\/li>\n        <li onclick=\"checkAnswerAdv(4, 'D', 'D')\">D. \u6b63\u5f0f\u74b0\u5883\u4f7f\u7528\u4e86 <code>ws:\/\/<\/code> \u800c\u4e0d\u662f <code>wss:\/\/<\/code>\uff0c\u9023\u7dda\u672a\u52a0\u5bc6\uff0c\u4e14\u7f3a\u5c11 <code>onclose<\/code> \u65b7\u7dda\u91cd\u9023\u8655\u7406<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv4\"><\/div>\n    <\/div>\n\n    <!-- \u932f\u8aa4\u8a3a\u65b7\u984c 2 -->\n    <div class=\"question-adv\" id=\"qAdv5\">\n      <h3>5. AI \u5e6b\u4f60\u5beb\u4e86\u4ee5\u4e0b Webhook \u7aef\u9ede\u4f86\u63a5\u6536 Stripe \u4ed8\u6b3e\u901a\u77e5\uff0c\u4f46\u4e0a\u7dda\u5f8c\u767c\u73fe\u6709\u4eba\u507d\u9020\u4e86\u4ed8\u6b3e\u6210\u529f\u7684\u901a\u77e5\uff0c\u5c0e\u81f4\u672a\u4ed8\u6b3e\u7684\u8a02\u55ae\u88ab\u6a19\u8a18\u70ba\u5df2\u4ed8\u6b3e\u3002\u9019\u6bb5\u7a0b\u5f0f\u78bc\u7684\u554f\u984c\u51fa\u5728\u54ea\u88e1\uff1f <span class=\"badge debug\">\u932f\u8aa4\u8a3a\u65b7<\/span><\/h3>\n      <div class=\"code-block\">@app.post(&#8220;\/webhook\/stripe&#8221;)\nasync def stripe_webhook(request: Request):\n    payload = await request.json()\n    event_type = payload[&#8216;type&#8217;]\n\n    if event_type == &#8216;payment_intent.succeeded&#8217;:\n        order_id = payload[&#8216;data&#8217;][&#8216;object&#8217;][&#8216;metadata&#8217;][&#8216;order_id&#8217;]\n        await update_order_status(order_id, &#8216;paid&#8217;)\n\n    return {&#8220;status&#8221;: &#8220;ok&#8221;}<\/div>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(5, 'A', 'C')\">A. \u61c9\u8a72\u7528 GET \u800c\u4e0d\u662f POST \u4f86\u63a5\u6536 Webhook<\/li>\n        <li onclick=\"checkAnswerAdv(5, 'B', 'C')\">B. \u7f3a\u5c11 <code>try\/except<\/code> \u932f\u8aa4\u8655\u7406\uff0c\u5c0e\u81f4\u7570\u5e38\u6642\u8a02\u55ae\u72c0\u614b\u4e0d\u6b63\u78ba<\/li>\n        <li onclick=\"checkAnswerAdv(5, 'C', 'C')\">C. \u6c92\u6709\u9a57\u8b49\u8acb\u6c42\u4f86\u6e90\u7684\u7c3d\u540d\uff08signature\uff09\uff0c\u4efb\u4f55\u4eba\u90fd\u80fd\u507d\u9020 POST \u8acb\u6c42\u5230\u9019\u500b URL \u4f86\u5047\u5192 Stripe \u901a\u77e5<\/li>\n        <li onclick=\"checkAnswerAdv(5, 'D', 'C')\">D. Webhook URL \u61c9\u8a72\u4f7f\u7528\u96a8\u6a5f\u8def\u5f91\u800c\u4e0d\u662f\u56fa\u5b9a\u7684 <code>\/webhook\/stripe<\/code>\uff0c\u9019\u6a23\u5225\u4eba\u731c\u4e0d\u5230<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv5\"><\/div>\n    <\/div>\n\n    <div class=\"score-adv\" id=\"scoreAdv\" style=\"display:none;\"><\/div>\n<script>\n\n      let answeredAdv = 0;\n      let correctAdv = 0;\n      const totalAdv = 5;\n      const explanationsAdv = {\n        1: \"\u9280\u884c\u8f49\u5e33\u662f\u5178\u578b\u7684 CP \u7cfb\u7d71\u5834\u666f\u3002\u6587\u7ae0\u660e\u78ba\u6307\u51fa\uff0cCP \u7cfb\u7d71\u300c\u5be7\u53ef\u8b93\u4f60\u7b49\uff0c\u4e5f\u4e0d\u80fd\u5e33\u6236\u91d1\u984d\u4e0d\u4e00\u81f4\u300d\u3002\u9078\u9805 A \u662f AP \u7684\u505a\u6cd5\uff0c\u9069\u5408\u793e\u7fa4\u5a92\u9ad4\u6309\u8b9a\u6578\u9019\u985e\u5bb9\u5fcd\u66ab\u6642\u4e0d\u4e00\u81f4\u7684\u5834\u666f\uff0c\u4f46\u7d55\u4e0d\u9069\u7528\u65bc\u91d1\u878d\u4ea4\u6613 \u2014 \u5982\u679c\u5169\u500b\u8cc7\u6599\u4e2d\u5fc3\u5404\u81ea\u7368\u7acb\u8655\u7406\u8f49\u5e33\uff0c\u53ef\u80fd\u5c0e\u81f4\u540c\u4e00\u7b46\u9322\u88ab\u82b1\u5169\u6b21\u3002\u9078\u9805 C \u96d6\u7136\u80fd\u907f\u514d\u4e0d\u4e00\u81f4\uff0c\u4f46\u628a\u6240\u6709\u6d41\u91cf\u5c0e\u5230\u55ae\u4e00\u8cc7\u6599\u4e2d\u5fc3\u5c31\u5931\u53bb\u4e86\u5206\u6563\u5f0f\u7684\u610f\u7fa9\u3002\",\n        2: \"\u9019\u662f\u6587\u7ae0\u4e2d Blob Storage + CDN \u9ec3\u91d1\u7d44\u5408\u7684\u5178\u578b\u61c9\u7528\u3002\u6587\u7ae0\u6307\u51fa\uff1a\u8cc7\u6599\u5eab\u9069\u5408\u5b58\u7d50\u69cb\u5316\u8cc7\u6599\uff08\u7528\u6236\u540d\u7a31\u3001\u8a02\u55ae\u7de8\u865f\uff09\uff0c\u5927\u6a94\u6848\u786c\u585e\u9032\u8cc7\u6599\u5eab\u300c\u6703\u8b93\u5b83\u6162\u5230\u7206\u70b8\u300d\u3002\u6b63\u78ba\u505a\u6cd5\u662f\u5716\u7247\u5b58\u5230 S3\uff0c\u8cc7\u6599\u5eab\u53ea\u5b58 URL\uff0c\u518d\u900f\u904e CDN \u5206\u767c\u7d66\u5168\u7403\u7528\u6236\u3002\u9078\u9805 A \u53ea\u662f\u6cbb\u6a19\u4e0d\u6cbb\u672c\uff0c\u9078\u9805 B \u58d3\u7e2e\u5f8c\u9084\u662f\u5b58\u5728\u8cc7\u6599\u5eab\u88e1\uff0c\u554f\u984c\u4f9d\u7136\u5b58\u5728\u3002\u9078\u9805 D \u641e\u6df7\u4e86 CDN \u7684\u7528\u9014 \u2014 CDN \u662f\u5feb\u53d6\u548c\u5206\u767c\u975c\u614b\u8cc7\u6e90\u7684\uff0c\u4e0d\u662f\u7528\u4f86\u53d6\u4ee3\u8cc7\u6599\u5eab\u5b58\u653e\u7d50\u69cb\u5316\u8cc7\u6599\u7684\u3002\",\n        3: \"\u6587\u7ae0\u7684\u6bd4\u8f03\u8868\u6e05\u695a\u6307\u51fa\uff1aWebSocket \u9069\u5408 Client \u548c Server \u4e4b\u9593\u7684\u5373\u6642\u96d9\u5411\u4e92\u52d5\uff08\u804a\u5929\u3001\u904a\u6232\uff09\uff0cWebhook \u9069\u5408 Server \u5c0d Server \u7684\u4e8b\u4ef6\u901a\u77e5\uff08\u4ed8\u6b3e\u6210\u529f\u3001\u7a0b\u5f0f\u78bc\u63a8\u9001\uff09\u3002Stripe \u4ed8\u6b3e\u901a\u77e5\u6b63\u662f Webhook \u7684\u7d93\u5178\u5834\u666f \u2014 \u4e0d\u9700\u8981\u6301\u7e8c\u9023\u7dda\uff0c\u53ea\u9700\u8981\u5728\u4e8b\u4ef6\u767c\u751f\u6642\u901a\u77e5\u4e00\u6b21\u3002\u800c\u4e14 Stripe \u672c\u8eab\u5c31\u662f\u900f\u904e Webhook \u4f86\u901a\u77e5\u5408\u4f5c\u5546\u5bb6\u7684\uff0c\u4e0d\u63d0\u4f9b WebSocket \u9023\u7dda\u3002\u9078\u9805 D \u7684\u8f2a\u8a62\u505a\u6cd5\u6b63\u662f\u6587\u7ae0\u4e2d\u63d0\u5230\u7684\u300c\u6d6a\u8cbb\u8cc7\u6e90\u300d\u7684\u53cd\u9762\u6559\u6750\u3002\",\n        4: \"\u6587\u7ae0\u5728 WebSocket \u7684 Vibe Coder \u6aa2\u67e5\u9ede\u4e2d\u660e\u78ba\u6307\u51fa\u5169\u500b\u95dc\u9375\u554f\u984c\uff1a(1) <code>ws:\/\/<\/code> \u662f\u4e0d\u52a0\u5bc6\u7684\uff0c\u6b63\u5f0f\u74b0\u5883\u8981\u7528 <code>wss:\/\/<\/code>\uff0c\u5c31\u50cf <code>http<\/code> \u5c0d <code>https<\/code>\uff1b(2) \u9700\u8981\u8655\u7406\u65b7\u7dda\u91cd\u9023\uff0c\u56e0\u70ba\u7db2\u8def\u4e0d\u7a69\u6642 WebSocket \u6703\u65b7\u3002\u9019\u6bb5\u7a0b\u5f0f\u78bc\u5169\u500b\u554f\u984c\u90fd\u6709 \u2014 \u4f7f\u7528\u4e86\u672a\u52a0\u5bc6\u7684 <code>ws:\/\/<\/code> \u5354\u5b9a\uff0c\u4e14\u6c92\u6709 <code>onclose<\/code> \u8655\u7406\u65b7\u7dda\u91cd\u9023\u908f\u8f2f\u3002\u9078\u9805 B \u548c C \u5404\u81ea\u6307\u51fa\u4e86\u4e00\u500b\u771f\u5be6\u554f\u984c\uff0c\u4f46\u4e0d\u662f\u6700\u95dc\u9375\u7684 WebSocket \u8a2d\u5b9a\u554f\u984c\u3002\",\n        5: \"\u6587\u7ae0\u5728 Webhook \u5b89\u5168\u6ce8\u610f\u4e8b\u9805\u4e2d\u660e\u78ba\u6307\u51fa\uff1a\u300c\u4efb\u4f55\u4eba\u90fd\u53ef\u4ee5\u507d\u9020\u4e00\u500b POST \u8acb\u6c42\u6253\u5230\u4f60\u7684 webhook URL\uff0c\u6240\u4ee5\u5fc5\u9808\u9a57\u8b49\u4f86\u6e90\u300d\u3002\u6b63\u78ba\u505a\u6cd5\u662f\u7528 Stripe \u7d66\u4f60\u7684 secret \u642d\u914d HMAC \u7c3d\u540d\u9a57\u8b49\uff0c\u78ba\u8a8d\u8acb\u6c42\u771f\u7684\u4f86\u81ea Stripe\u3002\u9019\u6bb5\u7a0b\u5f0f\u78bc\u5b8c\u5168\u6c92\u6709\u9a57\u8b49\u7c3d\u540d\uff0c\u76f4\u63a5\u4fe1\u4efb\u6536\u5230\u7684 payload \u5c31\u66f4\u65b0\u8a02\u55ae\u72c0\u614b\uff0c\u6240\u4ee5\u653b\u64ca\u8005\u53ea\u8981\u77e5\u9053 URL \u548c payload \u683c\u5f0f\u5c31\u80fd\u507d\u9020\u901a\u77e5\u3002\u9078\u9805 D \u7684\u300c\u96a8\u6a5f\u8def\u5f91\u300d\u53ea\u662f security through obscurity\uff08\u9760\u96b1\u85cf\u4f86\u4fdd\u5b89\u5168\uff09\uff0c\u4e0d\u662f\u771f\u6b63\u7684\u9632\u8b77\u63aa\u65bd\u3002\"\n      };\n\n      function checkAnswerAdv(qNum, selected, correctAns) {\n        const question = document.getElementById(\"qAdv\" + qNum);\n        if (question.classList.contains(\"answered\")) return;\n\n        question.classList.add(\"answered\");\n        answeredAdv++;\n\n        const options = question.querySelectorAll(\".options-adv li\");\n        options.forEach((opt) => {\n          opt.classList.add(\"disabled\");\n          if (opt.textContent.startsWith(correctAns + \".\")) {\n            opt.classList.add(\"show-answer\");\n          }\n        });\n\n        const feedback = document.getElementById(\"fbAdv\" + qNum);\n        if (selected === correctAns) {\n          correctAdv++;\n          feedback.className = \"feedback-adv correct\";\n          feedback.innerHTML = \"&#10003; \u6b63\u78ba\uff01\" + explanationsAdv[qNum];\n        } else {\n          feedback.className = \"feedback-adv wrong\";\n          feedback.innerHTML =\n            \"&#10007; \u932f\u8aa4\u3002\u6b63\u78ba\u7b54\u6848\u662f \" + correctAns + \"\u3002\" + explanationsAdv[qNum];\n          options.forEach((opt) => {\n            if (opt.textContent.startsWith(selected + \".\")) {\n              opt.classList.add(\"wrong\");\n            }\n          });\n        }\n\n        if (answeredAdv === totalAdv) {\n          const scoreDiv = document.getElementById(\"scoreAdv\");\n          scoreDiv.style.display = \"block\";\n          let msg = \"\";\n          if (correctAdv === totalAdv) msg = \"&#127919; \u5b8c\u7f8e\uff01\u4f60\u5df2\u7d93\u6e96\u5099\u597d\u5be6\u6230\u4e86\uff01\";\n          else if (correctAdv >= Math.ceil(totalAdv * 0.8))\n            msg = \"&#128170; \u5f88\u68d2\uff01\u518d\u8907\u7fd2\u4e00\u4e0b\u932f\u7684\u984c\u76ee\";\n          else if (correctAdv >= Math.ceil(totalAdv * 0.6))\n            msg = \"&#128214; \u5efa\u8b70\u91cd\u8b80\u76f8\u95dc\u6bb5\u843d\u5f8c\u518d\u8a66\u4e00\u6b21\";\n          else msg = \"&#128260; \u5efa\u8b70\u91cd\u65b0\u95b1\u8b80\u6587\u4ef6\uff0c\u7279\u5225\u6ce8\u610f\u64cd\u4f5c\u6d41\u7a0b\";\n          scoreDiv.innerHTML =\n            \"\u6e2c\u9a57\u5b8c\u6210\uff01\u5f97\u5206\uff1a\" + correctAdv + \" \/ \" + totalAdv + \"<br>\" + msg;\n        }\n      }\n    \n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u6e2c\u9a57\uff1a\u5206\u6563\u5f0f\u7cfb\u7d71\u8207\u5167\u5bb9\u50b3\u905e \u2014 CAP \u5b9a\u7406\u3001CDN \u8207\u5373\u6642\u901a\u8a0a \u5171 5 \u984c\uff0c\u9ede\u9078\u7b54\u6848\u5f8c\u6703\u7acb\u5373\u986f\u793a\u7d50\u679c 1.  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rolpb_likes":0,"footnotes":""},"categories":[711],"tags":[733,729,730,732,731,701],"class_list":["post-766","post","type-post","status-publish","format-standard","hentry","category-711","tag-blob-storage","tag-cap","tag-cdn","tag-webhook","tag-websocket","tag-701"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/comments?post=766"}],"version-history":[{"count":0,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/766\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}