Real-time Chat Blog

How to Send Chat Invites Using Chirp

3 min read Chandler Mayo on Apr 19, 2019
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

Chirp is like an audio QR code. It can be used to easily connect users to a chatroom or any other real-time experience. This tutorial shows how.

In this tutorial series, we’ll be building a chat application that uses audible chirps to connect users to the same channel using the Chirp WebAssembly SDK and PubNub JavaScript SDK. Using Chirp, you can eliminate the need for users to manually enter the channel they want to join. The users only need to enable microphone access and turn up their speaker to connect to each other. Think of Chirp as an audio QR code.

This is part one of our series on building a JavaScript chat application that sends chat invites using Chirp. Check out the other posts Creating a Chat App with PubNub and Chirp (part 2) and Using Chirp with PubNub for Chat (part 3).

Looking for the completed project? Download it from the Chirp PubNub Chat GitHub repo or try the demo.

What is Chirp?

Chirp

Image from Chirp.io

Chirp’s SDKs allow you to send small amounts of data over sound. It is designed to work in noisy everyday environments and doesn’t require perfect silence to work. In my experiments, I found that my chirps were received in almost every reasonable scenario I tested.

Chirp offers several different protocols you can use. You can select from audible or inaudible near-ultrasonic frequencies.

The Chirp WebAssembly SDK used in this tutorial only supports the 16khz-mono protocol. It’s the only protocol compatible with both sending and receiving chirps on the web. You can use the Chirp JavaScript SDK to send chirps with other protocols.

How Can I Use Chirp?

In this tutorial, we are using chirps to transmit a channel and connect users in a chat. Some use cases with Chirp and PubNub could include:

Tutorial Overview

In this tutorial we’ll cover:

  • How to use the Chirp SDK to send and receive the channel name.
  • How to build a basic JavaScript chat application with PubNub.

Our app will work like this:

  1. Users will first need to enable their microphone.
  2. A user creates a new chat and becomes the host.
  3. The host transmits a chirp to another user.
  4. The users are now in the same chat channel and can send messages using PubNub.
Use Chirp to connect users to the same chat

Requirements

There are a few requirements before you can get started:

Getting Started

Continue with part two of this tutorial, Creating a Chat App with PubNub and Chirp.

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff