[https://github.com/lynnkwong/websocket-fastapi-angular][ 1]
Пока работает нормально, но я хочу добиться того, чтобы несколько клиентов получали изменения, внесенные на серверной стороне.
В В данном случае, если вы откроете клиент из другого браузера, будет создан новый веб-сокет, поэтому оба интерфейса не будут обнаруживать изменения, сделанные другим клиентом Angular, а только его собственными.
Вопрос в том, есть ли способ создать такой веб-сокет, чтобы каждый клиент, подключенный к внешнему интерфейсу, мог обнаруживать изменения, внесенные другими клиентами?
Я публикую код из руководства здесь:
main.py в Python
import asyncio
import logging
from datetime import datetime
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("FastAPI app")
app = FastAPI()
async def heavy_data_processing(data: dict):
"""Some (fake) heavy data processing logic."""
await asyncio.sleep(2)
message_processed = data.get("message", "").upper()
return message_processed
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
# Accept the connection from a client.
await websocket.accept()
while True:
try:
# Receive the JSON data sent by a client.
data = await websocket.receive_json()
# Some (fake) heavey data processing logic.
message_processed = await heavy_data_processing(data)
# Send JSON data to the client.
await websocket.send_json(
{
"message": message_processed,
"time": datetime.now().strftime("%H:%M:%S"),
}
)
except WebSocketDisconnect:
logger.info("The connection is closed.")
break
Angular code :
App component.html :
Send a message to the server:
Send
Received messages from the server:
- {{ data.time }}: {{ data.message }}
import { Component, OnDestroy } from '@angular/core';
import { WebSocketService } from './websocket.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnDestroy {
message = '';
constructor(public webSocketService: WebSocketService) {
this.webSocketService.connect();
}
sendMessage(message: string) {
this.webSocketService.sendMessage(message);
}
ngOnDestroy() {
this.webSocketService.close();
}
}
websocket-service.ts :
import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { environment } from '../environments/environment';
interface MessageData {
message: string;
time?: string;
}
@Injectable({
providedIn: 'root',
})
export class WebSocketService {
private socket$!: WebSocketSubject;
public receivedData: MessageData[] = [];
public connect(): void {
if (!this.socket$ || this.socket$.closed) {
this.socket$ = webSocket(environment.webSocketUrl);
this.socket$.subscribe((data: MessageData) => {
this.receivedData.push(data);
});
}
}
sendMessage(message: string) {
this.socket$.next({ message });
}
close() {
this.socket$.complete();
}
}
[1]: https://github.com/lynnkwong/websocket-fastapi-angular
Подробнее здесь: https://stackoverflow.com/questions/786 ... d-detect-b
