Server-sent events发送请求

策略类型

use hook

在使用扩展 hooks 前，确保你已熟悉了 alova 的基本使用。

通过 Server-sent Events(SSE)请求，内部使用EventSource实现。

特性

• ✨ 更加简洁易用的使用方式；
• ✨ 自动管理连接；

安装

vue composition

# npm
npm install @alova/scene-vue --save
# yarn
yarn add @alova/scene-vue

react

# npm
npm install @alova/scene-react --save
# yarn
yarn add @alova/scene-react

svelte

# npm
npm install @alova/scene-svelte --save
# yarn
yarn add @alova/scene-svelte

用法

vue composition

import { useSSE } from '@alova/scene-vue';

const method = (value: string) => alova.Get('/api/source', { param: { key: value } });
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method, {
  initialData: 'initial-data' // 初始时 data 中的数据
});

// connect
send('value');

console.log(data.value); // data 在接收到事件后更新，默认是 initialData

// 对应 eventsource 的 message 事件
const unbindMessage = onMessage(({ data }) => {
  console.log(data);
});

const unbindError = onError(({ error }) => {
  console.error('sse error', error);
  close();
})

// 在需要的时候解绑
unbindMessage();
unbindError();

react

import { useSSE } from '@alova/scene-react';

const method = (value: string) => alova.Get('/api/source', { param: { key: value } });
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method, {
  initialData: 'initial-data' // 初始时 data 中的数据
});

// connect
send('value');

console.log(data); // data 在接收到事件后更新，默认是 initialData

// 对应 eventsource 的 message 事件
const unbindMessage = onMessage(({ data }) => {
  console.log(data);
});

const unbindError = onError(({ error }) => {
  console.error('sse error', error);
  close();
})

// 在需要的时候解绑
unbindMessage();
unbindError();

svelte

import { useSSE } from '@alova/scene-svelte';

const method = (value: string) => alova.Get('/api/source', { param: { key: value } });
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method, {
  initialData: 'initial-data' // 初始时 data 中的数据
});

// connect
send('value');

console.log(data); // data 在接收到事件后更新，默认是 initialData

// 对应 eventsource 的 message 事件
const unbindMessage = onMessage(({ data }) => {
  console.log(data);
});

const unbindError = onError(({ error }) => {
  console.error('sse error', error);
  close();
})

// 在需要的时候解绑
unbindMessage();
unbindError();

注意

useSSE 目前只能连接到一个源。也就是说，当试图连接多个目标时，上一个连接总会被断开。

const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method);

send('value1');
send('value2'); // 这会断开上一个连接
send('value3'); // 这也会断开上一个连接

默认情况下，不会发送请求。当然，通过设置immediate = true，可以省去手动 send 的一步。

const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method, {
  immediate: true
});

// codes here...

绑定自定义事件

const { data, readyState, onMessage, on } = useSSE(method);

on('event-name', ({ data }) => {
  console.log(data);
});

全局响应拦截

默认情况下，响应数据受到全局响应拦截器的捕获。如果这不是你预期的行为，可以手动关闭。

const { data, readyState, onMessage, on } = useSSE(method, {
  interceptByGlobalResponded: false // 现在数据不会被响应拦截
});

类型声明

const enum SSEHookReadyState {
  CONNECTING = 0,
  OPEN = 1,
  CLOSED = 2
};

type SSEHookConfig = {
  /**
   * 会传给new EventSource
   */
  withCredentials?: boolean;

  /**
   * 是否经过alova实例的responded拦截
   * @default true
   */
  interceptByGlobalResponded?: boolean;

  /**
   * 初始数据
   */
  initialData?: any;

  /**
   * 是否立即发起请求
   * @default false
   */
  immediate?: boolean;
};

type SSEReturnType<S, Data> = {
  readyState: ExportedType<SSEHookReadyState, S>;
  data: ExportedType<Data | undefined, S>;
  eventSource: ExportedType<EventSource | undefined, S>;
  /**
   * 手动发起请求。在使用 `immediate: true` 时该方法会自动触发
   * @param sendArgs 请求参数，会传递给 method
   */
  send: (...sendArgs: any[]) => Promise<void>;
  /**
   * 关闭连接
   */
  close: () => void;
  /**
   * 注册 EventSource open 的回调函数
   * @param callback 回调函数
   * @returns 取消注册函数
   */
  onOpen(callback: SSEOnOpenTrigger): () => void;

  /**
   * 注册 EventSource message 的回调函数
   * @param callback 回调函数
   * @returns 取消注册函数
   */
  onMessage<T = Data>(callback: SSEOnMessageTrigger<T>): () => void;

  /**
   * 注册 EventSource error 的回调函数
   * @param callback 回调函数
   * @returns 取消注册函数
   */
  onError(callback: SSEOnErrorTrigger): () => void;

  /**
   * @param eventName 事件名称，默认存在 `open` | `error` | `message`
   * @param handler 事件处理器
   */
  on(
    eventName: string,
    handler: (event: AlovaSSEMessageEvent<S, E, R, T, RC, RE, RH>) => void
  ) => () => void;
};