Я пытаюсь реализовать функциональность чата, используя Angular для внешнего интерфейса и функции Cloud с Cloud Firestore для внутреннего интерфейса. Frontend и Firestore общаются только через облачные функции. Вопрос, кстати, это хороший подход?
Моя правильная проблема заключается в том, чтобы сделать возможным обновление моего веб-интерфейса в режиме реального времени, если один из чатов, в котором находится мой пользователь, получит новое сообщение.
Количество чатов ограничено для двух пользователей, но пользователь может иметь много чатов с другими пользователями.
Мой код:
Облачные функции:
chatroomsEndpoint.js:
const chatroomsCollection = db.collection("chatrooms");
exports.getAllChatroomsByUserId = async function (req, res) {
try {
let chatrooms = [];
// console.log(req.params.user_id);
const resultA = await chatroomsCollection.where("userA", "==", req.params.user_id).get();
resultA.docs.map(chatroom => {
return chatrooms.push(chatroom.data());
})
const resultB = await chatroomsCollection.where("userB", "==", req.params.user_id).get();
resultB.docs.map(chatroom => {
return chatrooms.push(chatroom.data());
})
return res.status(200).send(chatrooms);
}
catch (error) {
console.log('Error getting chatrooms', error);
return res.send(false);
}
};
Я попробовал это с Почтальоном, и я получаю все чаты, в которых участвует текущий пользователь.
Интерфейс (с угловым)
chat.service.ts:
constructor(
private authService: AuthService,
private http: HttpClient,
private router: Router
) {
this.headers.append('Content-Type', 'application/json');
}
getAllChatroomsByUserId() {
return this.http.get(`${this.apiUrl2}/${this.authService.getUser().uid}`);
}
Chatroom-list.component.ts:
userChats$;
constructor(
public authService: AuthService,
public chatService: ChatService,
public router: Router,
public userStoreService: UserStoreService
) { }
ngOnInit() {
this.userChats$ = this.chatService.getAllChatroomsByUserId();
}
Chatroom-list.component.html:
<ul>
<li *ngFor="let chatroom of userChats$ | async">
<a [routerLink]="'/' + chatroom.id">{{ chatroom.id }} - {{ chatroom.messages.length }} Messages </a>
</li>
</ul>
После этого я запускаю свое веб-приложение по количеству сообщений в чате, но если я добавляю еще одно сообщение в документ в Firestore, значение сообщений не обновляется.
Я пытался придерживаться примера в видео https://www.youtube.com/watch?v=LKAXg2drQJQ&t=440s от Fireship, но в видео он делает это посредством прямой связи между Angular и Firestore.
Я также восстановил это и мог заставить это работать.
Также в этом примере используется snapshotChanges () - так я могу реализовать обновления в реальном времени?
Я уже искал все возможное, но не смог что-то найти.
Если понадобится что-то еще, я обновлю его.