WebSockets ਨਾਲ Real-Time Angular Dashboards ਬਣਾਉਣਾ

ਜ਼ਿਆਦਾਤਰ ਡੈਸ਼ਬੋਰਡ ਸਥਿਰ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ। ਯੂਜ਼ਰ ਇੱਕ ਪੇਜ 'ਤੇ ਆਉਂਦੇ ਹਨ ਅਤੇ ਉਡੀਕ ਕਰਦੇ ਹਨ। ਉਹ ਰਿਫ੍ਰੈਸ਼ ਕਰਦੇ ਹਨ ਜਾਂ ਲਗਾਤਾਰ polling ਦਾ ਸਾਹਮਣਾ ਕਰਦੇ ਹਨ ਜੋ ਤੁਹਾਡੇ ਸਰਵਰ ਨੂੰ ਹੌਲੀ ਕਰ ਦਿੰਦਾ ਹੈ।

WebSockets ਇਸ ਨੂੰ ਬਦਲ ਦਿੰਦੇ ਹਨ। ਕਲਾਇੰਟ ਦੁਆਰਾ ਡੇਟਾ ਮੰਗਣ ਦੀ ਬਜਾਏ, ਸਰਵਰ ਇਸਨੂੰ ਪੁਸ਼ (push) ਕਰਦਾ ਹੈ। ਇਹ ਲਾਈਵ ਮੈਟ੍ਰਿਕਸ, ਯੂਜ਼ਰ ਐਕਟੀਵਿਟੀ, ਜਾਂ ਵਿੱਤੀ ਡੇਟਾ ਲਈ ਆਦਰਸ਼ ਹੈ।

ਇੱਥੇ Angular, RxJS, ਅਤੇ Signals ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ production-ready real-time dashboard ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਦਿੱਤਾ ਗਿਆ ਹੈ।

The Architecture

  • ਕਨੈਕਸ਼ਨ ਨੂੰ ਮੈਨੇਜ ਕਰਨ ਲਈ RxJS webSocket ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • ਇੱਕ ਕਨੈਕਸ਼ਨ ਨੂੰ ਕਈ ਕੰਪੋਨੈਂਟਸ ਦੁਆਰਾ ਵਰਤਣ ਦੇਣ ਲਈ shareReplay ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • Single source of truth ਲਈ Angular Signals ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਸਰਲ ਰੱਖਣ ਲਈ ਇੱਕ Store pattern ਦੀ ਵਰਤੋਂ ਕਰੋ।

  1. The Service Layer ਹਰ ਕੰਪੋਨੈਂਟ ਲਈ ਨਵਾਂ ਕਨੈਕਸ਼ਨ ਨਾ ਖੋਲ੍ਹੋ। rxjs/webSocket ਤੋਂ webSocket subject ਦੀ ਵਰਤੋਂ ਕਰੋ। shareReplay ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਡੀ ਪੂਰੀ ਐਪ ਇੱਕ ਹੀ stream ਨੂੰ ਸਾਂਝਾ ਕਰੇ। ਇਹ ਤੁਹਾਡੇ ਸਰਵਰ ਨੂੰ ਸੈਂਕੜੇ ਬੇਲੋੜੇ ਕਨੈਕਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

  2. The Signal Store ਆਪਣੇ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ business logic ਰੱਖਣ ਤੋਂ ਬਚੋ। ਇੱਕ Store ਬਣਾਓ ਜੋ ਤੁਹਾਡੀ service ਨੂੰ subscribe ਕਰਦਾ ਹੋਵੇ। ਇਹ store ਤੁਹਾਡੇ ਮੈਟ੍ਰਿਕਸ ਅਤੇ ਅਲਰਟਸ ਨੂੰ Signals ਵਿੱਚ ਰੱਖਦਾ ਹੈ। ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟਸ ਫਿਰ ਸਿਰਫ਼ ਇਹਨਾਂ signals ਨੂੰ ਪੜ੍ਹਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ UI ਨੂੰ ਤੇਜ਼ ਅਤੇ ਟੈਸਟ ਕਰਨ ਵਿੱਚ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।

  3. Clean Components ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਹੀ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: ਡੇਟਾ ਰੈਂਡਰ ਕਰਨਾ। ਜੇਕਰ ਤੁਸੀਂ Signal-based store ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡਾ ਕੰ