Tutorials: Chat

Add In-App Messaging to Your Mobile App – React Native / Expo

Stream’s Messaging API allows you to build real-time chat applications that are scalable, fault-tolerant, secure, and fast, so you don’t have to re-invent the wheel by starting from scratch. You’ll take less time to create a robust app (like days to create a real-time chat applic…

Build a One-to-One Chat App with JavaScript

More and more applications are seeing the value in allowing users to communicate in real-time, either with one another or with their support team. Adding this feature to existing applications, or even new ones, however, can seem like a giant, time-consuming undertaking. To help m…

Android Chat Bubbles: Building iOS Style Chat in Android

In this post, we’ll explore how to do two things: 1) create live chat message bubbles in Android that are similar to WhatsApp and iMessage and 2) customize Stream Chat’s UI Components. We’ll customize Stream Chat Android’s built-in UI components by plugging in a custom message vi…

The Stream CLI By Example

The Stream CLI is a powerful tool for communicating and debugging your Stream Chat setup with the Stream API. At this time, Stream Chat is only supported; however, Stream Feed support will come to the CLI later this year. With the Stream CLI, you can quickly work your chat config…

Build a Terminal Chat Application With Node.js

Let’s create a functional chat interface right in the terminal with Node.js! Although building a chat app is no small task, with the help of Stream’s fully featured Chat API, it’ll only take a few lines of code, as you’ll see. Here’s a demo of what the final application will look…

Customer Support Live Chat with VanillaJS and Stream Chat

How much do you love when you can just jump on a company’s website and chat with one of their representatives to take care of your business; no picking up the phone, no waiting days for an email back?? Customer Support Live Chat is a critical tool for every forward-thinking busin…

Stream Flutter: Building a Social Network with Flutter (Series)

In this post, we’ll be creating a simple social network, called Stream Flutter, that allows a user to post messages to followers. The app will allow a user to post a message to their followers and chat with them. Stream’s Activity Feed API and Chat API combined with Google’s Flut…

Stream Flutter: Building a Social Network with Flutter – Direct Messaging

In the second part of our series, we’ll implement direct messaging between users by integrating the Stream Messaging Platform. This post assumes you’ve followed along with part 1. Leveraging our code from part 1, we’ll modify the backend to generate a Stream Chat frontend token s…

Stream Flutter: Building a Social Network with Flutter – Group Channels

In the third part of our series, we’re building group chat into our social application. This allows users to chat with multiple people at the same time. We leverage Stream Chat to do the heavy lifting. This post assumes you’ve gone through part 1 and part 2. Using our code from p…

How to Create a Chat App with Angular 9

In this tutorial, I’ll take you through building a live chat application with Angular 9 and Stream Chat. I’ll demonstrate how to work with channels and how to send messages in real-time between users. In addition, you’ll see how to keep track of the number of channels that a user…

Build a Chat Messaging Platform in PHP

Building a fully functional and scalable chat platform is time-consuming. Luckily, Stream can help you build one in minutes! In this tutorial, we are going to use the Stream API to build a chat messaging platform in PHP. Prerequisites To follow along with this tutorial, you need …

Ephemeral Chat Messages

One increasingly common feature in chat apps is the ability to send self-destructing messages, also known as "ephemeral" messages. When this feature is enabled, the messaging system automatically erases the content minutes or seconds after the message is sent. This deletion is ef…

Build a Mobile Twitch Clone

People long for connection, and technology has allowed us to connect with those who aren’t physically near in increasingly many ways over the last few decades. With applications like text messaging, and then group messaging, with our music, photos and movies moving to the cloud, …

How to Display Web Chat Notifications

In any chat application, one of the most integral features is being able to notify users of new messages. While providing this feature comes with its own set of challenges (listeners, timing, notification types, keeping track of which messages are read, etc.), notifying users of …

Building an Ionic Real-Time Chat App

Update: Here is an excellent post on the vision for 2020’s tech trends in cloud computing between the CEO of Ionic, Max Lynch, and CEO of Stream, Thierry Schellenbach. There is a massive difference between platforms such as React Native and Flutter compared to Ionic. Ionic believ…

Implement Stream Chat with Vanilla JS

In this post, we are going to implement a simple Group Chat application with Vanilla Javascript and Stream Chat! Stream Chat allows you to rapidly ship real-time messaging systems that are reliable and robust, without the overhead cost and time of managing the infrastructure by y…

Deploying a Node API to Docker & Kubernetes with a CRA Frontend

