SSE实现deepseek流式输出

前置条件

用到的框架vite，node、express和JS（可以使用nvm控制node版本，方便切换）

我们先把框架搭建起来（vite使用的版本需要在node18及以上）

这时，我们可以看到，node已添加到文件夹里面

我们在package里面声名dev，启动vite。

SSE简介

SSE(Server-Sent Events)译为服务器推送事件，通过EventSource接口实现服务器推送通信。
EventSource 实例会对 HTTP 服务器开启一个持久化的连接，以 text/event-stream 格式发送事件

进入主题

开头

一个延伸问题，如果马云做一个数据大屏，但是不需要前端传递，这个时候应该怎么做？

webSocket和SSE

区别：

webSocket全双工通信 SSE单工通信
webSocket默认是不会重连的，SSE默认自动了重连机制

前后端实时通讯的所有方法

轮询ajax
前端的mqtt 底层也是webSocket
WebTransport（new api，目的是为了代替webSocket）

webSocket TCP 三次握手以及四次挥手

WebTransport 是基于UDP 并且基于http3

不想记概括版：UDP快，TCP慢

http2，被谷歌下架了（103版本）

底层实现

我们进入index.js，使用express搭建

Content-Type为text/event-stream来开启SSE
连接状态Connection为keep-alive
实时推送需要设置Cache-Control为no-cahce停用缓存

get

发送请求

只有write才能发送数据流，其他发不了。

监听端口

运行

默认接收的是一个message，但是可以修改（要加\n，不然到tcp层解析不了）

实现打字机效果

创造盒子

post

arduino 复制代码

async function startSSE() {
    const response = await fetch('http://localhost:3000/sse', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            message: 'Hello, SSE!'
        })
    })

    const reader = response.body?.getReader()

    //{done:false,value:Uint8Array} done false表示未结束 true表示结束 value就是unit8array
    //unit8array二进制数据 这是因为为了让我们开发者调试用的 底层是二进制
    //String.fromCharCode(118) 通过这个方法查看
    //ASCII 编码
    //TC39组织设计API filter promise TextDecoder 转成文本
    while (true) {
        const { done, value } = await reader!.read()
        if (done) break
        const text = new TextDecoder().decode(value)
        const arr = text.split('\n')
        arr.pop()
        arr.pop()
        for (const line of arr) {
            if (line.startsWith('data:')) {
                console.log(line.split(': ')[1])
                content.innerHTML += line.split(': ')[1]
            }
        }
    }

}


startSSE()

总结

底层原理已经明白了，我们可以使用封装好的组件（微软的sse）

javascript 复制代码

import { fetchEventSource } from '@microsoft/fetch-event-source';
fetchEventSource('http://localhost:3000/sse',{
    method:'POST',
    headers:{
        'Content-Type':'application/json'
    },
    body:JSON.stringify({message:'Hello, SSE!'}),
    onmessage:(event)=>{
        console.log(JSON.parse(event.data))
    },
    onerror:(event)=>{
        console.log(event)
    }
})

可能存在跨域问题（？）

使用cors