1 00:00:00,400 --> 00:00:06,550 All right, now let's take a look at the practical example where streams come in handy now. 2 00:00:06,610 --> 00:00:10,110 Again, this is going to be one of those videos where you don't have to go long. 3 00:00:10,420 --> 00:00:15,070 You can just sit back and relax and see how I struggle. 4 00:00:15,430 --> 00:00:19,510 And first, what I would want is to make it even a bigger fall. 5 00:00:19,780 --> 00:00:22,500 So remember, these 15 create big file. 6 00:00:22,960 --> 00:00:25,240 I believe I had 10 iterations. 7 00:00:25,240 --> 00:00:25,530 Right. 8 00:00:25,810 --> 00:00:29,110 So I'm going to add one more meaning. 9 00:00:29,110 --> 00:00:30,580 I'll add one more zero. 10 00:00:30,770 --> 00:00:32,960 I'll stop my server right now. 11 00:00:32,980 --> 00:00:34,310 Again, this is optional. 12 00:00:34,330 --> 00:00:35,410 You don't have to do that. 13 00:00:35,650 --> 00:00:37,450 And I'll remove the big file. 14 00:00:38,610 --> 00:00:46,830 Like so and then I'll run one more time, the file with narrowed and then of course this file is going 15 00:00:46,830 --> 00:00:47,740 to be way bigger. 16 00:00:48,210 --> 00:00:51,180 So let me now get my folder just shook as that. 17 00:00:51,660 --> 00:00:53,240 And I'm looking for content. 18 00:00:53,250 --> 00:00:56,920 And now the big file is one point eight megs. 19 00:00:57,470 --> 00:01:02,700 Now, once I have the big file, I'll go with NPM start. 20 00:01:02,700 --> 00:01:04,800 At the moment I just have an extreme example. 21 00:01:05,190 --> 00:01:11,640 But if you want to see the whole code, just take a look at the file number 17 and our again, we're 22 00:01:11,640 --> 00:01:16,520 creating a server and I'm just using the read file method. 23 00:01:16,530 --> 00:01:24,360 I'm looking for big texte the encoding as UTF eight and then I just place my variable, my text one 24 00:01:24,660 --> 00:01:28,110 into her eyes, dart and method. 25 00:01:28,470 --> 00:01:36,710 And effectively I'm just sending my big text file and let me restart the server here. 26 00:01:36,990 --> 00:01:40,810 So let me go with NPM start right now. 27 00:01:40,830 --> 00:01:46,320 So let me select everything from this file and copy and paste. 28 00:01:46,890 --> 00:01:55,080 And if we navigate to localhost five thousand we should see a bunch of Hello World. 29 00:01:55,650 --> 00:02:02,430 Now the problem with this setup is following where if I go to a developer tools and if I take a look 30 00:02:02,430 --> 00:02:04,410 at the network and if I refresh. 31 00:02:04,860 --> 00:02:07,580 Yep, this request was successful. 32 00:02:08,100 --> 00:02:09,419 Take a look at the size. 33 00:02:09,840 --> 00:02:16,310 They think it is the smartest thing to send these type of files over the wire. 34 00:02:16,800 --> 00:02:22,830 And of course, this is just going to make it very difficult to all your users because you're just sending 35 00:02:23,040 --> 00:02:25,690 large chunks of data effectively. 36 00:02:25,710 --> 00:02:27,000 I'm sending the whole file. 37 00:02:27,390 --> 00:02:30,740 And more specifically, if I click, check it out. 38 00:02:30,750 --> 00:02:32,120 So I have the request. 39 00:02:32,120 --> 00:02:34,800 The URL that is geared, the method is get. 40 00:02:35,220 --> 00:02:40,560 Now, as you can see, the content length is my one point eight megs. 41 00:02:40,880 --> 00:02:41,280 Right. 42 00:02:41,850 --> 00:02:49,530 And you'll see in a second that once we refactor this to read stream method, that we're sending data 43 00:02:49,530 --> 00:02:50,670 in the chunks. 44 00:02:50,670 --> 00:02:56,040 And again, the best way to see that is by looking at the headers where at the moment I can see the 45 00:02:56,220 --> 00:02:57,000 content length. 46 00:02:57,270 --> 00:03:00,030 And that one is that one point eight megs. 47 00:03:00,240 --> 00:03:04,300 But once we refactor that, the setup is going to be different. 48 00:03:04,590 --> 00:03:06,720 So at the moment I have this text. 49 00:03:06,960 --> 00:03:09,750 I'm accessing that by read file sync. 50 00:03:09,930 --> 00:03:14,160 So come on out and let's set it up with our create or stream. 51 00:03:14,490 --> 00:03:22,110 So I'll go const and I'll call this file stream and this is going to be equal to FS and then create 52 00:03:22,110 --> 00:03:22,950 a read stream. 53 00:03:23,220 --> 00:03:30,740 Now use the same address so I'll use the same path and then I'll use the same encoding as well. 54 00:03:31,170 --> 00:03:33,080 So let's go with UTF eight. 55 00:03:33,450 --> 00:03:34,700 OK, awesome. 56 00:03:34,980 --> 00:03:42,720 And once we start stream, remember we have access to two events file stream on and of course I'm going 57 00:03:42,720 --> 00:03:49,670 to be looking for the open and I'll have my callback function and I'll set that functionality up in 58 00:03:49,680 --> 00:03:50,070 second. 59 00:03:50,280 --> 00:03:52,380 And the second one, of course, is the error. 60 00:03:52,740 --> 00:03:55,920 So I'll go with file stream and then on. 61 00:03:56,280 --> 00:03:59,580 And again, we're looking for the event by the name of error. 62 00:03:59,850 --> 00:04:06,750 And then in our callback function, we can access the error and I'll simply pass it in in my response. 63 00:04:06,750 --> 00:04:12,330 So if there is an error, I'll just grab her from my parameter and pass it in. 64 00:04:12,720 --> 00:04:19,709 Now as far as the open here, instead of setting it equal to instead of going or as that and and then 65 00:04:19,709 --> 00:04:27,960 text file stream also have the pipe method so we can go file stream and then pipe and what the pipe 66 00:04:27,960 --> 00:04:32,730 is doing, it is pushing from the right stream into right stream. 67 00:04:33,000 --> 00:04:41,070 So you can imagine that if we can read data in chunks, we can also write data in chunks and what happens 68 00:04:41,070 --> 00:04:45,840 under the response object can be set up as a writable stream. 69 00:04:46,050 --> 00:04:47,520 So we have our file stream. 70 00:04:47,520 --> 00:04:48,750 So that's our stream. 71 00:04:48,930 --> 00:04:50,490 We have a method of pipe. 72 00:04:50,760 --> 00:04:54,030 So we're piping this into a writable stream. 73 00:04:54,220 --> 00:04:57,780 And of course I'll pass in my response object. 74 00:04:58,050 --> 00:05:03,360 And if we go back to the browser and if we refresh now, notice something interesting. 75 00:05:03,510 --> 00:05:09,390 Yeah, still same request to localhost five thousand, still same size. 76 00:05:09,390 --> 00:05:17,820 But if I take a look at the headers now, I can see that my response headers are chunked. 77 00:05:18,180 --> 00:05:24,360 So instead of sending our file back in one large instance, we're sending it back in chunks.