Blog: Utilizing PubNub for Real Time Member Communication

 

 

 

Sean: Welcome everybody to the Vincit Talks. I'm Sean Richards. The new SVP of strategy and partnerships to Vincit and participating in Vincit Talks. For those of you who've attended these talks in the past with Vincit, you may notice a slight change. We have updated the talk names to Vincit Talks from the previous Vincit Dev Talks. We know that with software development being such a core to the work we all do at Vincit, we also understand how development does play a role in a larger picture. So, we're now expanding the Vincit Talks to touch on topics around user experience and business strategy, in addition to continuing our focus on tech development. So, you'll experience some of these topics in the future talks. We do have several topics today and special guest speakers we're really excited about. So, to not delay any further, we definitely want to jump right in.

 

Sean: We'll do some introductions before each speaker, and so to not waste too much more time, for our first speaker, I'd like to introduce you to Nikki Kuritsky. Nikki is the current chief product officer at a fantastic organization called Chief. She was formerly a VP of product at Shutterstock, VP of digital product at Christie's, and many more impressive roles. And just a little bit about Chief, they're an exclusive private partner, or private professional network, really focused on connecting and supporting women and leaders of today. So, a lot of their members are rising leaders in top ranking positions, making a lot of strategic top level decisions and influencing a lot of change for the tomorrow of business and women in leadership. So, today Nikki can talk a little bit about Chief and some of their decisions around technology to support their business goals and any additional background on Chief that you'd like to provide.

 

Sean: Just one quick note to follow Nikki, Vincit's own Otto Kivikärki will provide insights on PubNub and chat platforms for some realtime custom built communication for chief.com as our client, after which we'll be able to take questions for you, the audience. And if you'd like, go ahead and post some questions in the Zoom chat, and we'll be sure to get you the answers from the team as we're moving along to this webinar. So after that, Nikki, go ahead and take it away. We'd love to hear about Chief and about your role, and some of your technology decisions.

 

Nikki: Thanks so much, Sean. I appreciate it. So everyone, I'm Nikki Kuritsky, chief product officer at Chief, as Sean mentioned. And as Sean said, Chief is an executive network that's specifically for female leaders. So, Chief launched in February of 2019, in New York City. And at the time we launched with 200 female executives. Since that time, we've been growing a rapid, rapid pace. We're now in the thousands in New York alone, and we're opening LA, Chicago and more cities in the coming months as well. And so, when we thought about kind of like what we wanted for our digital experience for our members, we start to think about what members were coming to us to do. As Sean mentioned, all of our members are female executives, and they range from people who are at Fortune 500 companies to startups, to even first time founders, but they all share something in common, which is that they are the lonely woman at the top.

 

Nikki: They are coming to us because they're looking to broaden their network of female power players. They want to gain access to a community that can help them crowdsource information, get relevant advice and content, and they want to meet members in smaller groups, and really feel like those members are people that they can turn to for advice and recommendations and resources when they need them. So a big theme that we kept on hearing here was, this idea of crowdsourcing. That was something that was really important to our members. They wanted the ability to chat in a platform where they can talk to people and meet them, but also kind of get a sense of who is in the community. So, you could imagine I'm chief product officer, employee number eight, thinking about how to build this out and realizing that I don't have enough engineers to build out the amazing experience I'm looking to build, immediately, but was just thinking, well, a short term solution could be Slack.

 

Nikki: It's a known product to many people. It's something that is like a workspace that people are currently on today in their professional lives. It allows for the chat and conversation, it allows for channels, and we thought that was a great way to even see if there was an appetite from this community to interact digitally. What we did not anticipate was that people just loved it. They loved being able to talk to each other online. They loved having small group chat conversations. They love the direct messaging. It was a really great way to connect the in real life experience that they were having with a digital experience that could be the bridge until they saw each other again. And so, it was something that really worked for a long time, and then really broke down when we started to really scale.

 

