分享记录vue通过sse实现打字机效果及相关业务场景

分享记录vue通过Server-Sent Events实现打字机效果及相关业务场景，最近有个项目是关于ai对话的，涉及到打字机效果，最开始用的vue-typed-js去实现，发现并不是符合当前业务场景，后面改成sse传输，自动实现打字机效果，话不多说，开整

一、代码实现
if (window.EventSource) {
                let that=this
                this.source = new EventSource('https://xxx/ai-service/xxxx')//请求连接地址
                this.source.onerror = (e) => {//onerror事件中捕获当前连接结束的状态
                    if (e.readyState == EventSource.CLOSED) {
                        console.log("SSE连接关闭");
                    } else if (this.source.readyState == EventSource.CONNECTING) {//当sse完成一个连接后将会继续连接，此时在这里阻止连接
                        console.log("SSE正在重连");
                        this.source.close();
                        console.log('关闭成功')
                    } else {
                        console.log('error', e);
                    }
                };
                this.source.addEventListener('open', function (e) {
                    console.log('建立连接。。。')
                })
                this.source.addEventListener('message', function (e) {//监听message，收到消息
                    console.log('收到消息', e.data)
                    // this.$nextTick(() => { 
                        that.e+=e.data
                    // })
                })
            } else {
                console.log('你的浏览器不支持SSE')
            }
 

二、效果截图

三、整体代码

<template>
    <div class="box">
        <button @click="createEventSource">连接</button>
        <button @click="closeSse">断开</button>
        <div style="height: 50px;white-space: pre-wrap">{{ e }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            source: '',
            e: ''
        }
    },
    methods: {
        async createEventSource() {
            if (window.EventSource) {
                let that = this
                this.source = new EventSource('https://ai.cd-hst.com/ai-service/api/chat/de5edb18-9225-4ef5-9769-e6b90e8fcd96')
                this.source.onerror = (e) => {//onerror事件中捕获当前连接结束的状态
                    if (e.readyState == EventSource.CLOSED) {
                        console.log("SSE连接关闭");
                    } else if (this.source.readyState == EventSource.CONNECTING) {//当sse完成一个连接后将会继续连接，此时在这里阻止连接
                        console.log("SSE正在重连");
                        this.source.close();
                        console.log('关闭成功')
                    } else {
                        console.log('error', e);
                    }
                };
                this.source.addEventListener('open', function (e) {
                    console.log('建立连接。。。')
                })
                this.source.addEventListener('message', function (e) {//监听message，收到消息
                    console.log('收到消息', e.data)
                    that.e += e.data.substr(3)
                })
            } else {
                console.log('你的浏览器不支持SSE')
            }
        },
        closeSse() {
            this.source.close()
            console.log('关闭成功')
        },

    },
}
</script>
<style scoped lang="scss">
</style>

四、总结
sse貌似没法监听整个请求结束，所以不好在整个连接中对某个请求进行操作，正常连接中当一个请求结束后会延迟几秒继续请求，我这边想到的只有在重连的时候关闭连接，等下次需要连接的时候再建立连接，可能操作有点麻烦，但符合场景需求，自动展现打字机效果，如果有更优处理方案还不忘各大佬们不吝刺激。