Creating an application is a lot of work! Deploying your application shouldn’t be. Every developer has said at one time or another, "it works locally, but I can’t get it to work on the server!"; it can take you hours, or even days, to figure out what went wrong and to put a fix i…

Send Chat Transcripts with Mailgun

Getting Started In any business interaction, it is vital to hold on to records of how you got to where you are. Not only can being able to reference previous transactions and interactions teach you about what you’ve done, it can help you make informed decisions about what you are…

Build a WhatsApp Clone on Android With Kotlin – Part 1

Android development has come a long way over the last few years. The Jetpack components significantly speed up development. In this tutorial, we’ll build a functional clone of WhatsApp with Kotlin. Building a messaging app used to be difficult; in this tutorial, you’ll get a chat…

Build a Chat App With Ionic 4

Ionic is an open-source framework that allows you to build and deploy apps that work across multiple platforms, such as iOS, Android, desktop, and the web as a Progressive Web App – all with the same code base. At first, Ionic was built to work with Angular, but with the release …

Series: Building a Social Network with Flask & Stream – Part 3

This is the third installment of a tutorial series focusing on how to create a full-stack application using Flask and Stream. Originally, this article was going to cover the creation of the initial database models for your app, as well as handling registration/login and other con…

Series: Building a Social Network with Flask & Stream – Part 1

For the last little while, I’ve wanted to develop a new kind of social media site. Between the privacy issues, relentless ads, and the pervasiveness of bots on almost every service, I wanted to build something that would allow people to have a new source to discover the newest an…

Processing Webhooks with Stream Chat, Lambda, and Node.js

In this tutorial, we will show you how to process webhooks to send a message to a Slack channel! Here at Stream, we are big fans of Chat. With our chat product, we offer a webhook so that you can relay data to an endpoint of your choice. Webhooks are an excellent way to make

Build a Chat App with Stream & Kong

Managing microservices manually can get very complicated and takes the focus away from business logic. API gateways help take care of the various collective management and housekeeping tasks necessary for running microservices. One of the most popular API gateways is Kong. As the…

How to Efficiently Use Webhooks and Stream Chat

Unlike an API request that’s triggered when a request is sent, a webhook gets triggered when certain events occur within the cycle of an application. For example, when a new message is added on Stream Chat, the message.new event sends a payload to the webhook endpoint containing …

Deploying Stream Chat (React) to Netlify and Heroku

This article describes how you can build and deploy a React Chat application powered by Stream’s Chat API to Netlify and Heroku. In this case, the React app will be deployed on Netlify, while the accompanying Node server will be deployed to Heroku. At the end of this article, you…

Build a Customer Support Chat Bot with LUIS, React Hooks, Azure Serverless and Stream

Initial Thoughts This tutorial will teach you how to build your own customer-support chat experience and create a serverless chatbot! The end result will look much like this: The customer-facing chat experience is shown on the left, and the screen on the right shows the interface…

Integrating the Web Notifications API With Stream Chat

Many applications today inform users about important messages related to their application by sending notifications – this can be via push or web. With a web notification, a user can click on the notification and instantly get back to the application to further act on that piece …

Deploy a Stream Chat API With ZEIT Now

Stream Chat provides a JS Chat SDK that you can use to build custom messaging solutions for your application. Requests from the SDK are authorized via an access token provided by a backend API. Due to the restriction of having to generate a JWT token on the backend, you will need…

Implementing React Hooks with Stream Chat

React hooks, released in February 2019, have huge benefits when implemented in your application. Whether you’ve used hooks before or are just learning, this post aims to show you just how simple it is to implement them with Stream Chat. The Basics Using hooks with Stream Chat is …

Open Source REST API for Chat with Express, MongoDB, and Heroku

Overview Here at Stream, we’re known for our Feeds as a Service as well as our Chat as a Service product. Stream Chat was released out of beta late last year, and we’ve been receiving quite a few inquiries on how to structure a RESTful API to support the backend portion of chat. …

Securing a Chat App With React and Auth0

In this tutorial, we will build a chat application that’ll allow users to participate in a group discussion similar to how channels work in Slack. We’ll handle user authentication, and management using Auth0’s Authentication-as-a-Service solution that allows developers to add aut…

React: Conversational UI Chatbots

Conversational UI is a user interface that emulates a human to human conversation, while in reality, the human is interacting with a computer program. We’ve often seen this with the use of chatbots and voice assistants. Conversational UI that involves speaking allows you to inter…

