DEV Community

Discussion on: Build Video/Chat App with AWS Websocket, WebRTC, and Vue Part 1

Collapse
acijoe profile image
Joe Hummel

Hi Kevin,

Thanks for the tutorial. Still working my way through. It is more helpful in learning to wire this stuff up manually like this, before using frameworks like Amplify or tools like CloudFormation.

I had a question and a possible correction to note.

Why did you change the table name in this process? I did not see a driver for that change, and was curious.

There may be an error in the wscat test part. I believe the "action" should be "onMessage" (instead of "sendmessage"). The test does not work for me otherwise, following along with this article.

Collapse
kevin_odongo35 profile image
Kevin Odongo Author

Hi Joe

I've got your point and let me clarify something. With AWS Websockets routes you can add another route for sending messages call it sendmessage and use the Lambda function onMessage (you can rename the lambda function sendmessage)

Here is the logic when a user creates a meeting we will persist a record in dynamoDB (connection.id, group_name, group_id). Create a dynamoDB Table and reference in the Lambda function for connection.

In my case i did not see the need to have a third route send message because once the user connects then his records will be fetched in the dynamoDB Table then a scan will be done in the DynamoDB to get all users with the same group_id. Once all users are retrieved then a message will be broadcasted to everyone. This is the logic you can separate from connect route and sendmessage route on your end if you are trying to achieve it that way.

Secondly, Amplfiy can also achieve real-time chat capability and can scale well. If your application is just for chat then i will suggest you use Amplify subscriptions. Its easy and you can define your schema quickly and be up and running.

With AWS Websocket you will have to do it manually. From protecting your routes using IAM, Lambda authorizer.

Amplify uses CloudFormation to build your environment. I will advice keep learning AWS Websocket they are quite powerful and also try AWS Amplfiy subscription

Collapse
acijoe profile image
Joe Hummel

Thanks so much for the response. I agree Amplify would make this easier. I have an app deployed on Amplify now. It depends on a REST API to generate live event (such as a conference) micro-sites on the platform deployed. The API is supplied by another app deployed using the Serverless framework/CloudFront. Both apps use the Vue framework for the frontend.

We have gotten to the point where we need to add features which require WebSockets. We first considered adding WebSockets to the existing API. That was considered a more significant effort than to retrieve the data into a data store on the Amplify-deployed app, and use AppSync.

I'm in the process of learning more about how WebSockets work on AWS, and how we can add them to the existing project. We do not currently host any data outside of the Cognito User Pool data (for user profile details, as well as authentication) on the Amplify app.

One of the features we are exploring to add is a video/chat feature for use by exhibitors and attendees. So, I thought reviewing this tutorial would help me to better understand a lot through one tutorial.

Thanks again for all the detail! I've read through the second part, and you're right - there's a lot more to it, without the convenience of the Amplify framework.

Thread Thread
kevin_odongo35 profile image
Kevin Odongo Author

Hey Joe

Let me do a video detailing this approach and I share to you to assist you through.

One thing with AWS Kinesis Video Stream there are a lot of hard limit. It is quite ideal for project like webcam ideally with one user as Master.

There is another AWS product AWS Chime that also offer Video and Chat. Ensure you go through the pricing because with AWS Chime there is no free tier.

With Video specifically if you are building from scratch and will be using WebRTC. AWS Websocket will handle the exchange of ice candidates. Another thing to keep in mind is how many will join the Video if it's more than 2 then consider deploying a Turn Server or getting a managed one this is because you will have to build a mesh architect and during video a lot is exchanged so you need an infrastructure that can scale.

The steps

@connect route - handle connection get connection id and persist in your db

@disconnect route - disconnected / in your case you won't need to clear the user or chat details because you are already using Cognito for Authentication which means this will be for only authenticated user. Have the logic on the front end for a user who created the chat to have a button to clear all conversation

@sendmessage route - You can add this route to separate your send message route. Another approach you can take is to listen to this route and fetch your Database for the new record when there is notification of activity.

Thread Thread
acijoe profile image
Joe Hummel

Thanks Kevin! I look forward to your video.

We are also considering AWS Chime. However, Chime doesn't provide the type of chat room features I'm looking to offer in a virtual event platform. Chime features seem well suited for our exhibitors - to allow attendees to start up instant Zoom-like meetings with exhibitor representatives. Doing this through Zoom requires a lot more prep and subscriptions.

Yes, I'm familiar with the costs for Chime, and found them to be pretty reasonable. We don't need daily use (yet), so the pay-as-you-use model may work out to be similar to costs to our current Zoom budget. Even if it results in somewhat higher costs, it would worth the convenience of having the service built into the platform, instead of linking in Zoom meetings now.

As far as number of participants, it depends. This could range from two to a dozen (maybe more) participants. For instance, take the case of a social/networking room for attendees to pop in at will, to virtually meet with other attendees or faculty, One person would start this as a host, and wait for people to drop in, over a period of time (say two hour windows).

Initially, this research into WebSockets was to provide a means to send instant messages or a bulletin board feature (stored alerts) for event attendees. There would be a notification icon on the header menu area, where messages from event management would be delivered and stored for attendees. The WebSockets would provide the instant delivery for online users. AppSync would store the messages and track read status for attendees/users. The video chatting is a feature we also wanted to add, but later, after we got familiar with this initial goal.

Hope this all makes sense. Happy to explain more, and provide access to the platform, if you're so inclined. It is a constant work in progress. We started building this last year, when the lockdowns started, and nobody wanted to meet in person.

Thread Thread
kevin_odongo35 profile image
Kevin Odongo Author

Hey Ian

Sorry for the late response why don't you reach me out on email ( crudavid36@gmail.com). Share the app link then we work together and add the functionalities you want