更新记录
1.0.0(2023-06-02) 下载此版本
v1.0.0
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | × | √ | √ |
xe-event-source
说明
H5及APP(vue)中使用EventSource (sse)
当前插件依赖@microsoft/fetch-event-source,相关传参可参考该依赖的传参
使用
Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 接口地址 | string | — |
options | 请求配置 | object | {} |
Events
事件名 | 说明 | 参数 |
---|---|---|
callback | 接收数据 | { type, msg, data } |
callback type
参数 | 说明 |
---|---|
tip | 返回校验信息 |
onopen | — |
onmessage | — |
onclose | — |
onerror | — |
示例
<xe-event-source ref="EventSourceRef" :url="eventSourceUrl" :options="eventSourceOptions"
@callback="handleCallback"></xe-event-source>
...
data() {
return {
inputContent: "What is the weather like today?",
outputContent: ""
}
},
computed: {
// 接口地址
eventSourceUrl() {
return "";
},
// 请求配置
eventSourceOptions({ inputContent }) {
return {
headers: {
Authorization: "Bearer xxxxxxxxxxxxxxxx"
},
method: "POST",
body: JSON.stringify({
msg: inputContent
})
}
}
},
methods: {
// 发送请求
handleClick() {
if (!this.inputContent) return;
this.outputContent = "";
this.$refs.EventSourceRef.send();
},
// 接收数据
handleCallback(e) {
const { type, msg, data } = e || {};
console.log(type, msg, (data || ""));
if (type !== "onmessage") return;
// TODO...
}
}
...