Nikki: And what we realized was that Slack is a tool that is great for people who know each other, to work well together. It's why so many of us use it at work all the time. You're using in small team conversations, you're chatting in relevant channels about relevant topics, but you also know each other, and you kind of have a shared goal and a shared size and community. What we really saw, that was really breaking down for us at Chief, especially as we started to scale to other cities, was that it was not a great discovery tool. Our members were having a hard time finding each other and really understanding how to use it. And you could imagine as membership scaled, channel scaled, and things just became not really discoverable in general. So, when we came to the Vincit team to say that we really needed help to build out a product, something that we talked a lot about in the early days was really, one, as a community, we have so many things that we're looking to do right now, and build out online.

 

Nikki: And though this is something that's near and dear to us, we believe that it should not be something that we build out in a propietary way. It's not the bread and butter of our business. It is an additive tool for us, that enables our members to have conversations and communicate. But it's something that we felt like existed, and we knew was something that we could really be able to leverage from existing technology. So, one of the things that we started working with the Vincit team on, that Otto will speak more about, is really thinking about, what are the things that we're looking for in that technology? What are the bells and whistles that it had to have, and what are the things that were going to grow with us as a business, that would enable us to basically have that run in the background, and have us enable a great front end experience on top of it.

 

Nikki: So, it needed to have a lot of flexibility to enable us to grow. It needed to have common conventions that we were seeing in other social platforms. And it needed to have the right developer tools that we also needed to get analytics and data for us to understand how the community was interacting. Because when we were using Slack, that was also something that was a little bit of a black box for us. And you could imagine, as we're trying to think about community engagement, and measure it, having a black box in the area where people are talking is probably not the best thing. So, that was also something that was really important for us to think about growth and analytics, and know that this was something that was a technology that we could use, and really start to take the reins of, and understand. And think about how we could start using that to influence our business.

 

Nikki: So, I think that's probably the best way to explain the context of what we were looking for. And I think Otto now will jump in and explain the technology that we ended up choosing, and how we ended up integrating it.

 

Otto: Yeah. Thanks for the introduction, Nikki. So, my name is Otto, and I've been working at Vincit for the past four years. And now recently I've been working as a lead developer in the Chief project. Let's just jump right into it. So, first of all, before we started to implement this community features, we spent some time doing research on different platforms. Platforms that would support our use case, and what we could use to build up these features that Nikki mentioned about. So, we had the previous experience already using, PubNub as a tool, but we really wanted to validate our thinking here, and wanting to compare that product to other possible solutions out there. So, some tools that we looked into, Pusher, Stream, SendBird, Twilio, for example. So, Twilio probably familiar to many listeners out there for their SMS offering, but they also have something for the chat features as well.

 

Otto: And really the problem with many other options, was that there's a very narrow set of use cases. So, they only supported building chat a certain way, for example. And they wouldn't have been extendable in the future use case. So, that was something that we wanted to avoid, and PubNub was a platform that's really good... They could leverage for these real time capabilities in the future as well. So, that was what the reason we went with PubNub, and a lot of research validated our opinion over the other platforms as well. So, one could also ask why not just build it ourselves, right? So, we are building this chat community features. We could just use web sockets to communicate right over that. So, why we shouldn't build that stuff ourselves?

 

Otto: Of course, that would require a lot of effort from our part. Developers would have to build up that stuff ourselves, and that would be take a long time to do. Then of course, once we build up that stuff, they would have to maintain it as well. So, that will take additional effort on our part to do bug fixes and things like that for our platform, if we were to do it ourselves. Then scaling up the services, which PubHub handles out of the box for us. So, when there will be more users, they will have to scale the service up and things like that. So, it's something that PubNub handles out of the box, and they don't need to really worry about that. Then reporting and analytics is something that PubNub provides out of the box as, well. So, we can get user accounts, real time user accounts from the service.

 

