{"id":38780,"date":"2023-05-08T01:12:26","date_gmt":"2023-02-15T18:19:50","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bd%93%e5%9c%a8angular2-angular4-angular5-angular6%e4%b8%ad%e9%81%87%e5%88%b0%e5%bc%82%e6%ad%a5%e5%a4%84%e7%90%86%e5%af%bc%e8%87%b4%e9%a1%b5%e9%9d%a2%e6%9b%b4%e6%96%b0%e4%b8%8d%e6%ad%a3%e7%a1%ae\/"},"modified":"2024-04-30T03:07:21","modified_gmt":"2024-04-29T19:07:21","slug":"%e5%bd%93%e5%9c%a8angular2-angular4-angular5-angular6%e4%b8%ad%e9%81%87%e5%88%b0%e5%bc%82%e6%ad%a5%e5%a4%84%e7%90%86%e5%af%bc%e8%87%b4%e9%a1%b5%e9%9d%a2%e6%9b%b4%e6%96%b0%e4%b8%8d%e6%ad%a3%e7%a1%ae","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bd%93%e5%9c%a8angular2-angular4-angular5-angular6%e4%b8%ad%e9%81%87%e5%88%b0%e5%bc%82%e6%ad%a5%e5%a4%84%e7%90%86%e5%af%bc%e8%87%b4%e9%a1%b5%e9%9d%a2%e6%9b%b4%e6%96%b0%e4%b8%8d%e6%ad%a3%e7%a1%ae\/","title":{"rendered":"\u5f53\u5728Angular2, Angular4, Angular5, Angular6\u4e2d\u9047\u5230\u5f02\u6b65\u5904\u7406\u5bfc\u81f4\u9875\u9762\u66f4\u65b0\u4e0d\u6b63\u786e\u7684\u60c5\u51b5\u65f6\uff0c\u53ef\u4ee5\u91c7\u53d6\u4ee5\u4e0b\u5bf9\u7b56\u63aa\u65bd"},"content":{"rendered":"

\u6211\u5728Angular\u4e2d\u4f7f\u7528Pusher\uff0c\u5728\u5f02\u6b65\u5904\u7406\u4e2d\u9047\u5230\u4e86\u5c4f\u5e55\u672a\u6b63\u786e\u66f4\u65b0\u7684\u95ee\u9898\uff0c\u6240\u4ee5\u5728\u6b64\u8bb0\u5f55\u89e3\u51b3\u65b9\u6cd5\u3002<\/p>\n

\u5f53\u6211\u4eec\u60f3\u8981\u5728JS\u3001\u624b\u673a\u7b49\u8bbe\u5907\u4e0a\u5b9e\u73b0\u4e0e\u670d\u52a1\u5668\u7684\u5b9e\u65f6\u901a\u4fe1\uff08\u5373\u63a8\u9001\uff09\u65f6\uff0cPusher\u662f\u4e00\u4e2a\u5f88\u65b9\u4fbf\u6613\u7528\u7684\u670d\u52a1\u3002<\/p>\n

\u8fd9\u6b21\u6211\u4eec\u4f7f\u7528\u4e86 pusher-js\u3002<\/p>\n

\u603b\u7684\u6765\u8bf4\uff0c\u6211\u8ba4\u4e3a\u4f7f\u7528NgZone\u6700\u5bb9\u6613\u3002<\/p>\n

\u8fd9\u7bc7\u6587\u7ae0\u7684\u7ec4\u7ec7<\/h1>\n
    \n
  1. \n
      \u5f02\u6b65\u5904\u7406\u7b49\u5bfc\u81f4\u754c\u9762\u66f4\u65b0\u4e0d\u6267\u884c\u7684\u60c5\u51b5\u53ca\u5176\u4ee3\u7801<\/ol>\n<\/li>\n<\/ol>\n

       <\/p>\n

        \n
      1. \n
          \u53d1\u751f\u539f\u56e0<\/ol>\n<\/li>\n<\/ol>\n

           <\/p>\n

            \n
          1. \n
              \u89e3\u51b3\u65b9\u6cd51\uff08NgZone\uff09<\/ol>\n<\/li>\n<\/ol>\n

               <\/p>\n

                \n
              1. \n
                  \u89e3\u51b3\u65b9\u6cd52\uff08DetectChangeRef\uff09<\/ol>\n<\/li>\n<\/ol>\n

                   <\/p>\n

                    \u603b\u7ed3<\/ol>\n

                    1. \u5bfc\u81f4\u5c4f\u5e55\u4e0d\u66f4\u65b0\u7684\u4e8b\u4ef6\u7684\u53d1\u751f\u65b9\u5f0f\u548c\u5bf9\u5e94\u4ee3\u7801\uff0c\u4f8b\u5982\u5f02\u6b65\u5904\u7406\u3002<\/h2>\n

                    \u6211\u62c5\u5fc3\u8fd9\u6b21Angular\u53ef\u80fd\u65e0\u6cd5\u6b63\u5e38\u5de5\u4f5c\uff0c\u56e0\u4e3a\u6211\u4eec\u4f7f\u7528\u4e86\u5916\u90e8\u5e93\uff08\u524d\u4e00\u6b21\u5728Vue\u4e2d\u5b9e\u73b0\u65f6\u6ca1\u6709\u95ee\u9898\uff09\u3002
                    \n\u8fd9\u6b21\u6211\u4eec\u4f7f\u7528\u4e86Pusher\u5e93\uff0c\u4ee5\u4e0b\u662f\u4ee3\u7801\u793a\u4f8b\u3002<\/p>\n

                    const<\/span> Pusher<\/span> =<\/span> require<\/span>(<\/span>'<\/span>pusher-js<\/span>'<\/span>);<\/span>\r\n\r\n\/\/ TODO: \u74b0\u5883\u3054\u3068\u306b\u5024\u304c\u5909\u308f\u308b\u3088\u3046\u306b\u3059\u308b<\/span>\r\nexport<\/span> default<\/span> new<\/span> Pusher<\/span>(<\/span>'<\/span>xxxxxxxx<\/span>'<\/span>,<\/span> {<\/span>\r\n  cluster<\/span>:<\/span> '<\/span>ap1<\/span>'<\/span>,<\/span>\r\n  encryped<\/span>:<\/span> true<\/span>,<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                    import<\/span> {<\/span> default<\/span> as<\/span> testPusher<\/span> }<\/span> from<\/span> '<\/span>models\/pusher.ts<\/span>'<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-real-time<\/span>'<\/span>,<\/span>\r\n  template<\/span>:<\/span> `\r\n    <div *ngIf=\"error\"> {{ error }} <\/div>\r\n    <div>Pusher\u30c6\u30b9\u30c8<\/div>\r\n  `<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> RealTimeComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  error<\/span>:<\/span> string<\/span>;<\/span>\r\n  ngOnInit<\/span>():<\/span> void<\/span> {<\/span>\r\n    this<\/span>.<\/span>error<\/span> =<\/span> null<\/span>;<\/span>\r\n    const<\/span> channel<\/span> =<\/span> testPusher<\/span>.<\/span>subscribe<\/span>(<\/span>'<\/span>xxxxxxxx<\/span>'<\/span>);<\/span>\r\n    channel<\/span>.<\/span>bind<\/span>(<\/span>'<\/span>error<\/span>'<\/span>,<\/span> (<\/span>data<\/span>)<\/span> =><\/span> {<\/span>\r\n      this<\/span>.<\/span>error<\/span> =<\/span> '<\/span>\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f<\/span>'<\/span>;<\/span>\r\n    })<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                    \u770b\u8d77\u6765\u4f3c\u4e4e\u6ca1\u6709\u95ee\u9898\uff0c\u4f46\u662f\u8fd9\u6837\u4e00\u6765\uff0c\u9519\u8bef\u7684\u9009\u9879\u5c06\u65e0\u6cd5\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\u3002<\/p>\n
                    \u9020\u6210\u7684\u539f\u56e0<\/h2>\n
                    Angular\u4e2d\u6709\u4e00\u4e2a\u540d\u4e3aZone\u7684\u6982\u5ff5\u3002
                    \n\u53c2\u8003\u94fe\u63a5\uff1a
                    \nhttps:\/\/angular.io\/guide\/glossary#zone
                    \n