Real-time Chat Blog

Geohashing Chat by User Proximity Tutorial

3 min read Chandler Mayo on Dec 9, 2022
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.

How to build a proximity chat application with geohashing. This allows you to connect users in a chat room based on their geolocation. Includes full code, tutorial and demo.

This geohashing user proximity tutorial walks you through how to build a real-time JavaScript chat app that connects users based on relative location (i.e., geohashing).

To connect groups of two or more people by location, you must take latitude/longitude values and reduce accuracy resolution. By doing this, you can expand the coverage of proximity. You can use multiple resolutions at once or a fixed resolution.

Want to see geohashing in action? A full working demo with a Google Maps preview can be seen here: Geohashing Chat by Proximity. Or check out the source code here: GitHub Repository for Geohashing Chat by Proximity.

geohashing large scale example

This geohashing tutorial walks you through how to build a real-time chat app that connects users based on relative location (i.e., geohashing).

To connect groups of two or more people by location, you must take latitude/longitude values and reduce accuracy resolution. By doing this, you can expand the coverage of the proximity search. You can use multiple resolutions at once or a fixed resolution.

Basics of Geohashing

Before you build with the PubNub APIs, you must create a PubNub Account.

Once you have a PubNub Account, follow this Enable Persistence how-to and enable the Persistence feature. You can also learn more about how PubNub persistence works from this how-to. Save your API keys from the Enabling Persistence how-to and replace them in the code.

Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:

var pubnub = newPubNub({
    publishKey : "YOUR_PUB_KEY_HERE",
    subscribeKey : "YOUR_SUB_KEY_HERE",
    userId:makeid(10)
}),

Next, we’ll cover some source code snippets for geohashing latitude/longitude coordinates. It is relatively simple to increase the radius of the latitude/longitude position by reducing the accuracy of the float values. You can expand the chat circle area and collect a latitude/longitude.

// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
// Geo Hash
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
function geohash( coord, resolution ) {
    var rez = Math.pow( 10, resolution || 0 );
    return Math.floor(coord * rez) / rez;
}
ProximityChat

Geohashing Resolution “Zoom”

“Zoom” levels are different cartesian grids with larger and smaller granularity. Once a Geofencing event fires, you will publish to a set of channels corresponding with each zoom level. Zoom levels are essential as that is how we construct the link between our geofenced area and PubNub.com. The zoom level is the resolution/de-resolution of the Cartesian coordinates latitude/longitude (think X and Y coordinates).

By reducing the resolution of the latitude/longitude coordinates, we can construct a channel name that hits one box of the grid. Less resolution means larger boxes and is used to determine a PubNub Channel that is associated. Try playing around with different geohashes or create your own geohashing algorithm. This will create a wide circle and encode a channel name (geocode) used to connect.

// Create Proximity Channel
channel = geohash( pos.latitude, 0 ) + '' + geohash( pos.longitude, 0 );

Next, connect to PubNub with this channel name:

     // Connect to Proximity Channel
        pubnub.subscribe({channels: [channel]}); 
            pubnub.addListener({
            message: function (m) {
                printout(m.message);
            }
        });
ProximityChat12

Multiplexing 9 Boxes for Improved Accuracy

Next, we need to calculate the surrounding squares to extend the taper and radius in a way that provides more accuracy. This will remove the “fencing” effect and optimize the chat area.

That’s it! You simply reduce the resolution of a geo coordinate and use that as a channel name on PubNub. Check out the browser’s navigator.geolocation.getCurrentPosition(...) method to acquire latitude/longitude in a Chrome/Firefox/IE/Opera/mobile/Safari browser.

687474703a2f2f692e737461636b2e696d6775722e636f6d2f75307545302e706e67

Why use PubNub for Geo Projects?

Without PubNub, you’d have to build your own APIs or microservices, manage scaling, and manage security yourself to facilitate moving the GPS data around in real-time. You’ll also need to ensure your API is always available and working fast enough for a good user experience. With GPS data, this can be tricky because all those location updates can take a toll on any server (and developer).

PubNub’s primary product is a real-time publish/subscribe messaging API built on a global Data Stream Network. Messages sent with PubNub are delivered in under 0.25 seconds, and PubNub supports dozens of SDKs in most programming languages. PubNub provides the secure, scalable, and reliable infrastructure to power any real-time application - and PubNub APIs work great for transmitting GPS data.

Interested in exploring more about PubNub and geolocation? Here are some resources to look at next:

Need more help with building geolocation services with PubNub? Get in touch with our sales team and discuss all the possibilities.

More from PubNub

How to Add a Notification Badge to Icons in React Native
Real-time Chat BlogDec 19, 20226 min read

How to Add a Notification Badge to Icons in React Native

Display real-time notification badges with PubNub and React Native to display important information and bring users back to your...

Michael Carroll

Michael Carroll

Digital Twins and the Future of Real-Time Data
InsightsDec 6, 20224 min read

Digital Twins and the Future of Real-Time Data

The concept of Digital Twins has evolved over the last two decades, however, one thing remains the same: the need for real-time...

Michael Carroll

Michael Carroll

How Many Text Characters Fit in a 32KB PubNub Message?
Real-time Chat BlogNov 24, 20224 min read

How Many Text Characters Fit in a 32KB PubNub Message?

Learn the ins-and-outs of PubNub message size and get a better idea of how many text characters fit in a single message.

Michael Carroll

Michael Carroll