Разработка простого интерфейса чата в React

Для разработки простого интерфейса чата в React мы можем использовать WebSocket для обмена сообщениями в реальном времени. Давайте создадим компоненты для отправки и отображения сообщений, а также установим соединение с сервером WebSocket.

Основной компонент чата (ChatApp):

import React, { useState, useEffect } from 'react';
import ChatInput from './ChatInput';
import ChatMessages from './ChatMessages';

const ChatApp = () => {
  const [messages, setMessages] = useState([]);
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = new WebSocket('ws://localhost:8000');
    setSocket(newSocket);

    return () => {
      newSocket.close();
    };
  }, []);

  useEffect(() => {
    if (!socket) return;

    socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      setMessages([...messages, message]);
    };

    return () => {
      socket.onmessage = null;
    };
  }, [socket, messages]);

  const sendMessage = (text) => {
    const message = { id: messages.length + 1, text };
    socket.send(JSON.stringify(message));
    setMessages([...messages, message]);
  };

  return (
    <div>
      <h1>Chat App</h1>
      <ChatMessages messages={messages} />
      <ChatInput sendMessage={sendMessage} />
    </div>
  );
};

export default ChatApp;

Компонент для отображения сообщений чата (ChatMessages):

import React from 'react';

const ChatMessages = ({ messages }) => {
  return (
    <ul>
      {messages.map(message => (
        <li key={message.id}>{message.text}</li>
      ))}
    </ul>
  );
};

export default ChatMessages;

Компонент для ввода и отправки сообщений (ChatInput):

import React, { useState } from 'react';

const ChatInput = ({ sendMessage }) => {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!text.trim()) return;
    sendMessage(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={handleChange} />
      <button type="submit">Send</button>
    </form>
  );
};

export default ChatInput;

Для этого примера мы предполагаем, что сервер WebSocket запущен на ws://localhost:8000, и обрабатываем отправку и получение сообщений с помощью WebSocket.