React+SSE+数据流形式输出

最新推荐文章于 2025-03-29 09:19:53 发布

剪得断理得清

最新推荐文章于 2025-03-29 09:19:53 发布

阅读量1.8k

点赞数 22

文章标签： reactjs node.js

本文链接：https://blog.csdn.net/m0_60899441/article/details/140434439

版权

1. 什么是SSE

sse基于http协议，是一种服务端主动向客户端推送消息得技术。

2. SSE和Websocket区别

SSE基于http协议，只能服务端单向推送消息。可以传输文本消息，短线后可以自动重连
websocket基于TCP协议，支持接收和发送消息，可传得消息类型广泛，需要额为部署（心跳机制）

3. 使用方法

实现了一个输入一个问题，随机生成一首诗


import React, { useState } from "react";

const ChatRoom = () => {
  const [messages, setMessages] = useState([]);
  const [qusetion, setquestion] = useState("");

  const formateMessage = (data) => {
    const result = data.split("");
    result.forEach((charaacter, index) => {
      setTimeout(() => {
        setMessages((preMesage) => [...preMesage, charaacter]);
      }, 100 * index);
    });
  };

  const handSubmit = () => {