How to Create a WebSocket API using Amazon API Gateway and AWS Lambda - full tutorial 

Glad it was helpful and I hope the demo went well.

Happy to help!

You're welcome!

Thanks Rachelle, I'm really glad you found it useful

pro tip : you can watch movies on KaldroStream. Been using it for watching lots of of movies recently.

@Finn Callan yea, I've been watching on kaldrostream for years myself :)

@Finn Callan Definitely, I've been using kaldroStream for months myself :)

@Finn Callan yea, I've been using Kaldrostream for since december myself :D

Thanks Aaron!! It's amazing to get such good feedback.

Complete Coding You Da Man!! Don’t change a thing!! 10/10!! I’ve really been searching the depths of the net for such quality tutorials!! Everybody else’s videos take forever to get through because they use the GUI and explain other irrelevant stuff. Plus I use VS code. Let me know if I can help. Will be spreading the word about you videos!!

Getting used to indent formatted code is strange coming from JavaScript but you get used to it. Glad you found it all helpful. Not having to go into the console makes things so much quicker

Glad you enjoyed it!

You're very welcome! Hope you build something cool with this

Glad it was helpful!

Thanks. I struggled to find really well explained things on serverless when I was learning so now I make those videos to fill the gap

Glad it was helpful!

Thanks Yasir. Great idea. I'm looking at doing a short series on building a full-stack product with serverless.

Glad you liked it

You are very welcome!

Glad it was helpful!

@@CompleteCoding Hey ! I would like to know how to set up the endpoints ? In sls deploy i am getting an error

Thanks

Thanks Jaber. Glad you liked the video

Glad you liked it!

Sorry about that! Glad you still enjoyed it

Great tip! I use that when I'm developing wscat too. For this video it's easier just to show it on a browser.

Great suggestion!

My pleasure

Yes, you can add the same authorisers as you can add to a normal API Gateway endpoint. This includes API Keys, cognito, or custom lambda authorisers

No problem Jean

Glad you liked it

Yes, absolutely. You can use "serverless-offline" plugin to run the whole API offline (including the websocket). This is great as it makes it really easy to tweak and update your code when you're building it. Here's a link to how to set it up ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ul_85jfM0oo.html

No, there are no restrictions by default. If you've installed the package and required it into the lambda then it should just work. One thing with this is that the package uses promises. Just make sure that you're returning from the function after the promise has resolved. As soon as you return from an Async lambda, any promises that have not been resolved just get cancelled.

You could look into SNS to fire events from the EC2. This could then hit a Lambda which send the messages back to the customer via websocket (for browser users) and SNS can integrate into mobile apps for native app notification.

Thanks Bryon. This was a typo in the video that I missed. It's correct in the repo that is provided with the finished code.

Thanks Tom that was what I needed to finish

Thanks Hans GitLense, indent-rainbow and prettier are the ones that I use that affect functionality. The rest are themes or ones for other languages.

You're very welcome

I've not worked with Lavarel before but it looks like other people have built pusher replacements with websockets. It should be able to build something to replace the functionality of pusher. Websockets can listen to the messages sent from the app and you can trigger messages be sent to the app when something else happens (message from other users, system change)

I'm glad you liked the tutorial. If you want to send a message to a specific websocket then you just need to make sure that you are sending the message with the correct websocket ID. You should have one ID per connection so each message you send should just go to one websocket

Great spot thanks. Unfortunately RU-vid doesn't let me update the video :/

@@CompleteCoding No problem. I'm watching all of your lambda videos. This gave me an incentive to learn how to use the cloudwatch and debug the code to find the source of the problem! lol In general, my congratulations for the videos! They are excellent for people like me who are learning to use lambda.

Thanks Wagner, it means a lot to hear that you find them so helpful

The only ways I can think to send a parameter to the $connect lambda is through path parameters (not certain that it would work) or though query string parameters (definitely works). You can also set up custom websocket routes. You could set one up for auth or setup and pass the game ID in that request.

