How to find your love through PubNub & ChatEngine ❤️
Are you alone this Valentine’s Day? Spend it this year by staying in the spirit and building a speed dating app using the PubNub SDK and its ChatEngine library. It might just help you find your significant other and you’ll also have learned how to use PubNub to build a next-generation chat that connects people interested in finding love.
Current dating apps focus on the matching process using image-based profiles; this tutorial will teach you how to build dating app that puts more emphasis on the chat portion of dating apps to mimic the speed-dating experience in real life. This tutorial is built behind the idea that current dating apps incorrectly focus on matchmaking through static images — this app frontloads the messaging experience. Imagine being put in a room alone with a stranger and having 5 minutes for your first date. While features like image-based profiles, matching algorithms, swiping interface, and location-based filtering are important portions of dating apps, this tutorial will focus on the messaging infrastructure, where using PubNub really shines.
Technical Overview
The backend of this app is a simple Node.js service running on an Express server. Due to PubNub’s powerful realtime data-streaming capabilities, it eliminates the need for a complicated back-end. The client-facing chat is created through PubNub’s next generation chat library, ChatEngine, through the use of rooms that a maximum of two Users may connect to. After the app connects two users to the same user through some simple logic matching age and gender, the users send messages using emit message events and PubNub messages that the users subscribe and publish to. This works beautifully with ChatEngine’s on method that is able to run logic through a promise when the event is triggered (or emitted). After 5 minutes, or when a user disconnects, the users are disconnected from the ChatEngine chatroom and they have the opportunity to chat with their next match.
Refer to the SpeedDating github repository for the entire app: https://github.com/lovdeep7/SpeedDating/
User Flow
The following image is a step-by-step journey that the user goes through that will be used to build the speed dating app. It utilizes the 5 E’s of customer journey to map the process from both a consumer and technical point of view.
Entice: user accesses app and client session begins
For this tutorial, we will be building the chat on top of a Node.js service. If you have not worked with Node.js, it’s a JavaScript runtime environment that makes it easy to execute JavaScript programs with incredible flexibility from all of the npm packages. You can install Node.js and npm from here: https://nodejs.org/en/download/ or through a package manager.
After installing Node and initializing your node app through npm init, include Express.js, PubNub, and ChatEngine packages to your package.json.
{
"name": "SpeedDating",
"version": "1.0.0",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"author": "LS",
"license": "MIT",
"engines": {
"node": "11.x"
},
"dependencies": {
"chat-engine": "0.9.21",
"express": "^4.16.4",
"pubnub": "^4.21.7"
},
"repository": {
"type": "git",
"url": "git+https://github.com/lovdeep7/SpeedDating.git"
},
"bugs": {
"url": "https://github.com/lovdeep7/SpeedDating/issues"
},
"homepage": "https://github.com/lovdeep7/SpeedDating#readme",
"description": "Find your Valentine with PubNub's ChatEngine"
}In this app, Express will be used as a simple server on top of the Node app. Due to PubNub’s powerful realtime data-streaming capabilities, it eliminates the need for a complicated server setup. To begin the Express server in app.js, after including Express and HTTP server (which will run our app locally), add any additional redirects and begin listening on a port of your choice.
app.use(express.static(__dirname));app.get('/',function(req,res){
res.sendFile(__dirname + '/home.html');
});app.get('/create', function(req,res){
res.redirect('/client.html');
});...http.listen(PORT,function(){
console.log('Listening on port: ',PORT);
});
After having this backend available for the user, build a series of HTML pages that will be the landing pages the user sees when accessing the sites. Feel free to use your creativity here and go crazy on CSS. Sample HTML pages can be viewed on the SpeedDating github repository. Make sure to include any script files you intend on using. You may now run http-server in your terminal to access your app in your browser.
Enter: user creates profile and sends data to server
First, include your PubNub and ChatEngine objects into your app.
pubnub = new PubNub({
publishKey : 'pub-c-your-pub-key',
subscribeKey : 'sub-c-your-sub-key'
})ChatEngine = ChatEngineCore.create({
subscribeKey: 'pub-c-your-pub-key',
publishKey: 'sub-c-your-sub-key'
});*note, the pubnub initialization is not needed if ChatEngine is initialized.
You may configure and obtain your PubNub keys from here: https://dashboard.pubnub.com/signup?
Up until now, we have not defined the user. Luckily, ChatEngine has a User object that connects to the global chat.
let User1 = ChatEngine.connect('user');This connect() function will call a $.ready function, which will allow you to work with ChatEngine and setup an object that the client can communicate with.
ChatEngine.on('$.ready', (payload) => {
let me = payload.me;
...On the client side, create a function setUser() that handles the profile data inputted by the user in this step of the user flow, and sends this data back to the server to create this new user profile.
setUser() functionEngage: placement in ChatEngine rooms and timer begins
This dating app will use several different potential chatrooms with a maximum capacity of 2 users to mimic the speed dating process. In ChatEngine, creating a chatroom is as simple as:
chatRoom = new ChatEngine.Chat('room '+room);To determine the room number in which users are placed, you may choose based on age or gender, the two data points the user provides us in the profile page. While our chat app will contain some simple logic in which you are randomly placed in a room with the opposite gender in your age group, this can become more sophisticated with a more thorough profile and matching process (think: Tinder, Bumble, etc.).
We also want to assign a timer to each of these rooms when the room users number reaches 2.
Exit: publish and subscribe to PubNub messages in chat
After your users and chatrooms are created, you are ready to begin sending and receiving messages in the chat. In ChatEngine, we can use the emit() method to publish a message to all of the other users in the chatroom.
chatRoom.emit('msg', {message: msg, name: name, room: room});On the other side, in order to subscribe to any msg events, you can use the on() method and supply msg as the event type (first parameter).
chatRoom.on('msg', function(data){
//Send message to everyone in room
chatRoom.emit('newmsg', data);
console.log(users);
});Now, after sending a message in the chat room, the other user will be able to receive it and respond to it. The speed date has begun!
Extend: reset chatroom and enter new session
The chatroom will be reset either when a user disconnects or the 5 minute timer runs out. In the first case, a leftroom event will be published. Alternatively, an $.offline.leave event can also be used.
function disconnect(){
ChatEngine.emit('leftRoom', {name: name, room: room});
reset();
}Upon this event, the chatroom should be cleared and reset.
In the second case, the timer runs out and the date comes to an end. Follow similar logic to clear the chat after 5 minutes (300,000 milliseconds).
At this point, the user can decide to enter a new chat room and meet a new person, or be satisfied with their conversations and leave the client.
That’s it! 🚀 You have successfully built the base of a simple speed dating app that leverages PubNub’s ChatEngine to create a powerful chat. You may now continue building on this app to add further functionality, chat interactions, and extend to other components of dating apps.
Happy Valentine’s! ❤️