1 00:00:00,400 --> 00:00:01,790 ‫So let's discuss, 2 00:00:01,790 --> 00:00:04,930 ‫WebSocket APIs with API gateway. 3 00:00:04,930 --> 00:00:06,370 ‫So what is WebSockets? 4 00:00:06,370 --> 00:00:07,670 ‫WebSocket, anytime you see it, 5 00:00:07,670 --> 00:00:11,040 ‫it means that there is a two way interactive communication 6 00:00:11,040 --> 00:00:13,900 ‫between the user's browser and a server. 7 00:00:13,900 --> 00:00:15,540 ‫And it's two-way because the server, 8 00:00:15,540 --> 00:00:18,800 ‫it can choose to push back information to the client 9 00:00:18,800 --> 00:00:20,600 ‫without having the clients 10 00:00:20,600 --> 00:00:24,150 ‫making a request to the server, okay? 11 00:00:24,150 --> 00:00:28,000 ‫So this enables stateful application use cases. 12 00:00:28,000 --> 00:00:30,830 ‫And so WebSocket APIs are often going to be used 13 00:00:30,830 --> 00:00:32,780 ‫in real time applications 14 00:00:32,780 --> 00:00:36,250 ‫such as chat applications, collaboration platforms, 15 00:00:36,250 --> 00:00:39,690 ‫multiplayer games and financial trading platforms. 16 00:00:39,690 --> 00:00:42,610 ‫So in the context of a chat application, 17 00:00:42,610 --> 00:00:44,470 ‫the client is going to connect 18 00:00:44,470 --> 00:00:47,320 ‫to a WebSocket API on API gateway 19 00:00:47,320 --> 00:00:50,310 ‫and is going to establish a persistent connection. 20 00:00:50,310 --> 00:00:52,515 ‫So there's not multiple connections, 21 00:00:52,515 --> 00:00:54,640 ‫it's just our connection is open 22 00:00:54,640 --> 00:00:57,500 ‫and the API gateway is connected to the clients. 23 00:00:57,500 --> 00:00:59,120 ‫Then on the first connection 24 00:00:59,120 --> 00:01:02,140 ‫there's going to be a Lambda function called onConnect. 25 00:01:02,140 --> 00:01:03,330 ‫There's going to be invoked 26 00:01:03,330 --> 00:01:04,470 ‫and you can do whatever you want 27 00:01:04,470 --> 00:01:07,590 ‫such as persisting the connection ID into DynamoDB 28 00:01:07,590 --> 00:01:10,300 ‫and we'll see this in details in the next slides. 29 00:01:10,300 --> 00:01:13,470 ‫Then whenever the client chooses to send a message 30 00:01:13,470 --> 00:01:15,370 ‫over this persistent connection, 31 00:01:15,370 --> 00:01:18,944 ‫it can invoke a new Lambda function called sendMessage. 32 00:01:18,944 --> 00:01:21,620 ‫And then finally, when the client has sent many messages 33 00:01:21,620 --> 00:01:22,880 ‫and want to disconnect, 34 00:01:22,880 --> 00:01:25,354 ‫you will be sending a message to the Lambda function, 35 00:01:25,354 --> 00:01:26,760 ‫onDisconnect. 36 00:01:26,760 --> 00:01:30,000 ‫So we can work with any kind of integration 37 00:01:30,000 --> 00:01:31,800 ‫API gateway has in the backend. 38 00:01:31,800 --> 00:01:32,850 ‫It could be Lambda functions, 39 00:01:32,850 --> 00:01:34,140 ‫it could be DynamoDB tables, 40 00:01:34,140 --> 00:01:36,530 ‫or HTTP endpoints or whatever you want, okay? 41 00:01:36,530 --> 00:01:38,650 ‫The idea is that there's a WebSocket API. 42 00:01:38,650 --> 00:01:39,940 ‫So what I'm not showing in this graph 43 00:01:39,940 --> 00:01:42,050 ‫is how to send data back to the clients. 44 00:01:42,050 --> 00:01:44,170 ‫But I will be showing this to you right now in the slides 45 00:01:44,170 --> 00:01:46,880 ‫as we go over the details over how WebSockets works 46 00:01:46,880 --> 00:01:47,930 ‫because I think it is important to you 47 00:01:47,930 --> 00:01:49,500 ‫to understand this, 48 00:01:49,500 --> 00:01:51,530 ‫to understand the questions of the exam. 49 00:01:51,530 --> 00:01:55,830 ‫So there's a WebSocket URL that start with wss, 50 00:01:55,830 --> 00:01:57,780 ‫it's an encrypted WebSocket URL. 51 00:01:57,780 --> 00:02:00,017 ‫And it looks like there's some unique ID, 52 00:02:00,017 --> 00:02:05,017 ‫.execute-api.region.amazonaws.com/the stage name. 53 00:02:05,290 --> 00:02:07,860 ‫So this is when you deployed your WebSocket API. 54 00:02:07,860 --> 00:02:09,260 ‫So the client is going to connect 55 00:02:09,260 --> 00:02:11,050 ‫to your WebSocket API gateway 56 00:02:11,050 --> 00:02:13,780 ‫and establish a persistent connection into it 57 00:02:13,780 --> 00:02:16,440 ‫which is going to invoke the Lambda function 58 00:02:16,440 --> 00:02:18,330 ‫and perform a connection ID. 59 00:02:18,330 --> 00:02:21,300 ‫And the connection ID is going to remain persistent 60 00:02:21,300 --> 00:02:25,090 ‫as long as the client is connected to the API gateway. 61 00:02:25,090 --> 00:02:26,610 ‫Then the connection ID can be for example, 62 00:02:26,610 --> 00:02:28,580 ‫persistent into Amazon DynamoDB 63 00:02:28,580 --> 00:02:29,770 ‫to store some metadata 64 00:02:29,770 --> 00:02:32,780 ‫around the, what, who the user is for example. 65 00:02:32,780 --> 00:02:36,840 ‫Then the client wants to send some messages to the server. 66 00:02:36,840 --> 00:02:38,790 ‫So is going to use the same URL I just gave you, 67 00:02:38,790 --> 00:02:40,410 ‫some dummy data in here. 68 00:02:40,410 --> 00:02:43,510 ‫And is going to send messages over the persistent connection 69 00:02:43,510 --> 00:02:44,870 ‫into the WebSocket API 70 00:02:44,870 --> 00:02:47,410 ‫and these messages are called frames. 71 00:02:47,410 --> 00:02:50,450 ‫So these frames are going to invoke a new Lambda function 72 00:02:50,450 --> 00:02:53,060 ‫and we'll see how the routing works in a few minutes. 73 00:02:53,060 --> 00:02:55,680 ‫But the connection ID is going to be the same. 74 00:02:55,680 --> 00:02:58,330 ‫So the Lambda function can interact with DynamoDB 75 00:02:58,330 --> 00:03:01,300 ‫to retrieve the user information based on the connection ID, 76 00:03:01,300 --> 00:03:02,160 ‫do whatever it wants 77 00:03:02,160 --> 00:03:05,800 ‫and maybe persist some messages back into DynamoDB. 78 00:03:05,800 --> 00:03:10,800 ‫And so if the clients chooses to send more messages 79 00:03:10,900 --> 00:03:13,210 ‫through the API gateway on the WebSocket API, 80 00:03:13,210 --> 00:03:15,420 ‫is just going to send it more frames 81 00:03:15,420 --> 00:03:17,320 ‫over the same connection. 82 00:03:17,320 --> 00:03:19,690 ‫And therefore the connection ID is not going to change 83 00:03:19,690 --> 00:03:21,230 ‫and it's going to be reused 84 00:03:21,230 --> 00:03:23,263 ‫when the Lambda function is invoked. 85 00:03:24,170 --> 00:03:27,140 ‫Now, how does the server, 86 00:03:27,140 --> 00:03:28,610 ‫our API gateway 87 00:03:28,610 --> 00:03:30,330 ‫communicate back to the clients 88 00:03:30,330 --> 00:03:32,320 ‫without the client making a request? 89 00:03:32,320 --> 00:03:35,040 ‫So again, we use the same WebSocket URL 90 00:03:35,040 --> 00:03:37,270 ‫and we do the same thing as sending messages 91 00:03:37,270 --> 00:03:39,710 ‫but now we want to get some data back. 92 00:03:39,710 --> 00:03:42,810 ‫And there is when you have a API gateway, 93 00:03:42,810 --> 00:03:45,670 ‫a connection URL callback 94 00:03:45,670 --> 00:03:47,220 ‫and it looks like this, 95 00:03:47,220 --> 00:03:51,133 ‫it looks just like the URL but slash adds connections, 96 00:03:51,133 --> 00:03:51,966 ‫/connectionid. 97 00:03:52,820 --> 00:03:55,630 ‫And if a Lambda function or whatever, 98 00:03:55,630 --> 00:03:57,820 ‫makes an HTTP post that is signed 99 00:03:57,820 --> 00:03:59,720 ‫using IAM Sig v4, 100 00:03:59,720 --> 00:04:01,690 ‫to this connection URL callback 101 00:04:01,690 --> 00:04:04,950 ‫by specifying the connection ID of the clients, 102 00:04:04,950 --> 00:04:06,940 ‫it is going to send back a message 103 00:04:06,940 --> 00:04:09,390 ‫from the API gateway into the client. 104 00:04:09,390 --> 00:04:11,850 ‫And this allows for two way communication 105 00:04:12,840 --> 00:04:14,370 ‫which explains how you can obviously 106 00:04:14,370 --> 00:04:15,870 ‫set up a chat application 107 00:04:15,870 --> 00:04:17,410 ‫because you can choose send messages 108 00:04:17,410 --> 00:04:19,920 ‫but also receive messages. 109 00:04:19,920 --> 00:04:23,550 ‫Now, for the operations of this URL, 110 00:04:23,550 --> 00:04:27,220 ‫the very specific, /connectionsid URL 111 00:04:27,220 --> 00:04:30,910 ‫you can do a post to send back a message from the server 112 00:04:30,910 --> 00:04:33,340 ‫to the connected WebSocket clients. 113 00:04:33,340 --> 00:04:36,140 ‫You can do a GET to get the latest connection status 114 00:04:36,140 --> 00:04:38,380 ‫of the connected WebSocket clients 115 00:04:38,380 --> 00:04:41,020 ‫and DELETE if you want it to disconnect the client 116 00:04:41,020 --> 00:04:42,520 ‫from the WebSocket connection. 117 00:04:43,530 --> 00:04:46,190 ‫Finally, how does the client know 118 00:04:46,190 --> 00:04:47,580 ‫which Lambda function to invoke 119 00:04:47,580 --> 00:04:49,120 ‫or which backend to invoke? 120 00:04:49,120 --> 00:04:51,710 ‫In WebSocket, there's a concept of routing. 121 00:04:51,710 --> 00:04:54,550 ‫So the incoming JSON messages are going to be routed 122 00:04:54,550 --> 00:04:56,220 ‫to a different backend. 123 00:04:56,220 --> 00:04:57,573 ‫And if you don't specify your route, 124 00:04:57,573 --> 00:05:00,410 ‫it's going to be sent to the default route. 125 00:05:00,410 --> 00:05:01,490 ‫So you can select, 126 00:05:01,490 --> 00:05:03,670 ‫you can create a route selection expression 127 00:05:03,670 --> 00:05:06,020 ‫to select the field on the JSON to route from. 128 00:05:06,020 --> 00:05:07,980 ‫So let's go through a concrete example. 129 00:05:07,980 --> 00:05:10,430 ‫So say we, the incoming data from the clients 130 00:05:10,430 --> 00:05:12,400 ‫into our API looks like this, 131 00:05:12,400 --> 00:05:13,390 ‫the service is chat, 132 00:05:13,390 --> 00:05:14,900 ‫the action is join 133 00:05:14,900 --> 00:05:18,790 ‫and the data is room, room1234. 134 00:05:18,790 --> 00:05:20,880 ‫Then we have a Route Key Table 135 00:05:20,880 --> 00:05:23,090 ‫that we define at the API gateway level. 136 00:05:23,090 --> 00:05:25,800 ‫Where we define connect, disconnect, default 137 00:05:25,800 --> 00:05:27,340 ‫which are mandatory routes 138 00:05:27,340 --> 00:05:30,140 ‫and then our customer routes:join, quit, delete, 139 00:05:30,140 --> 00:05:31,510 ‫et cetera, et cetera. 140 00:05:31,510 --> 00:05:35,389 ‫If we specify the sample expression to API gateway, 141 00:05:35,389 --> 00:05:39,440 ‫$request.body.action, 142 00:05:39,440 --> 00:05:41,990 ‫it is going to look at the action field 143 00:05:41,990 --> 00:05:44,010 ‫of the incoming data 144 00:05:44,010 --> 00:05:46,140 ‫which currently says join. 145 00:05:46,140 --> 00:05:49,730 ‫So the result of this expression is going to be evaluated 146 00:05:49,730 --> 00:05:52,520 ‫against the Route Key Table available in the API gateway. 147 00:05:52,520 --> 00:05:55,550 ‫And we see that the join route does exist. 148 00:05:55,550 --> 00:05:57,220 ‫And so therefore the API gateway 149 00:05:57,220 --> 00:06:00,530 ‫knows that this route is connected to a specific backend 150 00:06:00,530 --> 00:06:02,200 ‫and that could be a Lambda function 151 00:06:02,200 --> 00:06:05,600 ‫or anything else that API gateway integrates with. 152 00:06:05,600 --> 00:06:07,770 ‫And in case there is no route being matched 153 00:06:07,770 --> 00:06:10,270 ‫then it's going to go into the default route. 154 00:06:10,270 --> 00:06:12,010 ‫So that's it for how WebSocket APIs work. 155 00:06:12,010 --> 00:06:13,870 ‫I give you way more information 156 00:06:13,870 --> 00:06:15,440 ‫than what you need going into the exam 157 00:06:15,440 --> 00:06:17,600 ‫but I think it is very important for you to understand 158 00:06:17,600 --> 00:06:20,120 ‫how this works at a high level. 159 00:06:20,120 --> 00:06:21,760 ‫And so from an exam perspective, 160 00:06:21,760 --> 00:06:25,720 ‫just remember WebSocket APIs is for two-way communication 161 00:06:25,720 --> 00:06:28,020 ‫and the routing you need to understand it. 162 00:06:28,020 --> 00:06:29,290 ‫The routing is used 163 00:06:29,290 --> 00:06:32,300 ‫to make sure that you can route to a specific backend 164 00:06:32,300 --> 00:06:34,590 ‫based on the routing expression 165 00:06:34,590 --> 00:06:37,240 ‫because the connection is already open 166 00:06:37,240 --> 00:06:40,840 ‫and the routing should be part of the incoming data message. 167 00:06:40,840 --> 00:06:41,750 ‫So that's it. 168 00:06:41,750 --> 00:06:44,600 ‫I hope this helps and I will see you in the next lecture.