angular - 带有 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))
解决方案
推荐阅读
- react-native - '@react-navigation/stack' 已停止工作并出现错误 - 无法解析模块
- angular - 对 ngOnInit() 中的变量声明进行单元测试
- django - 如何在Django中加入非主键和外键列的查询
- symfony - 按角色对用户进行身份验证
- azure - 能否将 Azure Functions 部署到 Vnet?
- java - 请帮助我为什么在有负输入时使用俄罗斯农民算法时得到负值
- java - Maven 构建未使用模型的更新版本(pom.xml)
- javascript - model.fit 和 tensorflow.js 的详细说明
- elasticsearch - Elasticsearch 在启动时失败
- angular - Angular:文件提交的反应性表单错误