Working with the HTML5 network states
In the last video we explored the readyState in this one we will take a separate look at accessibility of data through the eye of the network. By the end of this video you will know how to deal with sudden drops in the network.
Video Transcript
00:00In the last video, we talked about the ready state.
00:04In this one, we're going to talk about the network state.
00:06And before that, I wanted to make it clear
00:08what is the difference between ready state and network state.
00:12Ready state's focus is really the video itself
00:15and what process the video is currently in,
00:19while the network state's focus
00:21is on the actual network communication connections
00:25currently.
00:26So before we even do anything, I'm
00:27going to jump into the JavaScript code again.
00:30And again, I'm just going to create a simple list
00:32of the different types of values that could come back.
00:36And I'm just going to copy it and just paste it
00:38right into our document so we could go through it together.
00:41So the network state property has four different attributes
00:45that could return.
00:46These values are numeric values between 0 and 3.
00:50The first value is network empty,
00:52which basically means that we haven't initialized anything
00:55yet.
00:56There isn't a network connection yet.
00:58A network connection wasn't established yet
01:00to try to fetch a video or a sound file.
01:04Well, the network idle means that we're already initialized,
01:07but we're not currently actively downloading anything.
01:10We're inactive.
01:11But we are initialized.
01:13We do have a connection to the network.
01:16The network loading, which is option 2, the value 2,
01:20number 2 coming back, means that we're currently
01:22downloading something.
01:24Well, the last option is network no source,
01:27meaning that it couldn't find the media
01:29or there is no source that was set in our media file.
01:33So if we go ahead and first start up our application
01:35and maybe start it off with a simple console.log
01:40and just see the value that's in our sound file,
01:43in our audio, I'm just going to output
01:45the value of network state.
01:49Going to save that.
01:50Go into our browser and just load
01:52our current new application.
01:54So I'm going to go into our source files.
01:55And if you don't have the source files,
01:57then you are welcome to come to zero2geek.com.
02:00And if you're one of our members, you
02:02could download the source files.
02:06So first of all, we're getting first fail to load resource.
02:09The requested URL basically means
02:11that we have some sort of spelling error in our file.
02:13So let me just fix that really quickly.
02:15So network dash state, network dash state.
02:20And you see it's 007 by mistake here and not 008.
02:23So I'm going to go right into our editor really quickly,
02:27find our file load, and just change it to eight.
02:29And this is, again, always a good practice of finding errors.
02:33So back into our browser, clicking on Refresh.
02:36And once I click on Refresh, we'll
02:37see the value that we're getting back
02:39is three, which basically means that there is no source that
02:44has been configured at that state.
02:46The reason why it's giving us that information when we first
02:48load our application, even though we did set a source,
02:52is basically because it didn't have enough time to process.
02:57So with that said, once we've seen that,
02:59let's start adding the different events.
03:00And let's talk about the different events
03:02that we could add to basically listen in on
03:05to the changes when something is happening to our network
03:08state.
03:09All right, so we'll start with the symbol
03:12start, which basically I'm going to add an event listener,
03:16just set everything up here.
03:19And the first event is going to be load start.
03:22And that basically happens whenever
03:24the loading of something just begins.
03:27In that case, again, I'm just going to call on network state
03:33change, all right?
03:34Or I'm going to call that function on network state
03:38change, we're going to get that event.
03:42And all I'm going to do is I'm going to update,
03:44I'm going to go to my console.log,
03:46and I'm going to output our event type
03:48so we know what triggered our event.
03:51And we'll also trigger out, we'll output our sound.networkstate.
03:58Once we've done that and we have the load start,
04:00the load start should return us the value of 2,
04:03basically network idle, the network idle configuration.
04:08So if I click on to refresh on Safari,
04:12we'll see that it's true.
04:14We get that load start.
04:15And when that load start happens,
04:17we're in 2, which is the network loading.
04:19Now again, just the same as we worked with the ready state,
04:22if we create this mega application,
04:25we probably would want to, at some point,
04:27to create some sort of a if statement
04:29and basically ask if our state is a current specific state.
04:33And the way we would do that is just set
04:35one of those specific elements.
04:39So if our element is loading, then we would do sending
04:43or we would do another thing.
04:45And we'll look into that again momentarily.
04:47So if that is equal, not just put those two values
04:50if those were equal, then we might
04:51want to do something specific.
04:53All right, so let's move on and look
04:55at the other events that happen.
04:58The next event that happened is called propgress,
05:02meaning it's already starting to load
05:04and it's now fetching information.
05:06The value that would come again would be 2
05:08because now we're actively downloading information.
05:11If I save that, go back into my browser,
05:14we should also get our fetching
05:16and we'll see that our progress
05:17and when we're in the progress,
05:19in our scenario, we move down to idle
05:22and the reason is because we're working
05:24not on a server, we're actually working locally.
05:26And as we're working locally,
05:28by the time it gets to it, it's already done loading.
05:30So we're back to the idle position.
05:33All right, so let's continue
05:34and make it a little bit more theoretical
05:36because right now we're not really on an active network
05:39but actually, so in this state and scenario,
05:41progress we could see could be one or two,
05:43but really in a live application, it would always be two.
05:47All right, so let's look at the next one.
05:48The next one is suspended.
05:53Now suspended is intentional change in direction.
05:57Whenever we suspend and it's basically meaning
06:01that we might have rebooted and maybe moved
06:03to a new sound file while the file was still being loaded,
06:07that would be a suspension.
06:08In that case, we would move into an idle position
06:11where nothing is happening at that given state.
06:16All right, so that wouldn't happen
06:17in case we ever suspend something.
06:19The next one we wanna talk about is abort.
06:22Abort is not an error, but it's a switch while loading.
06:26While suspend is actually,
06:28suspend wouldn't be the correct one.
06:29For suspended, it's actually when we suspend,
06:32when it's suspended, when there's nothing going on
06:34but an intentional, intentionally nothing is going on.
06:38While the next one is complementary and very similar
06:40and that's why I got a little bit confused
06:42on that one is abort.
06:44An abort is when we actively basically
06:47change its configuration.
06:49When we actively changing it, it's not an error
06:51but we're switching while we're loading.
06:54Next item would be whenever there is an error.
06:56So whenever there would be an error,
06:58we would have a network status change as well.
07:01In that scenario, we would probably move down
07:03from one to zero.
07:06I wanna talk about two more event types
07:08before we actually see it in action.
07:10So the next one would be emptied,
07:12which is really explicitly connected to an event.
07:16And that basically means anytime we move down to zero
07:18when we weren't in zero before, that would happen.
07:21That would usually happen when we switch a new load
07:24and we're loading something new.
07:26The next one is stalled,
07:28which again is very similar
07:30and does overlap with suspended and abort.
07:32But stalled is a little bit different
07:35because it's unexpected.
07:37So it's probably more connected to an error.
07:40It's basically when there's an unexpected delay
07:42happening in our network.
07:45So suddenly we just stopped loading
07:47and we move into idling.
07:49And when that happens,
07:50then we get that network error update.
07:53Well, it's not exactly an error, but that network switch.
07:56So let's look at it in action.
07:58So let's just take it our browser
07:59and click on refresh.
08:02And we'll see that when we're clicking on refresh,
08:04nothing really is going on.
08:05And the main reason is because literally
08:07we don't really have a network going on right now.
08:10So how about we pause this video for a second
08:12and I'll drop our video into a browser,
08:15actually our MP3 file, drop it into a network
08:18and then we could see what happens when it's in a network.
08:22Welcome back.
08:24All right, so at this stage,
08:25we're ready to change our path.