@@CompleteCoding I have the same question. path parameter would suit me best (wss://api.mydomain.com/dev/clientID). Can you guide me where to find the how? Less preferred, but if I have to, query string could help www://api.mydomain.com/dev?id=. Thanks! And in all honesty: I was able to run your whole demo from scratch. Not used VS code, serverless or anything near before. Only AWS GUI with your other video on REST calls via GateWay API. Many thanks!

In the client you will do something like: const ws = new WebsocketClient( "YourWebsocketURL" ) ws.onMessage = (message) => { // code to do when you get a message } I hope this helps

What error are you getting when you try and deploy?

In the serverless.yml file I use a plugin called serverless-webpack. This uses webpack behind the scenes. You can create a webpack config file in the root of your project and it will override the serverless default. Other things you can do is to add these two lines to your serverless.yml file. This will put all the code for each endpoint into a single file using webpack. package: individually: true

@@CompleteCoding Thank you very much for the elaborated response. I tested it and saw it works with Websocket API aswell.

@@omersaar3864 Great to hear.:)

There are a few different ways to validate the schema in JS. You could write a function to manually test the properties on the payloads, or you could use something like YUP which is a JS schema validation package.

It works exactly the same. Lambda is billed on invocations and compute time. This means of you have a high frequency websocket then it can get expensive quite quickly.

You've asked a few things here. Https cert - api gateway generates your a random base url with a cert. If you want a custom url then point route 53 to the api gateway url Graphql - I would use appsync any time I do graphql. That covers everything. Creating a custom graph ql subscription might be possible with api gateway websocket but it's going to be a lot more effort and complexity

So when the "customer" send a message they get the response but only the message they sent is saved in Dynamo? This is actually the way it was designed to work. If you want to add the saving of the response messages then messages.push(body.message); //2 new lines const responseMessage = "Whatever you want it to be" messages.push(responseMessage) const data = { ...record, messages, }; ... This will now have both sides of the conversation in the the messages array. You could make this better by doing something like this so you know who sent it in the future. messages.push({ user: 'customer', message: body.message}); const responseMessage = "Whatever you want it to be" messages.push({ user: 'bot', message: responseMessage});

​@@CompleteCoding So when the "customer" send a message they get the response but only the message they sent is saved in Dynamo? First of all, thanks for the quick reply! As for the first q, no. They don't get the response. Yes the message they sent is saved to the database.

This is the bit that you want ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-D5_FHbdsjRc.html

The definition for the websocket endpoint is within the function event. Have a look at 22:00 onwards for configuring them. The only thing you have with websockets is routes.

There are a few ways. You can use serverless offline to run your websocket lambda locally and then test it as you would any other websocket, but you have the logs on your local machine. You should also be able to use a vs code debugger to add breakpoints and debug this way.

You can test a websocket lambda by calling the handler in the function directly. You pass in a know websocket event and then test what happens. You'll need to mock the websocket responses as you aren't actually sending messages to anyone.

First check that your message lambda is being triggered using cloudwatch logs. If it isn't then check the Route Selection Expression in API Gateway (should be $request.body.action 31:21 in the video) and check the messages you are sending down the websocket. If it is being triggered then check any of the messages for clues. You could add some more console.log events for details like the tableName and if there are any errors on the dynamo write. These should point you in the right direction

I know that it could be stupid but check if you haven't got any mistake in a WebSocket message: { "action": "message", "message": "hello!" }. I lost a quote -.-

If you click twice then you are creating two separate websockets. This is the same as two users connecting from two different computers. If you want to do something where you make sure that there is only one per user, you would need to send some details to the websocket saying who is connected. When you send that on the second websocket, it realises that it is the same user. You can then decide how to deal with that. You could close the original one or close the new one. Managing websockets in your app will be more complex than the logic I've shown here but how you do it depends on how it needs to work with your app.

I would add some logs around that function to make sure it is getting that far and see if the websocket.send is returning an error. It might be a config or a permission error.

This isn't something I've seen before. Could you try re-deploying another stage and see if that also doesn't set up the lambda trigger. If that doesn't work, maybe check the permissions of the IAM user that you are using to deploy with?

This is the repo to start the lesson github.com/SamWSoftware/ServerlessRU-vidSeries/tree/l13-clean This is the repo of the complete code github.com/SamWSoftware/ServerlessRU-vidSeries/tree/l13-websocket-lambdas

The main difference would just be adding a type to the event in the handlers APIGatewayProxyWebsocketEventV2

cool idea. You set the websockets up so that when a user connects, they are stored in some database with their websocket details. You have a method on the websocket for 'get all other users' which will tell you which users are also connected. You have a second method for 'request call' which will pass up the ID of the user that you want to connect to. This lambda will look the user up in the DB, find their websocket details and then send them a message. Depending on how you're doing the call part, if the user accepts the API could generate a callID and send it to both of the users.

@@CompleteCoding Thank you so much! I'll try that out.

That's a great video idea

@@CompleteCoding please update whenever you make this, any plans on making one ?

@@PrateekKumarS This will be a chunkier project. I need to work out how to set this up in a way that it doesn't become a 2 hour video. Also when you say "reachable only for the authenticated users", what do you mean?

@@CompleteCoding sorry for the late reply, I mean cognito integrated chatbot.

API gateway generates the connectionID when a new client creates a websocket connection. You can re-use that in the Lambda to make sure you send messages back to the correct user

You can use serverless-offline plugin to test your websocket APIs. That will send the correct messages to the correct lambdas, as it will happen when deployed.

@@CompleteCoding thanks. I can see it does not support dotnet runtime and I'm a C# developer. I managed to grab the payload from the logs in AWS console

@@diegomartin3414 I'm a JS and Python developer so I don't know much about those issues. Glad you were able to get the payload from the console.

Time for some debugging: Does your lambda get triggered - you should be able to see some logs from it if it has If Yes => something in the lambda may be causing the connection to fail If No => Look in API Gateway at the websocket. Make sure that the "onConnect" is pointing at the lambda. If not then fix that and retest.

Good point. The code could be reduced.

If the client always has an open websocket then yes. That is exactly what you can do with this.

Why would the code not reach that point? When we do await WebSocket.send({ ... }) this sends a message to the websocket but that doesn't end the function. You could have it do three WebSocket.send in a row and it would send three messages one after another. After it's sent the message it carries on to do the line you've pointed out.

That probably means that the lambda that you are calling when you send a message is erroring. Have a look in the cloudwatch logs for the lambda and see why it is breaking.

If you are completely new to Lambda then I would start at the start of the playlist. This will teach you how to set up the Serverless Framework and deploy your first API. ru-vid.com/group/PLmexTtcbIn_gP8bpsUsHfv-58KsKPsGEo

This is one video in a series. I've since done what you've said and start each video with a basic serverless project.