Otto: We can take account of amount of errors that is happening and things like that. We don't have to implement or integrate to another service necessarily for that either. Then authentication, access control was something that we required as well, and PubNub provides solutions for that, so we can use that instead of integrating to another third party service. And then documentation is something that as a developer, you should do for the other colleagues around. So, that's something that we would have to do ourselves as well. So, there's kind of a lot of different reasons why we shouldn't have made the effort to build this kind of solution ourselves, when there are existing tools that we can leverage. Then some reasons why we ended up going with PubNub. So, PubNub's been around for a pretty long time. So, if you go and Google PubNub, for example, you'd find that there are stack overflow posts from like 2011. So, they've been around for almost 10 years already. So, that makes us more comfortable working with the platform, knowing that they've been around a while, and we can trust them most likely to stay around compared to some of these other platforms that have been around for a shorter period of time.

 

Otto: And like I already mentioned, PubNub is also extendable. A lower level, more generic platform to use. So, right now the use cases we use PubNub for, are the chat and community features, but in the future, if we wanted to do something else, with PubNub, I'm sure that will be possible. So, thinking ahead as well there. And PubNub has a lot of features. Features we could leverage, that are also a bit you later, and they supported most of our use case over in Vincit. And PubNub also has a lot of documentation. They've been around for a really long time already. And they have a pretty good live support as well on their websites, so you can message them if you have any problems with the service. You have access to different levels of email support as well, based on the plan that you have, and with PubNub, it's also free to get started.

 

Otto: The free plan includes all the optional features they have, and you get, I think, up to one million transactions for using the free service. So, you can get pretty far with that as well. And then, if you want to put the PubNub tool that you're building to production, the plan start at 49 bucks, if I remember correctly, and that supports up to 1.5k users, so that's not too expensive either, considering if you're starting out or something like that. Then what is PubNub itself? How do they do what they do, and what do they actually do? So, PubNub is this real time infrastructure. It's a service, pub/sub messaging platform that works over web sockets, and they have servers around the world that provide this low latency, real time capabilities for users, no matter where you're located at. They say that their networks sends over a hundred... Hundreds of millions of devices... Supports hundreds of millions of devices per month, and over 1.4 trillion messages are sent per month as well, so they work on a pretty huge scale.

 

Otto: And how does PubNub work? They have this concept of channels and channel groups. So, everything is kind of built on top of these things, and works kind of as a foundation. So, as a client, you can subscribe to up to 50 channels at a time. And if that's too much, or if you need to do more, then you can subscribe to channel groups, which can house over 2.5k channels, if I remember correctly. I included some codec samples here on the right side. So, this is kind of the very high level overview, of how PubNub works. So, you create a new PubNub instance. You give it a publish and subscribe key from the dashboard that you get, then you publish a message to the PubNub channel, which here I've described as chat room gaming, for example. You can send a message, it can be an object, it can be a stream, it can be any data really that you sent.

 

Otto: And then you can add listeners to actually receive the message, and then subscribe to the channels to receive those on the other end. So, here in the subscribe example, I'm subscribing the chat room dot star, which means that I'm subscribing to this chat namespace, so I'd receive messages from all the chatroom dot channels, with a single connection, which is pretty efficient as well, if you have a lot of devices that you're working with. So, other things that PubNub has some of, which I've mentioned here, access management, so you can control to which clients the publisher is able to send messages to. So, for example, on the picture on the right side, we could restrict it so that only the top two items there would be able to receive the messages, and the rest breast would get unauthorized if you're trying to publish anything. So, that's a very important tool for us. It took two years to create this kind of private sets, for example.

 

Otto: Then message history is something that PubNub provides as well, so you can store messages with PubNub and you can choose to store them for, say, seven days at a time, or indefinitely if you want to. And the cost is not that high for storing it. I think it was eight bucks per one gigabyte of messages, so that's pretty cheap as well. And then something else that PubNub provides is the push notifications for mobile devices. So, anytime a message is published to the PubNub network, you could add an optional push pay load to the message, and then mobile devices would be able to get that message push notification on their devices. And PubNub supports Firebase cloud messaging, which is the one that we are using within the Chief app, and an Apple APNs as well.

 

