import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/functional-basic/Classes/BroadcastMessage - Tin nhắn BroadcastChannel'/>

# Lớp BroadcastMessage

Lớp để xử lý tin nhắn giữa các ngữ cảnh trình duyệt khác nhau (tab, cửa sổ, iframe) bằng cách sử dụng API `BroadcastChannel`. Nó cung cấp một giao diện thuận tiện để gửi và nhận dữ liệu với việc quản lý vòng đời kênh tự động và xử lý lỗi.

Bao gồm tính năng đặt tên tiền tố tự động để ngăn chặn xung đột và tích hợp với `ErrorCenter` để theo dõi các lỗi khởi tạo.

## Các tính năng chính

- **Giao tiếp đa ngữ cảnh** — đồng bộ hóa dữ liệu đơn giản giữa tất cả các cửa sổ của cùng một nguồn (origin).
- **Dựa trên Callback** — tự động xử lý các tin nhắn đến và lỗi thông qua các hàm callback đã đăng ký.
- **An toàn khi thực thi** — kiểm tra môi trường DOM tích hợp giúp ngăn chặn lỗi trong quá trình Server-Side Rendering (SSR).
- **Cô lập kênh** — tự động thêm tiền tố duy nhất cho tên kênh thông qua `DataStorage`.
- **Kiểu dữ liệu mạnh mẽ** — hỗ trợ đầy đủ TypeScript generics để đảm bảo tính toàn vẹn của dữ liệu tin nhắn.

## Khởi tạo

Để khởi tạo đối tượng, hãy gọi hàm khởi tạo `BroadcastMessage(name, callback, callbackError, errorCenter)`.

### Ràng buộc Generic (Generic Constraints)

- `Message = any` — kiểu của tải trọng tin nhắn.

**Tham số:**
- `name: string` — tên kênh duy nhất.
- `callback?: (event: MessageEvent<Message>) => void` — hàm callback được thực thi khi nhận được tin nhắn.
- `callbackError?: (event: MessageEvent<Message>) => void` — hàm callback được thực thi khi xảy ra lỗi tin nhắn.
- `errorCenter: ErrorCenterInstance` — thực thể trung tâm lỗi (mặc định: `ErrorCenter.getItem()`).

```typescript
import { BroadcastMessage } from '@dxtmisha/functional-basic'

const messenger = new BroadcastMessage<string>(
  'my-channel',
  (event) => console.log('Nhận được:', event.data)
)
```

## Các phương thức

### Hành động

- `post(message: Message): this` — Gửi tin nhắn đến tất cả những người đang lắng nghe trong kênh đã cho.
- `destroy(): this` — Đóng kênh và ngừng lắng nghe tin nhắn.

### Cấu hình và Truy cập

- `getChannel(): BroadcastChannel | undefined` — Trả về thực thể `BroadcastChannel` cơ bản.
- `setCallback(callback: Function): this` — Cập nhật hàm xử lý tin nhắn đến.
- `setCallbackError(callbackError: Function): this` — Cập nhật hàm xử lý lỗi tin nhắn.

## Ví dụ

### Đồng bộ hóa trạng thái giữa các Tab

```typescript
import { BroadcastMessage } from '@dxtmisha/functional'

// Trong tất cả các tab của ứng dụng
const authChannel = new BroadcastMessage<string>('auth-status', (event) => {
  if (event.data === 'LOGOUT') {
    authModule.clearSession()
    window.location.reload()
  }
})

// Khi người dùng đăng xuất ở một trong các tab
function onLogout() {
  authChannel.post('LOGOUT')
}
```

### Cập nhật trình xử lý dữ liệu tức thì

```typescript
const messenger = new BroadcastMessage('data-sync')

messenger.setCallback((event) => {
  console.log('Dữ liệu mới nhận được:', event.data)
})

messenger.post({ id: 1, status: 'active' })
```
