Respond With a ReadableStream in MSW
You can send any data from your response resolvers. Let's implement a video streaming functionality by responding with a ReadableStream with Mock Service Worker. As a cherry on top, you will learn how to transform that video stream to inject server-side latency and see how our application's player handles it.
Instructor: [0:04] When a user starts watching a movie, our application creates a custom media source object, fetches the actual movie stream from a third-party endpoint, and displays it to the user. We can get full control over that video stream with MSW. In our handlers, create a new request handler for the video stream endpoint.
[0:22] Let's fetch a placeholder video from an existing API. Finally, return that videoResponse as is. Since MSW operates with the standard Fetch API request and response instances, we don't have to wrap this videoResponse in the HTTPResponse provided by the library, because all we want to do is send it to the client as is.
[0:41] If we play any movie now, we will see that video stream from our request handler right in the application's player. This way we can develop and test any streaming-related logic in the UI, but we can do even more. Since we have full control over how this video stream is sent to the client, let's transform it a little.
[1:01] First, get the reference to the original readable stream of the videoResponse. Then create a new transform stream called latencyStream. We need to describe the start method for it to work correctly, and the transform method that will transform every chunk of the stream.
[1:21] As the name implies, let's add some latency to the latencyStream. We can do that by converting the transform method to be async and awaiting the delay promise from MSW before queuing each chunk of the stream.
[1:33] What's left is to respond with the modified stream. We will replace the original response with a new HTTPResponse instance from MSW. As the body of this response, take the original video stream and pipe it through the latencyStream using the pipeThrough method.
[1:48] The pipeThrough method is a standard method available on any readable stream in JavaScript. It will take the original stream and pass it through a transformation stream that will inject delay between every written chunk. Finally, forward the original videoResponse object as the second argument to our mocked response to inherit its status code and headers.
[2:08] By piping the video through the latencyStream we can see stuttering between the video chunks as it plays. This is the delay function from our latency stream creating a server-side delay.