Otto: User presence is something that I wanted to mention as well. So, you could, for example, display chat through online statuses with a user presence. So, you get to count the amount of the subscribed clients. So for example, you'd have a list of users, and you wanted to show this green circle indicating that who's online currently in your chatroom. Then PubNub functions is something that they have as well, and I wanted to talk separately, but this as well, this is one of the differentiating factors, I think, between PubNub and other platforms. So, PubNub has this concept of functions. Serverless written in Javascript development, no infrastructure required freely. So, you can write these serverless functions in the PubNub admin panel, or you can write them on your own computer locally as well, and push them up to PubNub with the CLI tool that they provide.

 

Otto: What can this PubNub function standard be used for? Is to react to the published messages. So, basically intercepting the message when it goes through the PubNub network. So, it could react to the message before it's published, which means that you can edit the message before it reaches the subscriber. So, for example, you could translate the message to a different language, for example. So, if you send a message in English, you could translate that to Spanish by using some external service, and then send that message forward to the subscribing clients. Or you could also create a profanity field there as well, if you wanted to restrict certain words from being said. The other way you can use this function is just to do operations after publishing. So, by that time, the message has already reached the PubNub network, so you'll know that it's already delivered to the subscribers.

 

Otto: So for example, we are using this functionality to send the messages to our own database, after publish phase of the message. The functions... PubNub has this block's catalog on their website, that showcases different functionalities, that if you want to check that out. There's a lot of different examples like that translation example that I mentioned about, that's one thing that they provide on their website. So, if you're interested in testings, go check that out after the talks. Then here I listed a couple of different use cases from PubNub website. So, we've been mostly using PubNub for the in app chat feature so far, but you could use PubNub for location tracking, for example, a door desk type of delivery tracking on a map, display the real time location of the car, Uber lift style location tracking.

 

Otto: You could use PubNub to transfer messages between IOT devices. Like in a factory, for example, you could send them to your backend service, and then create a live data streaming dashboard on top of that, that displays your IOT device sensor data in real time, for example. So, there's a lot of different ways PubNub can be leveraged for different kinds of stuff, like listed here. And the SDKs that PubNub supports, these are the most popular ones from their website. So, we've been using the JavaScript and Nodejs SDKs, which are kind of the same, but listed separately here. Then Android and Swift SDKs available for mobile. Objective-C, lower level languages like C, then Go, Unity as well for game development purposes, if you want to do some realtime communication there. Then, next I wanted to talk a bit more about our approach to solving these problems that we were facing when building up the community feature, and how we kind of went about it on display. Some examples from the mobile app that we have built as well.

 

Otto: So, the features that we've been building so far include the message board feed, one-on-one and group chat, which are private to users, and thirdly search, and PubNub really supported the first two use cases here, but for search, we had to build something of our own, because PubNub... Even though they can store message history, they don't really support searching the history efficiently, so we had to implement something of our own for that. So, here on the left, you'll see an example of the feed from the mobile app. So, it's similar to other social media platforms as well. So you can like a post, you can bookmark a post. Just a title, body text, icon, the poster name and things like that. Then, when you tap into the post, you get to this post data's page, that's displayed in the middle. So, once you have navigated the post data page, we subscribe to a PubNub channel, and you will receive the message in real time when they arrive.

 

Otto: All right, so that's a pretty cool feature that PubNub lets us build. Also on the right I added this push notification that I received from the message I posted here. So, that's powered by PubNub as well, that you can get these push notifications for the real time communication features that we built. Then here on the left side, we have the inbox feature. This one on one and group chat's displayed here. So, for example, whenever a new message is received on the left side, you'll see the message arriving in real time, and you'll see this olden circle indicating that you have a message, in addition to the timestamp there. And on the left side, you have this private chat going, kind of FaceTime like, that you can send messages back and forth. Then currently, the search... You can search the members and channels, but the most important related to PubNub is posts that I mentioned earlier. So, for searching posts, we had to build something of our own.

 

