‫So let's create a WebSocket API, for our API Gateway.
‫So first let's go into the Lambda function,
‫and then we go into functions.
‫And we're going to create a function from
‫the serverless app repository.
‫So to just use an application that is already
‫well configured.
‫We'll type in WebSockets, and then we'll tick the box.
‫That'll show the apps to create custom IAM roles
‫and resource policies.
‫And we have 1 called, simple-websockets-chat-app.
‫Okay? So this was created by, it was themselves.
‫The API Gateway Team.
‫And we're going to deploy this application.
‫And this will create a few of the functions.
‫One called onConnect, onDisconnect,
‫and one called sendMessage.
‫So the application name is here,
‫and the table name and DynamoDB to store
‫the connection identifiers for each clients.
‫Is going to be called simplechat_connections.
‫So I acknowledged that this will create IAM roles
‫and resource policies.
‫And I will deploy this.
‫So let's wait for this application to be deployed.
‫This is going in the backend use a CloudFormation templates,
‫to deploy our API Gateway.
‫Using WebSockets, as well as a bunch of them, the functions.
‫So let me wait a little bit and get back to you.
‫Okay. So our application is now deployed.
‫And we have on DynamoDB table, that will contain
‫the connections.
‫So we'll keep it open.
‫And right now there's nothing,
‫because there is no connection.
‫Then we have a API Gateway Deployments,
‫that we'll have a look at in a second.
‫And we have 3 Lambda functions.
‫We have the OnConnectFunction, OnDisconnectFunction,
‫and SendMessageFunction.
‫So, if you're curious, you can look at what they're doing
‫in details. But it's not very important.
‫But the OnConnectFunction, will use some code.
‫And it will add the connection detail
‫into the DynamoDB table.
‫So, we'll see the result of it in a second.
‫Okay?
‫And then let's have a look at the API Gateway itself.
‫So let's open API Gateway.
‫And we have a SimpleChatWebSocket application.
‫The protocol is WebSocket as we can see, I can click on it.
‫And here we have some very important things.
‫So, the Route Selection Expression is request.buddy.action.
‫So we'll have to specify adjacent, that will contain
‫an action key.
‫And this action, will be routing to
‫one of these specific routes.
‫So, OnConnect, it will go to the Lambda function
‫called connect.
‫OnDisconnect, you will go to the Lambda function
‫called disconnect.
‫If we send, a send message.
‫You will go to the Lambda function named sendmessage.
‫And then if it doesn't go anywhere, there is a default route
‫that is not configured right now.
‫So we're good to go.
‫Now let's try ahead, and test this WebSocket API.
‫As we can see, the Route Selection Expression is important.
‫And is something that comes up at the exam.
‫So to test it, we're going to open CloudShell.
‫Because it is easy for us to have an environment
‫ready to run, and we can have multiple tabs.
‫So on CloudShell, we're going to install
‫a program called wscat.
‫Which is used to test WebSocket APIs.
‫And by the way, how do we find our WebSocket API URL?
‫Well, if you go into Stages, and Prod.
‫We can see that there is a WebSocket API
‫to which we can connect to.
‫As well as the connection URL, to send back some data
‫to the clients that are connected into our API.
‫So let's go into CloudTrail, and wait for it to be ready.
‫Okay. So my CloudShell is ready, and I'm going to type
‫sudo npm install -g wscat.
‫And it's going to install a way for us to talk
‫to a WebSocket API directly, from the command line.
‫Okay?
‫So, it is ready.
‫Now, we just have to run wscat -c to connect.
‫And then we need to provide the WebSocket API URL.
‫So let's go into here, we're going to
‫copy this entirely.
‫Paste it, and press enter.
‫So as soon as we press enter, we are connecting
‫to the WebSocket API.
‫And it went into the Lambda function called, OnConnect.
‫And it ran it.
‫And when it ran the OnConnectFunction, then it went
‫to DynamoDB table.
‫And it updated our DynamoDB table, with a connection ID.
‫And as you can see, there is a connection ID right here
‫that is being created.
‫And that is going to be persistent for as long as
‫my CloudShell is active.
‫If I do Control + C to quit.
‫This is going to run the OnDisconnectFunction.
‫And what it should do, is that it should clean up
‫disconnection ID right here.
‫So now, there's no more connection ID.
‫So the DynamoDB table, is going to contain a list
‫of all the connections that are opened into
‫our WebSocket API.
‫So, let's open it.
‫And in here, now I can send some messages.
‫So, we need to open the JSON message called action.
‫And the first key, is going to be "action".
‫And it's going to be "sendmessage".
‫And we do so, so that we can use the route expression
‫from the API Gateway.
‫So, let's go back into our API Gateway which is
‫right here. And go to the routes.
‫As you can see, the action key is being used to route
‫to the sendmessage Lambda function.
‫So we have to do "action", "sendmessage".
‫And then the "data" itself, is going to be "hello world!"
‫And save this.
‫So when I send it, as you can see I've sent a message
‫to my Lambda function.
‫And that just goes back to "hello world!".
‫From the server.
‫But actually, this was sent as a callback.
‫This is not a response from this.
‫This is the server itself, pushing data to the clients.
‫So, we can open a new tab.
‫And then we'll split it into columns.
‫So, to open a new tab, and I'm going to run wscat again.
‫So, let me just copy this command right here.
‫So we copy this, and paste it.
‫And we have a new client being connected.
‫And if you're going to the DynamoDB console,
‫and we refresh this.
‫We see 2 connection ID that are different.
‫And now the cool thing is that if I say,
‫I copy this message again, and maybe paste it again,
‫"hello world again!", and press enter.
‫As you can see now, I got "hello world again!"
‫on the left-hand side. But also I got
‫"hello world again!" on the right-hand side.
‫So as you can see, the server chose to push some data
‫into my client right here.
‫And again, I can split this into columns again.
‫To have a third tab.
‫Okay. So we have third tab now.
‫and I'm going to paste this.
‫And I'm going to paste the wscat command.
‫And connect.
‫So now we have 3 connections, in our DynamoDB table.
‫And anytime I would type a message from the client's.
‫So, this is "hello world from client 2!".
‫And type it, it's going to be sent and received
‫by all clients. So, we have effectively a chat application.
‫And if I do from client 3 again.
‫It is going to be sent and received by all the clients.
‫So all the clients here can chat.
‫And you can imagine now we see that,
‫there are different users in the real world.
‫And it's pretty cool now,
‫because things at the WebSocket API, we are pushing data
‫to the WebSocket API when we want to.
‫But every client, has a persistent connection
‫into the WebSocket API.
‫So that it can receive data from the server,
‫whenever we want to.
‫Using this connection URL.
‫That is right here.
‫And that is used by the Lambda function.
‫So I think that's pretty cool.
‫It's a good demo.
‫So I'm going to quit, all my command lines.
‫And then, I can just shut down my application
‫when I want to.
‫So to do so, I can go into CloudFormation.
‫And when I'm in CloudFormation, I can just find my stack
‫that has been created.
‫So this one, serverlessrepo-simple-websockets-chat-app.
‫And delete it, and we can clean up this hands on.
‫So that's it. I hope you liked it.
‫I hope you understand better, what is WebSocket now.
‫And how to use it with API Gateway.
‫And I will see you in the next lecture.