SSE打扮你的AI应用，让它美美哒

data: 这是一个事件消息

data: 这是另一个事件消息

id: 1234
event: customEvent
data: {"message": "这是一个自定义事件"}
retry: 10000

const eventSource = new EventSource('server-url');

eventSource.onmessage = function(event) {
    console.log('收到事件数据:', event.data);
};

eventSource.onerror = function(event) {
    console.log('事件源连接错误:', event);
};

eventSource.addEventListener('customEvent', function(event) {
    console.log('收到自定义事件:', event.data);
});

event: React
data: React is great!

event: Rust
data: { "Rust": "我很喜欢", }

event: AI
data: { "name": "OpenAI" }

// react 消息处理程序
source.addEventListener('React', e => {
  document.getElementById('React')
    .textContent = e.data;
});

// Rust 消息处理程序
source.addEventListener('Rust', e => {
  const r = JSON.parse(e.data);
  document.getElementById('Rust')
    .textContent = `${r.Rust}`;
});

// AI 消息处理程序
source.addEventListener('AI', e => {
  const ai = JSON.parse(e.data);
  document.getElementById(`ai`)
    .textContent = `${ai.name}`;
});

event: React
data: React is great!
id: 42

// news 消息处理程序
source.addEventListener('React', e => {
  console.log(`last ID: ${e.lastEventId}`);
  document.getElementById('React')
    .textContent = e.data;
});

retry: 60000
data: 你很好，这段时间我们还是别联系了!

const source = new EventSource('/sse1');

source.addEventListener('open', e => {
  console.log('SSE connection established.');
});

source.addEventListener('error', e => {
  if (e.eventPhase === EventSource.CLOSED) {
    console.log('SSE connection closed');
  } else {
    console.log('error', e);
  }
});

const source = new EventSource('/sse1');

// 一小时后关闭
setTimeout(() => source.close(), 3600000);

mkdir SSE && 
cd SSE &&
mkdir Server &&
cd Server &&
npm init

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc && node -v",
    "dev": "tsc && tsc-watch --onSuccess \"node dist/index.js\""
  },
  "dependencies": {
    "@types/uuid": "^10.0.0",
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "uuid": "^10.0.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "tsc-watch": "^6.0.4",
    "typescript": "^5.1.6"
  },
  "author": "Front789",
  "license": "ISC"
}

import express from "express";
import cors from "cors";
import bodyParser from "body-parser";
import { v4 as uuidv4 } from "uuid";

const app = express();
app.use(cors());
app.use(bodyParser.json());
const port = 4000;

// SSE连接处理
app.get('/api/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders(); // 发送头部信息到客户端

  const clientId = uuidv4();
  const newClient = {
    id: clientId,
    res,
  };

  clients.push(newClient);

  req.on('close', () => {
    console.log(`${clientId} Connection closed`);
    clients = clients.filter((client) => client.id !== clientId);
  });
});

// 处理POST请求
app.post('/api/message', (req, res) => {
  const userInput = req.body.message;
    // 模拟处理消息并推送给所有客户端
    const responses = generateChatGPTResponse(userInput);

  let index = 0;
  const intervalId = setInterval(() => {
      if (index < responses.length) {
        clients.forEach((client) => client.res.write(`data: ${JSON.stringify({ message: responses[index] })}\n\n`));
      index++;
    } else {
      clearInterval(intervalId);
      res.end();
    }
  }, 1000); // 每秒发送一个响应
  
  res.status(200).send();
});

function generateChatGPTResponse(input:string) {
  // 模拟AI模型的响应，这里可以替换为实际的模型调用
  return [
    `你说的是: ${input}`,
    "这是AI模型的第一段响应。",
    "这是AI模型的第二段响应。",
    "这是AI模型的第三段响应。",
  ];
}

npx f_cli_f create Client

---SSE
  ---Client（前端项目）
  ---Server (后端服务)

 <div className='flex flex-col justify-center items-center w-full h-full'>
    <div className='flex flex-col justify-center items-center flex-1 w-full'>
        <Typewriter text={'大家好，我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder'} delay={100} infinite={false} />
        {messages.map((msg, index) => (
            // <p key={index}>{msg}</p>
            <Typewriter text={msg} delay={100} infinite={false} key={index}/>
        ))}

    </div>
    <Form  form={form} className='w-9/12'>
        <Form.Item className={styles['message-item']} name="message">
            <Input.TextArea
                autoSize={{ minRows: 1, maxRows: 3 }}
                placeholder="输入内容开始对话（Shift + Enter 换行）"
                onPressEnter={handleTextAreaKeyDown}
            />
        </Form.Item>
    </Form>
</div>

 useEffect(() => {
    const eventSource = new EventSource('http://localhost:4000/api/events');
    eventSource.onmessage = function (event) { 
        const data = JSON.parse(event.data);
        const { message } = data;
        setMessages((prevMessages) => [...prevMessages, message]);
    };
    return () => {
        eventSource.close();
    };
}, []);

 const handleTextAreaKeyDown= async (event) => {
    const { keyCode, shiftKey } = event;
    if (keyCode == 13 && !shiftKey) {
        event.preventDefault();
        const message = form.getFieldValue('message');
        if (message && message.trim().length > 0) {
            if (message.trim().length > 0) {
                await fetch('http://localhost:4000/api/message', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ message }),
                });
            }
            form.setFieldValue('message', '');
        }
    }
};

import React, { useState, useEffect } from 'react';
import style from './index.module.scss';
import Cursor from './Cursor';
interface TypewriterProps {
    text: string | React.ReactNode;
    delay: number;
    infinite?: boolean;
}

const Typewriter: React.FC<TypewriterProps> = ({ text, delay, infinite }) => {
    const [currentText, setCurrentText] = useState<string>('');
    const [currentIndex, setCurrentIndex] = useState<number>(0);

    useEffect(() => {
        let timeout: number;

        if (currentIndex < text.length) {
            timeout = setTimeout(() => {
                setCurrentText((prevText) => prevText + text[currentIndex]);
                setCurrentIndex((prevIndex) => prevIndex + 1);
            }, delay);
        } else if (infinite) {
            setCurrentIndex(0);
            setCurrentText('');
        }

        return () => clearTimeout(timeout);
    }, [currentIndex, delay, infinite, text]);

    return (
        <span className={style['text-writer-wrapper']}>
            <span dangerouslySetInnerHTML={{ __html: currentText }}></span>
            {currentIndex < text.length && <Cursor />}
        </span>
    );
};

export default Typewriter;

import style from './index.module.scss';
export default function CursorSVG() {
    return (
        <svg viewBox="8 4 8 16" xmlns="http://www.w3.org/2000/svg" className={style['cursor']}>
            <rect x="10" y="6" width="2" height="100%" fill="black" />
        </svg>
    );
}

.text-writer-wrapper{
     @keyframes flicker {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    .cursor {
        display: inline-block;
        width: 1ch;
        animation: flicker 0.5s infinite;
    }
}