SSE(Server-Sent Events),是一种类似http的协议,实现单向多条消息分段发送的效果,服务器处理完一部分数据会先返回一段数据,等到全部内容发送完成后才会断开连接,我们也可以直接使用http去访问他,但是要等到请求完毕的时候才能一次性收到全部的内容。
打开 chatgpt.com 的控制台可以很清楚地在网络中看到EventStream加载的过程。
在h5中,可以使用 JS的 EventSource接口,但是App中,Uniapp 没有Windows对象,也没有提供SEE的接口,但可以使用RanderJs,RanderJs
是一个运行在视图层的js,可以使用完整的JS生态。
SSE标椎是使用GET请求,然而市场上大家基本都使用POST来把参数放到请求体中,所以我使用了github上的一个支持POST的工具fetch-event-source
下面介绍RanderJs怎么使用
使用RanderJs 代码分为3块
前面是标椎的nvue代码
后面的renderjs可以写原生的vue代码。
他们之间的通讯:
- 在视图层依靠:change属性,实现普通script值发生改变调用renderjs中的函数。
change:props="renderScript.handleEnter" :props="props" show="false" id="renderScript">
- 使用:change运行的函数会携带多个参数,第三个参数ownerInstance可以调用普通script的代码,值得一提的是,使用ownerInstance.callMethod,请不要使用
语法糖,否则调用将失败。
ownerInstance.callMethod('getSseData',参数)
完整代码
<view :change:props="renderScript.handleEnter" :props="props" show="false" id="renderScript">view>
<up-input
@confirm="handleEnter"
v-model="content"
placeholder="请填写您的问题"
/>
<script>
import {onLoad, onShow} from "@dcloudio/uni-app"
import {nextTick, ref, watchEffect} from "vue";
import {chatCategoryEdit, getChat, newChat, sendChat} from "../request/url";
export default {
setup() {
const content = ref('')
const props = ref({})
const handleEnter = () => {
const question = content.value
props.value = {
question: question,
data:{},
token:'xx',
}
}
const getSseData = (data)=>{
console.log(data)
}
return{
content,
props,
handleEnter,
getSseData,
}
}
}
script>
<script module="renderScript" lang="renderjs">
import {baseUrl} from "../request";
import { fetchEventSource } from '@microsoft/fetch-event-source';
export default {
data(){
return {
}
},
methods:{
handleEnter(newData,oldData,ownerInstance){
if(!newData.data){
return
}
const data = newData.data
const token = newData.token
fetchEventSource(`${baseUrl}/api/chat/chatAi`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'token':token
},
body: JSON.stringify(data),
onmessage(ev) {
ownerInstance.callMethod('getSseData',ev)
},
onclose() {
console.log('结束连接');
ownerInstance.callMethod('getSseData',{data:"{"data":"done"}"})
},
onerror(err) {
console.log('发生错误');
console.log(err)
},
async onopen(response) {
console.log('开始连接');
},
});
}
}
}
script>
这是我来到稀土掘金发的第一篇博客,希望可以帮到大家。
阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=21312,转载请注明出处。
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=21312,转载请注明出处。
评论0