如何在React网络聊天中添加打字指示器

import React, { useState, useEffect } from 'react';

const ChatApp = () => {
  const [isTyping, setIsTyping] = useState(false);

  // 模拟对方打字的逻辑
  useEffect(() => {
    const typingInterval = setInterval(() => {
      setIsTyping(true);
      setTimeout(() => setIsTyping(false), 1000); // 模拟打字间隔
    }, 3000); // 每3秒模拟一次打字

    return () => clearInterval(typingInterval);
  }, []);

  return (
    <div>
      {/* 聊天内容 */}
      <div>聊天内容...</div>
      {isTyping && <div>正在输入...</div>}
    </div>
  );
};

export default ChatApp;

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://your-chat-server.com');

const ChatApp = () => {
  const [isTyping, setIsTyping] = useState(false);

  useEffect(() => {
    socket.on('typing', (data) => {
      if (data.user === 'otherUser') {
        setIsTyping(true);
        setTimeout(() => setIsTyping(false), 1000); // 显示1秒
      }
    });

    return () => {
      socket.off('typing');
    };
  }, []);

  return (
    <div>
      {/* 聊天内容 */}
      <div>聊天内容...</div>
      {isTyping && <div>正在输入...</div>}
    </div>
  );
};

export default ChatApp;

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
  socket.on('typing', (data) => {
    socket.broadcast.emit('typing', { user: data.user });
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});