Перейти к основному содержимому

Хуки чатов

Хуки useChat и useChatWebSocket предоставляют полный функционал для работы с чатами в React приложениях.

useChat()​

Хук для управления чатами через REST API.

Возвращаемые методы​

  • listChannels() — список каналов
  • createChannel() — создание канала
  • sendMessage() — отправка сообщения
  • listMessages() — список сообщений
  • deleteChannel() — удаление канала

Пример​

import { useChat } from '@emd-cloud/react-components';
import { useState, useEffect } from 'react';

function ChatList() {
  const { listChannels, sendMessage } = useChat();
  const [channels, setChannels] = useState([]);
  
  useEffect(() => {
    async function loadChannels() {
      const result = await listChannels({ limit: 50 });
      setChannels(result.data);
    }
    
    loadChannels();
  }, [listChannels]);
  
  return (
    <div>
      {channels.map(channel => (
        <div key={channel.id}>{channel.name}</div>
      ))}
    </div>
  );
}

useChatWebSocket()​

Хук для real-time обмена сообщениями через WebSocket.

Возвращаемые методы​

  • connect() — подключение к серверу
  • disconnect() — отключение
  • subscribeToChannel() — подписка на канал
  • unsubscribeFromChannel() — отписка от канала
  • onMessageReceived() — обработчик новых сообщений
  • connectionState — состояние подключения

Пример real-time чата​

import { useChat, useChatWebSocket } from '@emd-cloud/react-components';
import { useState, useEffect } from 'react';

function ChatRoom({ channelId }) {
  const { sendMessage, listMessages } = useChat();
  const { subscribeToChannel, onMessageReceived, connect } = useChatWebSocket();
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  
  useEffect(() => {
    // Подключаемся к WebSocket
    connect();
    
    // Загружаем историю
    async function loadMessages() {
      const result = await listMessages(channelId, { limit: 50 });
      setMessages(result.data);
    }
    
    loadMessages();
    
    // Подписываемся на новые сообщения
    subscribeToChannel(channelId);
    
    // Обрабатываем новые сообщения
    onMessageReceived((message) => {
      if (message.channel === channelId) {
        setMessages(prev => [...prev, message]);
      }
    });
  }, [channelId]);
  
  const handleSend = async () => {
    if (!newMessage.trim()) return;
    
    await sendMessage(channelId, { message: newMessage });
    setNewMessage('');
  };
  
  return (
    <div className="chat-room">
      <div className="messages">
        {messages.map(msg => (
          <div key={msg._id} className="message">
            <strong>{msg.user}:</strong> {msg.message}
          </div>
        ))}
      </div>
      
      <div className="input">
        <input
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
          placeholder="Введите сообщение..."
        />
        <button onClick={handleSend}>Отправить</button>
      </div>
    </div>
  );
}

Следующие шаги​

Полезные ссылки​