Adding User Interactivity to a Chatroom with Laravel, Vue.js and Stream Chat

In my last tutorial here, we created a chatroom application using Laravel, Vue.js, and Stream Chat. Although we only covered the basics of getting our chatroom up and running, Stream Chat offers a lot of other functionality. In this tutorial, we will explore some of those functio…

Building Real-Time Live-Stream Chat With Wowza

Wowza provides users with the ability to stream live video. Trusted by over 24,000 organizations to power video streaming, they offer an extremely flexible platform that’s easy to use for even the most novice streamer. My team at Stream specializes in real-time feeds and chat tec…

Building an Encrypted, HIPAA Compliant Chatbot

As healthcare technology advances, secure real-time communication is becoming increasingly crucial to any modern medical application. It’s essential to provide the technology experiences customers expect while protecting their privacy and data, like through HIPAA compliant chat. …

Tutorial: User Auth with Stream Chat & Feeds

A common point of interest when integrating Stream is how to authenticate users, in addition to generating a token for use on the frontend side of the application. Whether you’re using Stream for feeds or for chat, generating an auth token is actually rather simple, and it’s easy…

Build a Video Conferencing App Using Dolby Voxeet and Stream Chat

With the recent launch of Stream Chat, the team here has been working with vendors to add real-time chat and messaging to various platforms. We’ve had several requests for voice and video chat, and after looking around at the market, it was a clear choice to partner up with Voxee…

HIPAA Compliant Chat: Build a Chat App!

Building HIPAA Compliant Chat In this tutorial, we will walk through how to create a full, end-to-end encrypted chat solution using Stream Chat combined with Virgil Security. These two services allow developers to integrate HIPAA compliant chat by protecting PHI and patient commu…

Building a Chat Room with Laravel, and Vue.js

Being able to communicate with a group of people in real-time over chat is one of the most powerful features of modern messaging. Real-time messaging with groups of people can have live general discussions across the board as though it were a one-to-one chat, which makes sharing …

Filtering Profanity in Chat with React Native

Unfortunately, there will always be users who tend toward using profanity within chat. As a developer, there will be a time that will come when you need to moderate this type of behavior. There’s simply no way you will be able to manually watch all of the chat rooms and ban users…

Tutorial: Build Customer Support Chat with Laravel, Vue and Stream

Quick and active customer service is an integral part of any company or organization, especially those that conduct most of their business online. Quality customer service goes beyond merely fielding comments and questions from customers. The types of interactions your team has w…

Building an Ecommerce Chatbot with React Native and Dialogflow

Chatbots allows ecommerce sites to provide more to their customers without the need for human intervention. Conversational experience is a powerful way to sell more on your ecommerce site. With the popularity of Chatbots, different services which provides powerful bot builders to…

Building a Svelte Chat App with Stream

In this article, you’ll learn how to build a chat app with Stream Chat API and Svelte 3. I’ll demonstrate how to add users to the app, how to retrieve the message history and how to send and receive messages between users. Here’s a live demo of what we’ll be building: Prerequisit…

Secure React Chat Messaging App with Auth0

Chat messaging is everywhere today. We can talk to customer support personnel through a web app that allows them to see our request and respond in real-time. We can interact with our friends and family, no matter where we are, through apps like WhatsApp and Facebook. There are mu…

Python Chat Tutorial with Django and React

This tutorial will explain how to build a chat application with Python, Django and React. Unlike other tutorials, I’m not using Python/Django for WebSocket connections. While doing so may seem cool from a tech perspective, it’s pretty sluggish and expensive – especially if you ha…

Tutorial: Use Gifted Chat UI with React Native

Create a React Native Chat App with Gifted Chat

Create a Chat App with Vue.js and Stream

When building a chat application, your head tends to spin in terms of what functionality you need. When building in-house, this process can turn into a nightmare.Thankfully, there are companies out there such as Stream that provide chat as a service as an API. In this tutorial, w…

Using Stream’s Real-Time Messaging API with Amazon Translate

Is your chat going global? Worry less about the language barrier when you pair Amazon Translate with our real-time messaging API. When powering a chat product in a global environment, multilingual support should be top-of-mind. Doing so allows you to ensure that the communication…

Adding Chatbots to Your Stream Chat App Using Google’s Dialogflow

Most tasks are repetitive and time-consuming. What if we could use a bot to help in doing the tasks instead? This will hugely increase productivity. Chatbots are fantastic for this.  In this tutorial, I’ll walk you through steps to adding a chatbot to your Stream Chat app using D…