daily-examples/custom/text-chat
Jon 45ab2a0710 updated each demo 2021-09-29 13:50:50 +01:00
..
components updated each demo 2021-09-29 13:50:50 +01:00
contexts renamed daily-js to custom 2021-09-23 17:22:47 +01:00
hooks renamed daily-js to custom 2021-09-23 17:22:47 +01:00
pages updated each demo 2021-09-29 13:50:50 +01:00
public/assets renamed daily-js to custom 2021-09-23 17:22:47 +01:00
.babelrc renamed daily-js to custom 2021-09-23 17:22:47 +01:00
README.md renamed daily-js to custom 2021-09-23 17:22:47 +01:00
env.example renamed daily-js to custom 2021-09-23 17:22:47 +01:00
image.png renamed daily-js to custom 2021-09-23 17:22:47 +01:00
index.js renamed daily-js to custom 2021-09-23 17:22:47 +01:00
next.config.js renamed daily-js to custom 2021-09-23 17:22:47 +01:00
package.json renamed daily-js to custom 2021-09-23 17:22:47 +01:00

README.md

Text Chat

Text Chat

Live example

See it in action here ➡️


What does this demo do?

  • Use sendAppMessage to send messages
  • Listen for incoming messages using the call object app-message event
  • Extend the basic call demo with a chat provider and aside
  • Show a notification bubble on chat tray button when a new message is received
  • Demonstrate how to play a sound whenever a message is received

Please note: this demo is not currently mobile optimised

Getting started

# set both DAILY_API_KEY and DAILY_DOMAIN
mv env.example .env.local

yarn
yarn workspace @custom/text-chat dev

How does this example work?

In this example we extend the basic call demo with the ability to send chat messages.

We pass a custom tray object, a custom app object (wrapping the original in a new ChatProvider) as well as add our ChatAside panel. We also symlink both the public and pages/api folders from the basic call.

In a real world use case you would likely want to implement serverside logic so that participants joining a call can retrieve previously sent messages. This round trip could be done inside of the Chat context.

Deploy your own on Vercel

Deploy with Vercel