1 00:00:00,150 --> 00:00:03,620 ‫So let's create a WebSocket API, for our API Gateway. 2 00:00:03,620 --> 00:00:06,410 ‫So first let's go into the Lambda function, 3 00:00:06,410 --> 00:00:08,280 ‫and then we go into functions. 4 00:00:08,280 --> 00:00:11,160 ‫And we're going to create a function from 5 00:00:11,160 --> 00:00:13,290 ‫the serverless app repository. 6 00:00:13,290 --> 00:00:15,500 ‫So to just use an application that is already 7 00:00:15,500 --> 00:00:16,720 ‫well configured. 8 00:00:16,720 --> 00:00:20,110 ‫We'll type in WebSockets, and then we'll tick the box. 9 00:00:20,110 --> 00:00:22,740 ‫That'll show the apps to create custom IAM roles 10 00:00:22,740 --> 00:00:24,130 ‫and resource policies. 11 00:00:24,130 --> 00:00:28,520 ‫And we have 1 called, simple-websockets-chat-app. 12 00:00:28,520 --> 00:00:31,620 ‫Okay? So this was created by, it was themselves. 13 00:00:31,620 --> 00:00:33,070 ‫The API Gateway Team. 14 00:00:33,070 --> 00:00:35,730 ‫And we're going to deploy this application. 15 00:00:35,730 --> 00:00:38,030 ‫And this will create a few of the functions. 16 00:00:38,030 --> 00:00:39,900 ‫One called onConnect, onDisconnect, 17 00:00:39,900 --> 00:00:42,000 ‫and one called sendMessage. 18 00:00:42,000 --> 00:00:43,780 ‫So the application name is here, 19 00:00:43,780 --> 00:00:45,980 ‫and the table name and DynamoDB to store 20 00:00:45,980 --> 00:00:48,250 ‫the connection identifiers for each clients. 21 00:00:48,250 --> 00:00:51,030 ‫Is going to be called simplechat_connections. 22 00:00:51,030 --> 00:00:53,660 ‫So I acknowledged that this will create IAM roles 23 00:00:53,660 --> 00:00:55,050 ‫and resource policies. 24 00:00:55,050 --> 00:00:57,300 ‫And I will deploy this. 25 00:00:57,300 --> 00:01:00,220 ‫So let's wait for this application to be deployed. 26 00:01:00,220 --> 00:01:03,360 ‫This is going in the backend use a CloudFormation templates, 27 00:01:03,360 --> 00:01:05,440 ‫to deploy our API Gateway. 28 00:01:05,440 --> 00:01:08,110 ‫Using WebSockets, as well as a bunch of them, the functions. 29 00:01:08,110 --> 00:01:10,690 ‫So let me wait a little bit and get back to you. 30 00:01:10,690 --> 00:01:13,050 ‫Okay. So our application is now deployed. 31 00:01:13,050 --> 00:01:15,870 ‫And we have on DynamoDB table, that will contain 32 00:01:15,870 --> 00:01:16,703 ‫the connections. 33 00:01:16,703 --> 00:01:17,536 ‫So we'll keep it open. 34 00:01:17,536 --> 00:01:18,430 ‫And right now there's nothing, 35 00:01:18,430 --> 00:01:20,100 ‫because there is no connection. 36 00:01:20,100 --> 00:01:23,440 ‫Then we have a API Gateway Deployments, 37 00:01:23,440 --> 00:01:25,000 ‫that we'll have a look at in a second. 38 00:01:25,000 --> 00:01:26,390 ‫And we have 3 Lambda functions. 39 00:01:26,390 --> 00:01:28,433 ‫We have the OnConnectFunction, OnDisconnectFunction, 40 00:01:29,750 --> 00:01:31,240 ‫and SendMessageFunction. 41 00:01:31,240 --> 00:01:34,080 ‫So, if you're curious, you can look at what they're doing 42 00:01:34,080 --> 00:01:36,100 ‫in details. But it's not very important. 43 00:01:36,100 --> 00:01:39,420 ‫But the OnConnectFunction, will use some code. 44 00:01:39,420 --> 00:01:41,350 ‫And it will add the connection detail 45 00:01:41,350 --> 00:01:43,350 ‫into the DynamoDB table. 46 00:01:43,350 --> 00:01:45,630 ‫So, we'll see the result of it in a second. 47 00:01:45,630 --> 00:01:46,760 ‫Okay? 48 00:01:46,760 --> 00:01:49,440 ‫And then let's have a look at the API Gateway itself. 49 00:01:49,440 --> 00:01:51,733 ‫So let's open API Gateway. 50 00:01:56,250 --> 00:01:58,900 ‫And we have a SimpleChatWebSocket application. 51 00:01:58,900 --> 00:02:02,103 ‫The protocol is WebSocket as we can see, I can click on it. 52 00:02:03,820 --> 00:02:05,670 ‫And here we have some very important things. 53 00:02:05,670 --> 00:02:10,350 ‫So, the Route Selection Expression is request.buddy.action. 54 00:02:10,350 --> 00:02:12,860 ‫So we'll have to specify adjacent, that will contain 55 00:02:12,860 --> 00:02:14,210 ‫an action key. 56 00:02:14,210 --> 00:02:16,630 ‫And this action, will be routing to 57 00:02:16,630 --> 00:02:17,590 ‫one of these specific routes. 58 00:02:17,590 --> 00:02:20,490 ‫So, OnConnect, it will go to the Lambda function 59 00:02:20,490 --> 00:02:21,323 ‫called connect. 60 00:02:21,323 --> 00:02:23,280 ‫OnDisconnect, you will go to the Lambda function 61 00:02:23,280 --> 00:02:24,510 ‫called disconnect. 62 00:02:24,510 --> 00:02:25,730 ‫If we send, a send message. 63 00:02:25,730 --> 00:02:28,180 ‫You will go to the Lambda function named sendmessage. 64 00:02:28,180 --> 00:02:31,480 ‫And then if it doesn't go anywhere, there is a default route 65 00:02:31,480 --> 00:02:33,500 ‫that is not configured right now. 66 00:02:33,500 --> 00:02:34,333 ‫So we're good to go. 67 00:02:34,333 --> 00:02:37,970 ‫Now let's try ahead, and test this WebSocket API. 68 00:02:37,970 --> 00:02:42,100 ‫As we can see, the Route Selection Expression is important. 69 00:02:42,100 --> 00:02:44,590 ‫And is something that comes up at the exam. 70 00:02:44,590 --> 00:02:47,000 ‫So to test it, we're going to open CloudShell. 71 00:02:47,000 --> 00:02:48,920 ‫Because it is easy for us to have an environment 72 00:02:48,920 --> 00:02:51,650 ‫ready to run, and we can have multiple tabs. 73 00:02:51,650 --> 00:02:54,320 ‫So on CloudShell, we're going to install 74 00:02:54,320 --> 00:02:57,060 ‫a program called wscat. 75 00:02:57,060 --> 00:03:00,350 ‫Which is used to test WebSocket APIs. 76 00:03:00,350 --> 00:03:04,570 ‫And by the way, how do we find our WebSocket API URL? 77 00:03:04,570 --> 00:03:07,560 ‫Well, if you go into Stages, and Prod. 78 00:03:07,560 --> 00:03:10,200 ‫We can see that there is a WebSocket API 79 00:03:10,200 --> 00:03:12,180 ‫to which we can connect to. 80 00:03:12,180 --> 00:03:15,650 ‫As well as the connection URL, to send back some data 81 00:03:15,650 --> 00:03:19,170 ‫to the clients that are connected into our API. 82 00:03:19,170 --> 00:03:22,263 ‫So let's go into CloudTrail, and wait for it to be ready. 83 00:03:23,130 --> 00:03:25,370 ‫Okay. So my CloudShell is ready, and I'm going to type 84 00:03:25,370 --> 00:03:29,140 ‫sudo npm install -g wscat. 85 00:03:29,140 --> 00:03:32,130 ‫And it's going to install a way for us to talk 86 00:03:32,130 --> 00:03:35,980 ‫to a WebSocket API directly, from the command line. 87 00:03:35,980 --> 00:03:36,813 ‫Okay? 88 00:03:36,813 --> 00:03:38,480 ‫So, it is ready. 89 00:03:38,480 --> 00:03:42,380 ‫Now, we just have to run wscat -c to connect. 90 00:03:42,380 --> 00:03:45,780 ‫And then we need to provide the WebSocket API URL. 91 00:03:45,780 --> 00:03:47,610 ‫So let's go into here, we're going to 92 00:03:47,610 --> 00:03:49,980 ‫copy this entirely. 93 00:03:49,980 --> 00:03:52,800 ‫Paste it, and press enter. 94 00:03:52,800 --> 00:03:55,610 ‫So as soon as we press enter, we are connecting 95 00:03:55,610 --> 00:03:57,470 ‫to the WebSocket API. 96 00:03:57,470 --> 00:04:01,760 ‫And it went into the Lambda function called, OnConnect. 97 00:04:01,760 --> 00:04:03,140 ‫And it ran it. 98 00:04:03,140 --> 00:04:05,737 ‫And when it ran the OnConnectFunction, then it went 99 00:04:05,737 --> 00:04:07,380 ‫to DynamoDB table. 100 00:04:07,380 --> 00:04:10,670 ‫And it updated our DynamoDB table, with a connection ID. 101 00:04:10,670 --> 00:04:12,950 ‫And as you can see, there is a connection ID right here 102 00:04:12,950 --> 00:04:14,220 ‫that is being created. 103 00:04:14,220 --> 00:04:17,470 ‫And that is going to be persistent for as long as 104 00:04:17,470 --> 00:04:19,500 ‫my CloudShell is active. 105 00:04:19,500 --> 00:04:21,260 ‫If I do Control + C to quit. 106 00:04:21,260 --> 00:04:24,910 ‫This is going to run the OnDisconnectFunction. 107 00:04:24,910 --> 00:04:26,920 ‫And what it should do, is that it should clean up 108 00:04:26,920 --> 00:04:28,290 ‫disconnection ID right here. 109 00:04:28,290 --> 00:04:30,070 ‫So now, there's no more connection ID. 110 00:04:30,070 --> 00:04:32,240 ‫So the DynamoDB table, is going to contain a list 111 00:04:32,240 --> 00:04:35,270 ‫of all the connections that are opened into 112 00:04:35,270 --> 00:04:37,130 ‫our WebSocket API. 113 00:04:37,130 --> 00:04:39,150 ‫So, let's open it. 114 00:04:39,150 --> 00:04:42,680 ‫And in here, now I can send some messages. 115 00:04:42,680 --> 00:04:46,710 ‫So, we need to open the JSON message called action. 116 00:04:46,710 --> 00:04:48,440 ‫And the first key, is going to be "action". 117 00:04:48,440 --> 00:04:51,110 ‫And it's going to be "sendmessage". 118 00:04:51,110 --> 00:04:54,260 ‫And we do so, so that we can use the route expression 119 00:04:54,260 --> 00:04:55,200 ‫from the API Gateway. 120 00:04:55,200 --> 00:04:58,030 ‫So, let's go back into our API Gateway which is 121 00:04:58,030 --> 00:05:00,540 ‫right here. And go to the routes. 122 00:05:00,540 --> 00:05:03,920 ‫As you can see, the action key is being used to route 123 00:05:03,920 --> 00:05:06,990 ‫to the sendmessage Lambda function. 124 00:05:06,990 --> 00:05:09,950 ‫So we have to do "action", "sendmessage". 125 00:05:09,950 --> 00:05:14,707 ‫And then the "data" itself, is going to be "hello world!" 126 00:05:16,410 --> 00:05:17,790 ‫And save this. 127 00:05:17,790 --> 00:05:20,040 ‫So when I send it, as you can see I've sent a message 128 00:05:20,040 --> 00:05:21,280 ‫to my Lambda function. 129 00:05:21,280 --> 00:05:22,870 ‫And that just goes back to "hello world!". 130 00:05:22,870 --> 00:05:24,620 ‫From the server. 131 00:05:24,620 --> 00:05:27,200 ‫But actually, this was sent as a callback. 132 00:05:27,200 --> 00:05:29,180 ‫This is not a response from this. 133 00:05:29,180 --> 00:05:33,300 ‫This is the server itself, pushing data to the clients. 134 00:05:33,300 --> 00:05:35,390 ‫So, we can open a new tab. 135 00:05:35,390 --> 00:05:37,940 ‫And then we'll split it into columns. 136 00:05:37,940 --> 00:05:42,220 ‫So, to open a new tab, and I'm going to run wscat again. 137 00:05:42,220 --> 00:05:44,550 ‫So, let me just copy this command right here. 138 00:05:44,550 --> 00:05:47,143 ‫So we copy this, and paste it. 139 00:05:48,020 --> 00:05:50,210 ‫And we have a new client being connected. 140 00:05:50,210 --> 00:05:51,860 ‫And if you're going to the DynamoDB console, 141 00:05:51,860 --> 00:05:52,870 ‫and we refresh this. 142 00:05:52,870 --> 00:05:55,203 ‫We see 2 connection ID that are different. 143 00:05:56,240 --> 00:05:58,450 ‫And now the cool thing is that if I say, 144 00:05:58,450 --> 00:06:03,450 ‫I copy this message again, and maybe paste it again, 145 00:06:03,537 --> 00:06:06,760 ‫"hello world again!", and press enter. 146 00:06:06,760 --> 00:06:08,930 ‫As you can see now, I got "hello world again!" 147 00:06:08,930 --> 00:06:10,417 ‫on the left-hand side. But also I got 148 00:06:10,417 --> 00:06:12,290 ‫"hello world again!" on the right-hand side. 149 00:06:12,290 --> 00:06:15,610 ‫So as you can see, the server chose to push some data 150 00:06:15,610 --> 00:06:17,210 ‫into my client right here. 151 00:06:17,210 --> 00:06:21,183 ‫And again, I can split this into columns again. 152 00:06:22,120 --> 00:06:23,200 ‫To have a third tab. 153 00:06:23,200 --> 00:06:25,210 ‫Okay. So we have third tab now. 154 00:06:25,210 --> 00:06:27,115 ‫and I'm going to paste this. 155 00:06:27,115 --> 00:06:29,383 ‫And I'm going to paste the wscat command. 156 00:06:31,480 --> 00:06:32,680 ‫And connect. 157 00:06:32,680 --> 00:06:36,503 ‫So now we have 3 connections, in our DynamoDB table. 158 00:06:37,580 --> 00:06:40,650 ‫And anytime I would type a message from the client's. 159 00:06:40,650 --> 00:06:45,650 ‫So, this is "hello world from client 2!". 160 00:06:46,780 --> 00:06:48,970 ‫And type it, it's going to be sent and received 161 00:06:48,970 --> 00:06:52,280 ‫by all clients. So, we have effectively a chat application. 162 00:06:52,280 --> 00:06:54,960 ‫And if I do from client 3 again. 163 00:06:54,960 --> 00:06:56,860 ‫It is going to be sent and received by all the clients. 164 00:06:56,860 --> 00:06:58,680 ‫So all the clients here can chat. 165 00:06:58,680 --> 00:06:59,700 ‫And you can imagine now we see that, 166 00:06:59,700 --> 00:07:01,600 ‫there are different users in the real world. 167 00:07:01,600 --> 00:07:02,433 ‫And it's pretty cool now, 168 00:07:02,433 --> 00:07:06,370 ‫because things at the WebSocket API, we are pushing data 169 00:07:06,370 --> 00:07:08,810 ‫to the WebSocket API when we want to. 170 00:07:08,810 --> 00:07:11,210 ‫But every client, has a persistent connection 171 00:07:11,210 --> 00:07:12,810 ‫into the WebSocket API. 172 00:07:12,810 --> 00:07:15,030 ‫So that it can receive data from the server, 173 00:07:15,030 --> 00:07:16,440 ‫whenever we want to. 174 00:07:16,440 --> 00:07:19,560 ‫Using this connection URL. 175 00:07:19,560 --> 00:07:22,030 ‫That is right here. 176 00:07:22,030 --> 00:07:23,840 ‫And that is used by the Lambda function. 177 00:07:23,840 --> 00:07:25,000 ‫So I think that's pretty cool. 178 00:07:25,000 --> 00:07:26,010 ‫It's a good demo. 179 00:07:26,010 --> 00:07:30,170 ‫So I'm going to quit, all my command lines. 180 00:07:30,170 --> 00:07:33,520 ‫And then, I can just shut down my application 181 00:07:33,520 --> 00:07:34,830 ‫when I want to. 182 00:07:34,830 --> 00:07:38,073 ‫So to do so, I can go into CloudFormation. 183 00:07:42,150 --> 00:07:44,950 ‫And when I'm in CloudFormation, I can just find my stack 184 00:07:45,810 --> 00:07:46,643 ‫that has been created. 185 00:07:46,643 --> 00:07:50,360 ‫So this one, serverlessrepo-simple-websockets-chat-app. 186 00:07:50,360 --> 00:07:53,100 ‫And delete it, and we can clean up this hands on. 187 00:07:53,100 --> 00:07:54,320 ‫So that's it. I hope you liked it. 188 00:07:54,320 --> 00:07:56,510 ‫I hope you understand better, what is WebSocket now. 189 00:07:56,510 --> 00:07:58,270 ‫And how to use it with API Gateway. 190 00:07:58,270 --> 00:08:00,220 ‫And I will see you in the next lecture.