useXStream 🌱

Introduction

This hook function allows users to more conveniently control streaming requests. It provides initiate request, cancel request, returns loading request state, returns SSE protocol real-time data stream, and returns request error information.

💌 Info

Currently only SSE and SIP protocol requests have been tested, other protocols are yet to be tested. If you have good ideas or discoveries, you are welcome to join the community group 👨‍👩‍👧‍👧 Community Group, contact us, share solutions, submit issues and PRs. Please read the 👉 Development Guide for submission specifications.

Code Examples

Basic Usage of SSE

This hook function is aligned with ant-design-x's XStream method, and we have integrated the Vue development paradigm.

On this basis, we have added interrupt handling for streaming requests, and placed the original hook function's configuration method in the startStream parameter, making it easier for developers to understand the purpose of this hook.

<script setup lang="ts">
import { useXStream } from 'vue-element-plus-x';

const { startStream, cancel, data, error, isLoading } = useXStream();

// SSE protocol is supported by default
async function startSSE() {
  try {
    const response = await fetch(
      'https://node-test.element-plus-x.com/api/sse',
      {
        headers: { 'Content-Type': 'text/event-stream' }
      }
    );
    const readableStream = response.body!;
    await startStream({ readableStream });
  }
  catch (err) {
    console.error('Fetch error:', err);
  }
}

// Robot content computed property
const content = computed(() => {
  if (!data.value.length)
    return '';
  let text = '';
  for (let index = 0; index < data.value.length; index++) {
    const chunk = data.value[index].data;
    try {
      const parsedChunk = JSON.parse(chunk).content;
      text += parsedChunk;
    }
    catch (error) {
      // This end flag is given by the backend, so judge like this here
      // In actual projects, follow project requirements
      if (chunk === ' [DONE]') {
        // Handle data end
        // console.log('Data reception complete')
      }
      else {
        console.error('Error parsing data:', error);
      }
    }
    // console.log('New chunk:', chunk)
  }
  console.log('Text:', text);
  return text;
});
</script>

<template>
  <div class="container">
    <div class="btn-list">
      <el-button :disabled="isLoading" @click="startSSE">
        {{ isLoading ? 'Loading...' : 'Get SSE Stream Data' }}
      </el-button>

      <el-button :disabled="!isLoading" @click="cancel()">
        Cancel Request
      </el-button>
    </div>
    <div v-if="error" class="error">
      {{ error.message }}
    </div>

    <Bubble
      v-if="content"
      :content="content"
      is-markdown
      style="width: calc(100% - 12px)"
    />
  </div>
</template>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  .el-button {
    width: fit-content;
  }
  :deep(.markdown-body) {
    background-color: transparent;
    padding: 12px;
  }
}
</style>

Basic Usage of SIP

This demonstrates support for the SIP protocol.

<script setup lang="ts">
import { useXStream } from 'vue-element-plus-x';

const { startStream, cancel, data, error, isLoading } = useXStream();

async function startSIPStream() {
  try {
    const response = await fetch(
      'https://node-test.element-plus-x.com/api/sip',
      {
        headers: { 'Content-Type': 'application/sip' }
      }
    );
    const readableStream = response.body!;

    // Custom transformStream to handle SIP data
    const sipTransformStream = new TransformStream<string, any>({
      transform(chunk, controller) {
        // Add SIP data parsing logic here
        controller.enqueue(chunk);
      }
    });

    await startStream({ readableStream, transformStream: sipTransformStream });
  }
  catch (err) {
    console.error('Fetch error:', err);
  }
}

// Computed property
const content = computed(() => {
  if (!data.value.length)
    return '';
  let text = '';
  for (let index = 0; index < data.value.length; index++) {
    const chunk = data.value[index];
    try {
      console.log('chunk', chunk);
      text += chunk;
    }
    catch (error) {
      console.error('Error parsing data:', error);
    }
    // console.log('New chunk:', chunk)
  }
  console.log('Text:', text);
  return text;
});
</script>

<template>
  <div class="container">
    <div class="btn-list">
      <el-button :disabled="isLoading" @click="startSIPStream">
        {{ isLoading ? 'Loading...' : 'Get SIP Protocol Data' }}
      </el-button>

      <el-button :disabled="!isLoading" @click="cancel()">
        Cancel Request
      </el-button>
    </div>
    <div v-if="error" class="error">
      {{ error.message }}
    </div>

    <Bubble
      v-if="content"
      :content="content"
      is-markdown
      style="width: calc(100% - 12px)"
    />
  </div>
</template>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  .el-button {
    width: fit-content;
  }
  :deep(.markdown-body) {
    background-color: transparent;
    padding: 12px;
  }
}
</style>

📌 Warning

The parsing rules of this hook are consistent with ant-design-x, all handled internally. Feel free to switch and use

sseEventPart 'event: message\ndata: {"id":"${i}","content":"${contentChunks[i]}"}\n\n'

// Default stream separator (uses two newlines to split a stream data)
const DEFAULT_STREAM_SEPARATOR = '\n\n';
// Default part separator (uses a single newline to break current data)
const DEFAULT_PART_SEPARATOR = '\n';
// Default key-value separator (uses colon)
const DEFAULT_KV_SEPARATOR = ':';

Returned Hooks

Property	Description	Type
startStream	Start request in stream mode	({readableStream, transformStream}) => void
cancel	Cancel streaming request	() => void
loading	Is streaming data loading	boolean
data	Real-time streaming data	string
error	Streaming request error info	string