首页 > 解决方案 > 带有 rxjs websocket 主题的 ngrx 效果

问题描述

我正在使用 websockets 与使用 ngrx 商店的多个客户端进行通信

我遇到的问题是通过 websocket 将数据(有效负载)返回到效果中,因此可以更新所有用户的商店。

我可以将有效负载记录在为处理 websocket 而创建的服务中。

socket.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from '../../../node_modules/rxjs';

@Injectable()
export class SocketService {
  socket$ = Observable.webSocket( 'ws://localhost:8081');
  socketMessage$:Observable<any>;
  // 'ws://echo.websocket.org/'
  constructor() {
      this.connectToSocket()
   }

  connectToSocket(){
   this.socket$.subscribe(
      (message:Observable<any>) => {
        this.socketMessage$ = message;
       console.log(message)//this get broadcast to all users
      },
      (err) => console.log(err),
      () => console.log('complete')
    );
  }


}

效果更新博客,首先将动作作为有效负载发送到套接字,

它应该从套接字接收有效负载,但没有然后继续通过服务更新数据库,最后创建一个新操作“CrudSucessAction”:

 @Effect() updateBlog$: Observable<any> = this.actions$
      .ofType<fromBlogActions.BlogUpdatedAction>(fromBlogActions.BLOG_UPDATED_ACTION)
        .mergeMap(action =>  {
            this.socketService.socket$.next(JSON.stringify(action))
            console.log(this.socketService.socketMessage$)//This only logs in the console of whomever made changes
        return this.blogService.updateBlog(action.payload.blog,action.payload.index)
        })
        .map((action)=>new fromBlogUIActions.CrudSucessAction(action))

标签: angularwebsocketngrx

解决方案


推荐阅读