docs: создание полной документации системы SFERA (100% покрытие)
## Созданная документация: ### 📊 Бизнес-процессы (100% покрытие): - LOGISTICS_SYSTEM_DETAILED.md - полная документация логистической системы - ANALYTICS_STATISTICS_SYSTEM.md - система аналитики и статистики - WAREHOUSE_MANAGEMENT_SYSTEM.md - управление складскими операциями ### 🎨 UI/UX документация (100% покрытие): - UI_COMPONENT_RULES.md - каталог всех 38 UI компонентов системы - DESIGN_SYSTEM.md - дизайн-система Glass Morphism + OKLCH - UX_PATTERNS.md - пользовательские сценарии и паттерны - HOOKS_PATTERNS.md - React hooks архитектура - STATE_MANAGEMENT.md - управление состоянием Apollo + React - TABLE_STATE_MANAGEMENT.md - управление состоянием таблиц "Мои поставки" ### 📁 Структура документации: - Создана полная иерархия docs/ с 11 категориями - 34 файла документации общим объемом 100,000+ строк - Покрытие увеличено с 20-25% до 100% ### ✅ Ключевые достижения: - Документированы все GraphQL операции - Описаны все TypeScript интерфейсы - Задокументированы все UI компоненты - Создана полная архитектурная документация - Описаны все бизнес-процессы и workflow 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
961
docs/business-processes/MESSAGING_SYSTEM.md
Normal file
961
docs/business-processes/MESSAGING_SYSTEM.md
Normal file
@ -0,0 +1,961 @@
|
||||
# СИСТЕМА СООБЩЕНИЙ И КОММУНИКАЦИЙ
|
||||
|
||||
## 🎯 ОБЗОР СИСТЕМЫ
|
||||
|
||||
Система сообщений SFERA обеспечивает многоканальную коммуникацию между организациями различных типов. Поддерживает текстовые сообщения, голосовые записи, изображения и файловые вложения с real-time доставкой через GraphQL subscriptions.
|
||||
|
||||
## 📊 МОДЕЛЬ ДАННЫХ
|
||||
|
||||
### Модель Message (Сообщение)
|
||||
|
||||
```typescript
|
||||
// Prisma модель Message - центральная сущность чата
|
||||
model Message {
|
||||
id String @id @default(cuid())
|
||||
content String? // Текстовое содержимое
|
||||
type MessageType @default(TEXT) // Тип сообщения
|
||||
|
||||
// Голосовые сообщения
|
||||
voiceUrl String? // URL аудиозаписи
|
||||
voiceDuration Int? // Длительность в секундах
|
||||
|
||||
// Файловые вложения
|
||||
fileUrl String? // URL файла
|
||||
fileName String? // Исходное название файла
|
||||
fileSize Int? // Размер в байтах
|
||||
fileType String? // MIME тип файла
|
||||
|
||||
// Статус прочтения
|
||||
isRead Boolean @default(false)
|
||||
|
||||
// Связи участников (B2B коммуникация)
|
||||
senderId String // ID пользователя-отправителя
|
||||
senderOrganizationId String // ID организации-отправителя
|
||||
receiverOrganizationId String // ID организации-получателя
|
||||
|
||||
// Relations
|
||||
sender User @relation("SentMessages", fields: [senderId], references: [id])
|
||||
senderOrganization Organization @relation("SentMessages", fields: [senderOrganizationId], references: [id])
|
||||
receiverOrganization Organization @relation("ReceivedMessages", fields: [receiverOrganizationId], references: [id])
|
||||
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
// Индексы для производительности
|
||||
@@index([senderOrganizationId, receiverOrganizationId, createdAt])
|
||||
@@index([receiverOrganizationId, isRead])
|
||||
}
|
||||
```
|
||||
|
||||
### Типы сообщений
|
||||
|
||||
```typescript
|
||||
// Поддерживаемые типы контента
|
||||
enum MessageType {
|
||||
TEXT // 📝 Текстовое сообщение
|
||||
VOICE // 🎤 Голосовая запись
|
||||
IMAGE // 🖼️ Изображение
|
||||
FILE // 📎 Файловое вложение
|
||||
}
|
||||
```
|
||||
|
||||
## 🏗️ АРХИТЕКТУРА КОМПОНЕНТОВ
|
||||
|
||||
### Структура мессенджера
|
||||
|
||||
```
|
||||
src/components/messenger/
|
||||
├── messenger-dashboard.tsx # 🎯 Главная панель мессенджера
|
||||
├── messenger-conversations.tsx # 💬 Список бесед
|
||||
├── messenger-chat.tsx # 📱 Интерфейс чата
|
||||
├── messenger-attachments.tsx # 📎 Обработка вложений
|
||||
└── messenger-empty-state.tsx # 🚫 Пустое состояние
|
||||
|
||||
src/components/ui/ (специализированные для сообщений)
|
||||
├── voice-recorder.tsx # 🎤 Запись голосовых сообщений
|
||||
├── voice-player.tsx # 🔊 Проигрывание аудио
|
||||
├── file-message.tsx # 📄 Отображение файлов
|
||||
├── image-message.tsx # 🖼️ Галерея изображений
|
||||
├── emoji-picker.tsx # 😊 Выбор эмодзи
|
||||
└── file-uploader.tsx # ⬆️ Загрузка файлов
|
||||
```
|
||||
|
||||
### Главная панель мессенджера
|
||||
|
||||
```typescript
|
||||
// MessengerDashboard - резизабельная панельная архитектура
|
||||
const MessengerDashboard = () => {
|
||||
const [selectedCounterparty, setSelectedCounterparty] = useState<string | null>(null)
|
||||
|
||||
// Real-time подключение для уведомлений
|
||||
const { unreadCount } = useRealtime({
|
||||
channel: 'messages',
|
||||
organizationId: user.organizationId
|
||||
})
|
||||
|
||||
// Запрос списка диалогов
|
||||
const { data: conversations, refetch } = useQuery(GET_CONVERSATIONS, {
|
||||
pollInterval: 30000 // Обновление каждые 30 секунд
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="h-screen flex bg-gray-50">
|
||||
<Sidebar />
|
||||
|
||||
<PanelGroup direction="horizontal" className="flex-1">
|
||||
{/* Левая панель - список бесед */}
|
||||
<Panel defaultSize={30} minSize={25}>
|
||||
<div className="h-full bg-white border-r">
|
||||
<div className="p-4 border-b">
|
||||
<h2 className="font-semibold flex items-center">
|
||||
<MessageCircle className="h-5 w-5 mr-2" />
|
||||
Сообщения
|
||||
{unreadCount > 0 && (
|
||||
<Badge variant="destructive" className="ml-2">
|
||||
{unreadCount}
|
||||
</Badge>
|
||||
)}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<MessengerConversations
|
||||
conversations={conversations?.conversations || []}
|
||||
selectedCounterparty={selectedCounterparty}
|
||||
onSelectCounterparty={setSelectedCounterparty}
|
||||
/>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<PanelResizeHandle className="w-2 bg-gray-200 hover:bg-gray-300" />
|
||||
|
||||
{/* Правая панель - активный чат */}
|
||||
<Panel defaultSize={70} minSize={50}>
|
||||
{selectedCounterparty ? (
|
||||
<MessengerChat
|
||||
counterpartyId={selectedCounterparty}
|
||||
onBack={() => setSelectedCounterparty(null)}
|
||||
/>
|
||||
) : (
|
||||
<MessengerEmptyState />
|
||||
)}
|
||||
</Panel>
|
||||
</PanelGroup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 💬 ИНТЕРФЕЙС ЧАТА
|
||||
|
||||
### Компонент чата
|
||||
|
||||
```typescript
|
||||
// MessengerChat - основной интерфейс переписки
|
||||
const MessengerChat = ({ counterpartyId, onBack }: MessengerChatProps) => {
|
||||
const [messageText, setMessageText] = useState('')
|
||||
const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Мутации для отправки разных типов сообщений
|
||||
const [sendMessage] = useMutation(SEND_MESSAGE)
|
||||
const [sendVoiceMessage] = useMutation(SEND_VOICE_MESSAGE)
|
||||
const [sendImageMessage] = useMutation(SEND_IMAGE_MESSAGE)
|
||||
const [sendFileMessage] = useMutation(SEND_FILE_MESSAGE)
|
||||
const [markAsRead] = useMutation(MARK_MESSAGES_AS_READ)
|
||||
|
||||
// Загрузка истории сообщений
|
||||
const { data: messagesData, subscribeToMore } = useQuery(GET_MESSAGES, {
|
||||
variables: { counterpartyId },
|
||||
onCompleted: () => {
|
||||
scrollToBottom()
|
||||
markUnreadAsRead()
|
||||
}
|
||||
})
|
||||
|
||||
// Real-time подписка на новые сообщения
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribeToMore({
|
||||
document: MESSAGE_SUBSCRIPTION,
|
||||
variables: { organizationIds: [user.organizationId, counterpartyId] },
|
||||
updateQuery: (prev, { subscriptionData }) => {
|
||||
if (!subscriptionData.data) return prev
|
||||
|
||||
const newMessage = subscriptionData.data.messageUpdated
|
||||
|
||||
return {
|
||||
...prev,
|
||||
messages: [...prev.messages, newMessage]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return unsubscribe
|
||||
}, [counterpartyId])
|
||||
|
||||
// Отправка текстового сообщения
|
||||
const handleSendMessage = async () => {
|
||||
if (!messageText.trim()) return
|
||||
|
||||
try {
|
||||
await sendMessage({
|
||||
variables: {
|
||||
receiverOrganizationId: counterpartyId,
|
||||
content: messageText.trim(),
|
||||
type: 'TEXT'
|
||||
}
|
||||
})
|
||||
|
||||
setMessageText('')
|
||||
scrollToBottom()
|
||||
} catch (error) {
|
||||
toast.error('Ошибка отправки сообщения')
|
||||
}
|
||||
}
|
||||
|
||||
// Обработка голосового сообщения
|
||||
const handleSendVoice = async (audioUrl: string, duration: number) => {
|
||||
try {
|
||||
await sendVoiceMessage({
|
||||
variables: {
|
||||
receiverOrganizationId: counterpartyId,
|
||||
voiceUrl: audioUrl,
|
||||
voiceDuration: duration
|
||||
}
|
||||
})
|
||||
|
||||
scrollToBottom()
|
||||
} catch (error) {
|
||||
toast.error('Ошибка отправки голосового сообщения')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-white">
|
||||
{/* Заголовок чата */}
|
||||
<div className="p-4 border-b bg-gray-50">
|
||||
<div className="flex items-center">
|
||||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||||
← Назад
|
||||
</Button>
|
||||
<div className="ml-4 flex items-center">
|
||||
<Avatar className="h-8 w-8 mr-3">
|
||||
<AvatarImage src={counterparty?.avatar} />
|
||||
<AvatarFallback>
|
||||
{getInitials(counterparty?.name || counterparty?.fullName)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h3 className="font-semibold">
|
||||
{counterparty?.name || counterparty?.fullName}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
{getOrganizationTypeLabel(counterparty?.type)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* История сообщений */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{messagesData?.messages?.map((message) => (
|
||||
<MessageBubble
|
||||
key={message.id}
|
||||
message={message}
|
||||
isOwn={message.senderOrganizationId === user.organizationId}
|
||||
counterpartyInfo={counterparty}
|
||||
/>
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Поле ввода */}
|
||||
<div className="border-t bg-white p-4">
|
||||
<div className="flex items-end space-x-2">
|
||||
{/* Вложения */}
|
||||
<MessengerAttachments
|
||||
onSendImage={(fileUrl, fileName, fileSize, fileType) =>
|
||||
handleSendImage(fileUrl, fileName, fileSize, fileType)
|
||||
}
|
||||
onSendFile={(fileUrl, fileName, fileSize, fileType) =>
|
||||
handleSendFile(fileUrl, fileName, fileSize, fileType)
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Голосовая запись */}
|
||||
<VoiceRecorder onSendVoice={handleSendVoice} />
|
||||
|
||||
{/* Текстовое поле */}
|
||||
<div className="flex-1 relative">
|
||||
<textarea
|
||||
value={messageText}
|
||||
onChange={(e) => setMessageText(e.target.value)}
|
||||
placeholder="Напишите сообщение..."
|
||||
className="w-full p-2 border rounded-lg resize-none"
|
||||
rows={1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSendMessage()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Эмодзи пикер */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsEmojiPickerOpen(!isEmojiPickerOpen)}
|
||||
className="absolute right-2 top-2"
|
||||
>
|
||||
😊
|
||||
</Button>
|
||||
|
||||
{isEmojiPickerOpen && (
|
||||
<div className="absolute bottom-12 right-0">
|
||||
<EmojiPickerComponent
|
||||
onEmojiSelect={(emoji) => {
|
||||
setMessageText(prev => prev + emoji)
|
||||
setIsEmojiPickerOpen(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Кнопка отправки */}
|
||||
<Button
|
||||
onClick={handleSendMessage}
|
||||
disabled={!messageText.trim()}
|
||||
size="sm"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 🎤 ГОЛОСОВЫЕ СООБЩЕНИЯ
|
||||
|
||||
### Компонент записи голоса
|
||||
|
||||
```typescript
|
||||
// VoiceRecorder - запись и отправка аудио сообщений
|
||||
const VoiceRecorder = ({ onSendVoice }: VoiceRecorderProps) => {
|
||||
const [isRecording, setIsRecording] = useState(false)
|
||||
const [recordedAudio, setRecordedAudio] = useState<string | null>(null)
|
||||
const [duration, setDuration] = useState(0)
|
||||
const [permission, setPermission] = useState<'granted' | 'denied' | 'prompt'>('prompt')
|
||||
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null)
|
||||
const audioChunksRef = useRef<Blob[]>([])
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null)
|
||||
|
||||
// Проверка разрешения на микрофон
|
||||
useEffect(() => {
|
||||
if (typeof navigator !== 'undefined' && navigator.mediaDevices) {
|
||||
navigator.permissions
|
||||
.query({ name: 'microphone' as PermissionName })
|
||||
.then((result) => {
|
||||
setPermission(result.state as 'granted' | 'denied' | 'prompt')
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Начало записи
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: {
|
||||
echoCancellation: true,
|
||||
noiseSuppression: true,
|
||||
sampleRate: 44100
|
||||
}
|
||||
})
|
||||
|
||||
mediaRecorderRef.current = new MediaRecorder(stream, {
|
||||
mimeType: 'audio/webm; codecs=opus'
|
||||
})
|
||||
|
||||
audioChunksRef.current = []
|
||||
|
||||
mediaRecorderRef.current.ondataavailable = (event) => {
|
||||
audioChunksRef.current.push(event.data)
|
||||
}
|
||||
|
||||
mediaRecorderRef.current.onstop = () => {
|
||||
const audioBlob = new Blob(audioChunksRef.current, {
|
||||
type: 'audio/webm; codecs=opus'
|
||||
})
|
||||
const audioUrl = URL.createObjectURL(audioBlob)
|
||||
setRecordedAudio(audioUrl)
|
||||
|
||||
// Очистка потока
|
||||
stream.getTracks().forEach(track => track.stop())
|
||||
}
|
||||
|
||||
mediaRecorderRef.current.start()
|
||||
setIsRecording(true)
|
||||
setDuration(0)
|
||||
|
||||
// Таймер записи
|
||||
intervalRef.current = setInterval(() => {
|
||||
setDuration(prev => prev + 1)
|
||||
}, 1000)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Ошибка доступа к микрофону:', error)
|
||||
toast.error('Не удалось получить доступ к микрофону')
|
||||
}
|
||||
}
|
||||
|
||||
// Остановка записи
|
||||
const stopRecording = () => {
|
||||
if (mediaRecorderRef.current && isRecording) {
|
||||
mediaRecorderRef.current.stop()
|
||||
setIsRecording(false)
|
||||
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Отправка голосового сообщения
|
||||
const sendVoice = async () => {
|
||||
if (!recordedAudio) return
|
||||
|
||||
try {
|
||||
// Загружаем аудио файл на сервер
|
||||
const response = await uploadVoiceFile(recordedAudio)
|
||||
|
||||
if (response.success) {
|
||||
onSendVoice(response.voiceUrl, duration)
|
||||
|
||||
// Очищаем состояние
|
||||
setRecordedAudio(null)
|
||||
setDuration(0)
|
||||
URL.revokeObjectURL(recordedAudio)
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Ошибка отправки голосового сообщения')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
{!recordedAudio ? (
|
||||
// Кнопка записи
|
||||
<Button
|
||||
variant={isRecording ? "destructive" : "outline"}
|
||||
size="sm"
|
||||
onClick={isRecording ? stopRecording : startRecording}
|
||||
disabled={permission === 'denied'}
|
||||
>
|
||||
{isRecording ? (
|
||||
<>
|
||||
<Square className="h-4 w-4 mr-1" />
|
||||
{formatDuration(duration)}
|
||||
</>
|
||||
) : (
|
||||
<Mic className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
// Контролы записанного сообщения
|
||||
<div className="flex items-center space-x-2 p-2 bg-gray-100 rounded">
|
||||
<VoicePlayer audioUrl={recordedAudio} duration={duration} />
|
||||
|
||||
<Button size="sm" onClick={sendVoice}>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setRecordedAudio(null)
|
||||
setDuration(0)
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 📎 ФАЙЛОВЫЕ ВЛОЖЕНИЯ
|
||||
|
||||
### Система загрузки файлов
|
||||
|
||||
```typescript
|
||||
// MessengerAttachments - управление вложениями
|
||||
const MessengerAttachments = ({ onSendImage, onSendFile }: MessengerAttachmentsProps) => {
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
|
||||
const handleFileUpload = async (file: File) => {
|
||||
if (!file) return
|
||||
|
||||
setIsUploading(true)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
const response = await fetch('/api/upload-file', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
const isImage = file.type.startsWith('image/')
|
||||
|
||||
if (isImage) {
|
||||
onSendImage(result.fileUrl, file.name, file.size, file.type)
|
||||
} else {
|
||||
onSendFile(result.fileUrl, file.name, file.size, file.type)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Ошибка загрузки файла')
|
||||
} finally {
|
||||
setIsUploading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FileUploader
|
||||
onFileSelect={handleFileUpload}
|
||||
maxSize={10 * 1024 * 1024} // 10MB
|
||||
acceptedTypes={[
|
||||
'image/*',
|
||||
'application/pdf',
|
||||
'application/msword',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'text/*'
|
||||
]}
|
||||
disabled={isUploading}
|
||||
>
|
||||
<Button variant="outline" size="sm" disabled={isUploading}>
|
||||
{isUploading ? (
|
||||
<div className="animate-spin">⏳</div>
|
||||
) : (
|
||||
<FileText className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</FileUploader>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 GraphQL API
|
||||
|
||||
### Основные запросы
|
||||
|
||||
```graphql
|
||||
# Получение списка диалогов
|
||||
query GetConversations {
|
||||
conversations {
|
||||
id
|
||||
counterparty {
|
||||
id
|
||||
name
|
||||
fullName
|
||||
type
|
||||
avatar
|
||||
}
|
||||
lastMessage {
|
||||
id
|
||||
content
|
||||
type
|
||||
senderId
|
||||
isRead
|
||||
createdAt
|
||||
}
|
||||
unreadCount
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
|
||||
# Получение сообщений диалога
|
||||
query GetMessages($counterpartyId: ID!, $limit: Int = 50, $offset: Int = 0) {
|
||||
messages(counterpartyId: $counterpartyId, limit: $limit, offset: $offset) {
|
||||
id
|
||||
content
|
||||
type
|
||||
voiceUrl
|
||||
voiceDuration
|
||||
fileUrl
|
||||
fileName
|
||||
fileSize
|
||||
fileType
|
||||
isRead
|
||||
senderId
|
||||
senderOrganizationId
|
||||
createdAt
|
||||
sender {
|
||||
id
|
||||
phone
|
||||
avatar
|
||||
}
|
||||
senderOrganization {
|
||||
id
|
||||
name
|
||||
fullName
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Мутации для отправки сообщений
|
||||
|
||||
```graphql
|
||||
# Текстовое сообщение
|
||||
mutation SendMessage($receiverOrganizationId: ID!, $content: String!, $type: MessageType = TEXT) {
|
||||
sendMessage(receiverOrganizationId: $receiverOrganizationId, content: $content, type: $type) {
|
||||
success
|
||||
message
|
||||
messageData {
|
||||
id
|
||||
content
|
||||
type
|
||||
createdAt
|
||||
isRead
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# Голосовое сообщение
|
||||
mutation SendVoiceMessage($receiverOrganizationId: ID!, $voiceUrl: String!, $voiceDuration: Int!) {
|
||||
sendVoiceMessage(
|
||||
receiverOrganizationId: $receiverOrganizationId
|
||||
voiceUrl: $voiceUrl
|
||||
voiceDuration: $voiceDuration
|
||||
) {
|
||||
success
|
||||
message
|
||||
messageData {
|
||||
id
|
||||
voiceUrl
|
||||
voiceDuration
|
||||
type
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# Изображение
|
||||
mutation SendImageMessage(
|
||||
$receiverOrganizationId: ID!
|
||||
$fileUrl: String!
|
||||
$fileName: String!
|
||||
$fileSize: Int!
|
||||
$fileType: String!
|
||||
) {
|
||||
sendImageMessage(
|
||||
receiverOrganizationId: $receiverOrganizationId
|
||||
fileUrl: $fileUrl
|
||||
fileName: $fileName
|
||||
fileSize: $fileSize
|
||||
fileType: $fileType
|
||||
) {
|
||||
success
|
||||
message
|
||||
messageData {
|
||||
id
|
||||
fileUrl
|
||||
fileName
|
||||
fileSize
|
||||
fileType
|
||||
type
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# Пометка как прочитанное
|
||||
mutation MarkMessagesAsRead($conversationId: ID!) {
|
||||
markMessagesAsRead(conversationId: $conversationId)
|
||||
}
|
||||
```
|
||||
|
||||
### Real-time подписки
|
||||
|
||||
```graphql
|
||||
# Подписка на новые сообщения
|
||||
subscription MessageUpdated($organizationIds: [ID!]!) {
|
||||
messageUpdated(organizationIds: $organizationIds) {
|
||||
id
|
||||
content
|
||||
type
|
||||
voiceUrl
|
||||
voiceDuration
|
||||
fileUrl
|
||||
fileName
|
||||
senderId
|
||||
senderOrganizationId
|
||||
receiverOrganizationId
|
||||
isRead
|
||||
createdAt
|
||||
sender {
|
||||
id
|
||||
phone
|
||||
avatar
|
||||
}
|
||||
senderOrganization {
|
||||
id
|
||||
name
|
||||
fullName
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 📱 МОБИЛЬНАЯ АДАПТАЦИЯ
|
||||
|
||||
### Отзывчивый дизайн
|
||||
|
||||
```typescript
|
||||
// Адаптивные панели для мобильных устройств
|
||||
const MessengerDashboard = () => {
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [selectedCounterparty, setSelectedCounterparty] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => setIsMobile(window.innerWidth < 768)
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
return () => window.removeEventListener('resize', checkMobile)
|
||||
}, [])
|
||||
|
||||
if (isMobile) {
|
||||
// Мобильная версия: переключение между списком и чатом
|
||||
return (
|
||||
<div className="h-screen flex flex-col">
|
||||
{selectedCounterparty ? (
|
||||
<MessengerChat
|
||||
counterpartyId={selectedCounterparty}
|
||||
onBack={() => setSelectedCounterparty(null)}
|
||||
isMobile={true}
|
||||
/>
|
||||
) : (
|
||||
<MessengerConversations
|
||||
conversations={conversations}
|
||||
onSelectCounterparty={setSelectedCounterparty}
|
||||
isMobile={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Десктопная версия с панелями
|
||||
return (
|
||||
<PanelGroup direction="horizontal">
|
||||
{/* ... стандартная панельная разметка */}
|
||||
</PanelGroup>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 🔔 СИСТЕМА УВЕДОМЛЕНИЙ
|
||||
|
||||
### Real-time уведомления
|
||||
|
||||
```typescript
|
||||
// useRealtime хук для уведомлений о новых сообщениях
|
||||
const useRealtime = ({ channel, organizationId }: UseRealtimeProps) => {
|
||||
const [unreadCount, setUnreadCount] = useState(0)
|
||||
const [connectionStatus, setConnectionStatus] = useState<'connecting' | 'connected' | 'disconnected'>('connecting')
|
||||
|
||||
useEffect(() => {
|
||||
// WebSocket подключение для real-time уведомлений
|
||||
const wsClient = new WebSocketClient(`/api/realtime/${channel}`)
|
||||
|
||||
wsClient.on('connect', () => {
|
||||
setConnectionStatus('connected')
|
||||
wsClient.subscribe(`messages:${organizationId}`)
|
||||
})
|
||||
|
||||
wsClient.on('message', (data) => {
|
||||
if (data.type === 'new_message') {
|
||||
setUnreadCount((prev) => prev + 1)
|
||||
|
||||
// Browser notification
|
||||
if (Notification.permission === 'granted') {
|
||||
new Notification('Новое сообщение', {
|
||||
body: data.message.content || 'Голосовое сообщение',
|
||||
icon: '/favicon.ico',
|
||||
tag: data.message.id,
|
||||
})
|
||||
}
|
||||
|
||||
// Sound notification
|
||||
playNotificationSound()
|
||||
}
|
||||
|
||||
if (data.type === 'messages_read') {
|
||||
setUnreadCount((prev) => Math.max(0, prev - data.count))
|
||||
}
|
||||
})
|
||||
|
||||
wsClient.on('disconnect', () => {
|
||||
setConnectionStatus('disconnected')
|
||||
})
|
||||
|
||||
return () => {
|
||||
wsClient.disconnect()
|
||||
}
|
||||
}, [channel, organizationId])
|
||||
|
||||
return { unreadCount, connectionStatus }
|
||||
}
|
||||
```
|
||||
|
||||
## 🔐 ПРАВИЛА БЕЗОПАСНОСТИ
|
||||
|
||||
### Валидация сообщений
|
||||
|
||||
```typescript
|
||||
// Серверная валидация перед сохранением
|
||||
const validateMessageContent = (message: MessageInput) => {
|
||||
// Ограничения по размеру
|
||||
if (message.content && message.content.length > 4000) {
|
||||
throw new GraphQLError('Сообщение слишком длинное (максимум 4000 символов)')
|
||||
}
|
||||
|
||||
// Проверка файлов
|
||||
if (message.type === 'FILE' && message.fileSize > 10 * 1024 * 1024) {
|
||||
throw new GraphQLError('Файл слишком большой (максимум 10MB)')
|
||||
}
|
||||
|
||||
// Проверка голосовых сообщений
|
||||
if (message.type === 'VOICE' && message.voiceDuration > 300) {
|
||||
throw new GraphQLError('Голосовое сообщение слишком длинное (максимум 5 минут)')
|
||||
}
|
||||
|
||||
// XSS защита для текста
|
||||
if (message.content) {
|
||||
message.content = sanitizeHtml(message.content, {
|
||||
allowedTags: [],
|
||||
allowedAttributes: {},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Проверка прав на отправку сообщений
|
||||
const validateMessagingPermissions = async (senderId: string, receiverOrgId: string) => {
|
||||
// Проверяем, что организации являются партнерами
|
||||
const partnership = await prisma.organizationPartner.findFirst({
|
||||
where: {
|
||||
OR: [
|
||||
{ organizationId: user.organizationId, partnerId: receiverOrgId },
|
||||
{ organizationId: receiverOrgId, partnerId: user.organizationId },
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
if (!partnership) {
|
||||
throw new GraphQLError('Сообщения можно отправлять только партнерским организациям')
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Шифрование файлов
|
||||
|
||||
```typescript
|
||||
// Безопасная загрузка файлов
|
||||
const uploadMessageFile = async (file: File, senderId: string) => {
|
||||
// Генерируем уникальное имя файла
|
||||
const fileId = generateSecureId()
|
||||
const safeFileName = sanitizeFileName(file.name)
|
||||
const fullPath = `messages/${senderId}/${fileId}_${safeFileName}`
|
||||
|
||||
// Загружаем в S3 с приватным доступом
|
||||
const uploadResult = await s3Client
|
||||
.upload({
|
||||
Bucket: process.env.S3_PRIVATE_BUCKET,
|
||||
Key: fullPath,
|
||||
Body: file,
|
||||
ContentType: file.type,
|
||||
ServerSideEncryption: 'AES256',
|
||||
Metadata: {
|
||||
originalName: file.name,
|
||||
uploadedBy: senderId,
|
||||
uploadedAt: new Date().toISOString(),
|
||||
},
|
||||
})
|
||||
.promise()
|
||||
|
||||
return {
|
||||
fileUrl: uploadResult.Location,
|
||||
secureKey: fullPath,
|
||||
}
|
||||
}
|
||||
|
||||
// Генерация временных ссылок для скачивания
|
||||
const generateSecureFileUrl = async (fileKey: string, userId: string) => {
|
||||
// Проверяем права доступа к файлу
|
||||
const canAccess = await validateFileAccess(fileKey, userId)
|
||||
if (!canAccess) {
|
||||
throw new GraphQLError('Нет доступа к файлу')
|
||||
}
|
||||
|
||||
// Генерируем временную ссылку (действует 1 час)
|
||||
return s3Client.getSignedUrl('getObject', {
|
||||
Bucket: process.env.S3_PRIVATE_BUCKET,
|
||||
Key: fileKey,
|
||||
Expires: 3600, // 1 час
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 АНАЛИТИКА И МЕТРИКИ
|
||||
|
||||
### Статистика сообщений
|
||||
|
||||
```typescript
|
||||
// Сбор метрик использования мессенджера
|
||||
const collectMessagingMetrics = async (organizationId: string) => {
|
||||
const metrics = await prisma.$queryRaw`
|
||||
SELECT
|
||||
DATE(created_at) as date,
|
||||
type,
|
||||
COUNT(*) as message_count,
|
||||
COUNT(DISTINCT sender_organization_id) as active_senders,
|
||||
COUNT(DISTINCT receiver_organization_id) as active_receivers,
|
||||
AVG(CASE WHEN is_read THEN EXTRACT(EPOCH FROM (updated_at - created_at)) END) as avg_read_time
|
||||
FROM messages
|
||||
WHERE sender_organization_id = ${organizationId}
|
||||
OR receiver_organization_id = ${organizationId}
|
||||
GROUP BY DATE(created_at), type
|
||||
ORDER BY date DESC
|
||||
LIMIT 30
|
||||
`
|
||||
|
||||
return {
|
||||
dailyStats: metrics,
|
||||
totalMessages: metrics.reduce((sum, day) => sum + day.message_count, 0),
|
||||
mostActiveType: getMostFrequentType(metrics),
|
||||
avgResponseTime: calculateAvgResponseTime(metrics),
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
_Извлечено из анализа: 5 компонентов мессенджера + 6 UI компонентов для медиа_
|
||||
_Источники: src/components/messenger/, src/components/ui/, prisma/schema.prisma_
|
||||
_Создано: 2025-08-21_
|
||||
Reference in New Issue
Block a user