custom-protocol.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <script setup lang="tsx">
  2. import { TagsOutlined } from '@ant-design/icons-vue';
  3. import { Button, Flex } from 'ant-design-vue';
  4. import { ThoughtChain, XStream } from 'ant-design-x-vue';
  5. import { ref } from 'vue';
  6. defineOptions({ name: 'AXXStreamCustomProtocol' });
  7. const sipHeaders = [
  8. 'INVITE sip:[email protected] SIP/2.0\n',
  9. 'Via: SIP/2.0/UDP [host];branch=123456\n',
  10. 'Content-Type: application/sdp\n\n',
  11. ];
  12. const sdp = [
  13. 'v=0\n',
  14. 'o=alice 2890844526 2890844526 IN IP4 [host]\n',
  15. 's=\n',
  16. 'c=IN IP4 [host]\n',
  17. 't=0 0\n',
  18. 'm=audio 49170 RTP/AVP 0\n',
  19. 'a=rtpmap:0 PCMU/8000\n',
  20. 'm=video 51372 RTP/AVP 31\n',
  21. 'a=rtpmap:31 H261/90000\n',
  22. 'm=video 53000 RTP/AVP 32\n',
  23. 'a=rtpmap:32 MPV/90000\n\n',
  24. ];
  25. function mockReadableStream() {
  26. return new ReadableStream({
  27. async start(controller) {
  28. for (const chunk of sipHeaders.concat(sdp)) {
  29. await new Promise((resolve) => setTimeout(resolve, 100));
  30. controller.enqueue(new TextEncoder().encode(chunk));
  31. }
  32. controller.close();
  33. },
  34. });
  35. }
  36. const lines = ref<string[]>([]);
  37. async function readStream() {
  38. // 🌟 Read the stream
  39. for await (const chunk of XStream({
  40. readableStream: mockReadableStream(),
  41. transformStream: new TransformStream<string, string>({
  42. transform(chunk, controller) {
  43. controller.enqueue(chunk);
  44. },
  45. }),
  46. })) {
  47. lines.value = [...lines.value, chunk];
  48. }
  49. }
  50. defineRender(() => {
  51. return (
  52. <Flex gap={8}>
  53. <div>
  54. <Button type="primary" onClick={readStream} style={{ marginBottom: 16 }}>
  55. Mock Custom Protocol - SIP
  56. </Button>
  57. </div>
  58. {/* -------------- Log -------------- */}
  59. <div>
  60. <ThoughtChain
  61. items={
  62. lines.value.length
  63. ? [
  64. {
  65. title: 'Mock Custom Protocol - Log',
  66. status: 'success',
  67. icon: <TagsOutlined />,
  68. content: (
  69. <pre style={{ overflow: 'scroll' }}>
  70. <code>{lines.value.join('')}</code>
  71. </pre>
  72. ),
  73. },
  74. ]
  75. : []
  76. }
  77. />
  78. </div>
  79. </Flex>
  80. )
  81. });
  82. </script>