Otto: The technologies that we've been using in this project, include React Native for the mobile app, and that's been working pretty well for us. Heroku to host the back end code base. GraphQL to communicate with the backend. CircleCI to build up the mobile app, and the backend. And we are using a bunch of AWS services as well, like API gateway, Lambda, Dynamo. Elasticsearch is something that we use for searching the posts and one-on-one chats and other teams. And then of course, PubNub. So, in this architecture diagram, on the left side, we have the mobile client and the web client, and the real time stuff happens on the left side. So, the client's publish messages to PubNub channels, and then the clients in turn subscribe to those channels. So, the real time stuff really happens here on the left side, and that's all that is required for that. But the stuff on the right is something that we implemented for storing the sent messages.

 

Otto: A PubNub serverless function receives the messages from the clients, and that forwards to message to AWS Lambda. Then Lambda in turn inserts the message to DynamoDB, that we use as a storage for the messages right now. And then, in turn another Lambda is linked to this DynamoDB stream, and then DynamoDB trigger receives those chat messages automatically as they are inserted into the database. And then the DynamoDB trigger dumps the message system into Elasticsearch basically, and then the mobile and web clients are able to search the messages via GraphQL to our Heroku backend that we have, that then connects to Elasticsearch, in turn. Lastly, I wanted to share this demo app that I built for the tour, to showcase how easy it is to get started with PubNub, and how easy it is to build these real time chat solutions with it.

 

Otto: So, I implemented this short demo Windows 95-esque chat online. If you want to check that out, it's at vincit-talks-chat.netlify.app. I post it there if you want to try it out. And the source code is available on my github account, if you want to check how easy it is to build this kind of simple public chat application. This is pretty much all I had for the talk, and if there's any questions, I'll be here to answer.

 

Sean: Thank you, Otto. Yeah, there was two questions that came in, and I know that there's a chance that you may have answered them in some form or another, but just to make sure that we're covering off on the two questions that came in. The first one was earlier in the talk saying, what about Firebase instant messaging? If you have any thoughts there. And then, after that, there would be a question around, can you send media through PubNub, and if so, does it get stored in the message history?

 

Otto: I don't have any experience of using the Firebase instant messaging, so I don't really have an educated opinion about that, unfortunately, but for media, I think the message payload has to be an object. I'm not sure if you can send media in. I don't think it's possible to store that kind of data in the message history at least, so you can use it to transmit... Send messages, for example, objects of data, like sensor data, for example, but I'm not a hundred percent sure about media. I don't think it's possible to do that with PubNub.

 

Sean: Got you. And if you want to go ahead and stop sharing your screen, we'll get a look at your face, and we can have a few more questions for you. I have one from Michelle. How long did it take to build this app, and what was your team like?

 

Otto: So, we started working on the project in February. So, it's been a couple of months now. There's been five people developing, working in the project. So, myself, one developer fully focused on the mobile app, then two developers working on the website, and one developer working on the back end, in addition. So, five developers all together. We have been working since February, so a couple of months. It's been mostly working on the mobile app, but we are also starting to implement these chat features on the website as well. So, we've been mostly focused on the mobile app so far this spring.

 

Sean: Great. And one last question we have here is, do you use CodePush in the Chief mobile app?

 

Otto: Actually, I just started to implement that last week, so it'll be in the app shortly, and it's a pretty cool tool that I think... Now that I'm adding it to the app, I think most React native Apps should use. I don't think there's many reasons not to use it to bypass the app store process and get TC and send updates to devices. And just setting up, it's not too hard to do either. So, maybe one or two days of work. So, I recommend looking into it for your React Native apps, if you haven't already. So, that's definitely a good tool to have.

 

Sean: Great. And if there's not any more questions we can move on. I'll give it just a couple more seconds for any further questions. In the meantime, Otto and Nikki, we really want to make sure and thank you for all the speaking today, and all the great work that's been done up until this point. We know what an incredible company Chief is, and the amazing story behind their company, and we can all absolutely get behind and root for their success. And the technology decisions have been a great collaborative effort between the partnership between Vincit and Chief.