Adding chat functionality to your games and apps
Tags: typescript, nextjs, gamedev, chatgpt
Published: 2023-07-26 21:59:00

Chat is one of those things that many need and should be simple, but developers keep reinventing the code for or just buy a service to not mess with it. Then costs balloon... If you do host it yourself, security is always a concern. Worse yet, when chat functionality fails, users notice quickly! What if you could add chat to your games and apps and it was easy? The security is already done for you, scales to meet your needs, and won't "break the bank."

We recently created and released [a sample app](https://github.com/momentohq/client-sdk-javascript/blob/main/examples/web/nextjs-chat) using [Momento Topics](https://docs.momentohq.com/introduction/momento-topics), our serverless publish and subscribe messaging service, so you don’t have to toil with creating one from scratch. You can take ours, integrate it into your own apps, customize to your heart's content, or simply pick what you need and leave the rest behind. This example app uses [Next.js](https://nextjs.org/learn/foundations/about-nextjs), a React framework, for the browser app, and uses Momento’s Web SDK to allow direct pub/sub communication from the browser to the Momento Topics service. With this example, there are no websockets, no extra services to host, no intermediary apps, etm. You can deploy it to a hosting service like Vercel or Netlify and have it up, running, and publicly available in minutes!

There are a few key things about this example app and Momento Topics I want to call out.

1. This app can support multiple simple “chat rooms,” by using multiple topics. This is important because you can support the creation of chat rooms just by instantiating a new topic client object for Momento Topics. There’s no admin work to create a room, and they are disposable. As always, you are only charged for the amount of data transferred and nothing else.

1. This is a secure direct connection from the browser to Momento Topics. No intermediary data services to shuffle data between the browser and Momento services. This solution has a built-in [Momento auth token](https://docs.momentohq.com/develop/guides/working-with-momento-auth-tokens) “vending machine” to issue short-lived tokens to browsers for their session and give the user access only to rooms they should have. These tokens time out, can be automatically refreshed if you want, and keep your data and services secure. This same token vending machine could issue tokens to any client, but in this example app, it's a browser that’s connecting to Momento Topics directly.

1. The tokens being used by the chat app are created using Momento’s fine-grained access control (FGAC), are narrowly scoped, and short-lived. They only grant access to the one chat room and only for 30 minutes, though they can be refreshed automatically as you might notice in the code.

1. Using this code, you’re around 80 percent of the way there to an internet scale chat application for your users. I like easy buttons!

If you want to tinker with an easy to start and use chat application to integrate with your games or app, definitely give [this example app](https://github.com/momentohq/client-sdk-javascript/blob/main/examples/web/nextjs-chat) and Momento Topics a spin.

For more information, check out our documentation on [Momento Topics](https://docs.momentohq.com/introduction/momento-topics), [Momento’s auth token](https://docs.momentohq.com/develop/guides/working-with-momento-auth-tokens) security, and [Momento Auth API](https://docs.momentohq.com/develop/api-reference/auth-tokens) this app is built with.