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.
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.
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:
In this tutorial we’ll cover:
Our app will work like this:
There are a few requirements before you can get started:
Continue with part two of this tutorial, Creating a Chat App with PubNub and Chirp.
There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...
Michael Carroll
How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.
Michael Carroll
How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.
Michael Carroll