Implementing Chat/Messaging in iOS apps with Layer
Introduction
Layer is an open communications layer for the Internet, a platform that enables app creators everywhere to easily add native communications to their products.
Whether an app is centered around compelling content in sports, entertainment or news — or the focus is finding and buying a concert ticket or a t-shirt, booking a flight or hotel, or hailing a town car or taxi — enabling users to engage with one another in-app and in context is the key to a delightful user experience.
Layer is one of the easiest ways to integrate chat and messsaging features in your apps. With the recent launch of Atlas, it is even easier to integrate Layer in your app using its fully featured, high performance, 100% customizable UI kit.
Implementation
This tutorial explains how to quickly get started with Layer and Atlas to create a simple app to chat between a device and a simulator.
Configuration
Set up Layer
The first step is to connect the layer client. Add the following to your AppDelegate.m
static NSString *const kLayerAppID = @"LAYER-APP-ID"; // TODO Update layer app id here
// ...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// ...
// Setup Layer
_layerClient = [LYRClient clientWithAppID:[[NSUUID alloc] initWithUUIDString:kLayerAppID]];
self.layerClient.autodownloadMIMETypes = [NSSet setWithObjects:ATLMIMETypeImageJPEGPreview, ATLMIMETypeTextPlain, nil];
[self.layerClient connectWithCompletion:^(BOOL success, NSError *error) {
if (!success) {
NSLog(@"Failed to connect to Layer: %@", error);
} else {
// TODO This will usually be in a view controller after the user authenticates
// For the purposes of this Quick Start project, let's authenticate as a user named 'Device/Simulator'.
#if TARGET_IPHONE_SIMULATOR
NSString *userIDString = @"Simulator";
#else // TARGET_IPHONE_SIMULATOR
NSString *userIDString = @"Device";
#endif // TARGET_IPHONE_SIMULATOR
// Once connected, authenticate user.
// Check Authenticate step for authenticateLayerWithUserID source
[self authenticateLayerWithUserID:userIDString completion:^(BOOL success, NSError *error) {
if (!success) {
NSLog(@"Failed Authenticating Layer Client with error:%@", error);
}
}];
}
}];
}Authenticate
Once connected, it is time to authenticate the LYRClient object. Layer authentication requires that a backend server generate an Identity Token on behalf of the client. For testing purposes, Layer provides a sample backend that takes care of this.
- (void)authenticateLayerWithUserID:(NSString *)userID completion:(void (^)(BOOL success, NSError * error))completion
{
// Check to see if the layerClient is already authenticated.
if (self.layerClient.authenticatedUserID) {
// If the layerClient is authenticated with the requested userID, complete the authentication process.
if ([self.layerClient.authenticatedUserID isEqualToString:userID]){
NSLog(@"Layer Authenticated as User %@", self.layerClient.authenticatedUserID);
if (completion) completion(YES, nil);
return;
} else {
//If the authenticated userID is different, then deauthenticate the current client and re-authenticate with the new userID.
[self.layerClient deauthenticateWithCompletion:^(BOOL success, NSError *error) {
if (!error){
[self authenticationTokenWithUserId:userID completion:^(BOOL success, NSError *error) {
if (completion){
completion(success, error);
}
}];
} else {
if (completion){
completion(NO, error);
}
}
}];
}
} else {
// If the layerClient isn't already authenticated, then authenticate.
[self authenticationTokenWithUserId:userID completion:^(BOOL success, NSError *error) {
if (completion){
completion(success, error);
}
}];
}
}
- (void)authenticationTokenWithUserId:(NSString *)userID completion:(void (^)(BOOL success, NSError* error))completion{
/*
* 1. Request an authentication Nonce from Layer
*/
[self.layerClient requestAuthenticationNonceWithCompletion:^(NSString *nonce, NSError *error) {
if (!nonce) {
if (completion) {
completion(NO, error);
}
return;
}
/*
* 2. Acquire identity Token from Layer Identity Service
*/
[self requestIdentityTokenForUserID:userID appID:[self.layerClient.appID UUIDString] nonce:nonce completion:^(NSString *identityToken, NSError *error) {
if (!identityToken) {
if (completion) {
completion(NO, error);
}
return;
}
/*
* 3. Submit identity token to Layer for validation
*/
[self.layerClient authenticateWithIdentityToken:identityToken completion:^(NSString *authenticatedUserID, NSError *error) {
if (authenticatedUserID) {
if (completion) {
completion(YES, nil);
}
NSLog(@"Layer Authenticated as User: %@", authenticatedUserID);
} else {
completion(NO, error);
}
}];
}];
}];
}The following code snippet connects to the sample Layer Identity Service, generates an Identity Token on behalf your application, and authenticates the LYRClient. Note that in production apps, you would need to update it to communicate with your backend and generate a token for Layer. Please check out the Layer Authentication Guide for setting up your backend for this.
- (void)requestIdentityTokenForUserID:(NSString *)userID appID:(NSString *)appID nonce:(NSString *)nonce completion:(void(^)(NSString *identityToken, NSError *error))completion
{
NSParameterAssert(userID);
NSParameterAssert(appID);
NSParameterAssert(nonce);
NSParameterAssert(completion);
NSURL *identityTokenURL = [NSURL URLWithString:@"https://layer-identity-provider.herokuapp.com/identity_tokens"];
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:identityTokenURL];
request.HTTPMethod = @"POST";
[request setValue:@"application/json" forHTTPHeaderField:@"Content-Type"];
[request setValue:@"application/json" forHTTPHeaderField:@"Accept"];
NSDictionary *parameters = @{ @"app_id": appID, @"user_id": userID, @"nonce": nonce };
NSData *requestBody = [NSJSONSerialization dataWithJSONObject:parameters options:0 error:nil];
request.HTTPBody = requestBody;
NSURLSessionConfiguration *sessionConfiguration = [NSURLSessionConfiguration ephemeralSessionConfiguration];
NSURLSession *session = [NSURLSession sessionWithConfiguration:sessionConfiguration];
[[session dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
if (error) {
completion(nil, error);
return;
}
// Deserialize the response
NSDictionary *responseObject = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
if(![responseObject valueForKey:@"error"])
{
NSString *identityToken = responseObject[@"identity_token"];
completion(identityToken, nil);
}
else
{
NSString *domain = @"layer-identity-provider.herokuapp.com";
NSInteger code = [responseObject[@"status"] integerValue];
NSDictionary *userInfo =
@{
NSLocalizedDescriptionKey: @"Layer Identity Provider Returned an Error.",
NSLocalizedRecoverySuggestionErrorKey: @"There may be a problem with your APPID."
};
NSError *error = [[NSError alloc] initWithDomain:domain code:code userInfo:userInfo];
completion(nil, error);
}
}] resume];
}Building the UI
Participant
A participant is a user that participates in a conversation. It contains information for Atlas to render the details about the user when displaying conversations. Create a class PGUser that implements the ATLParticipant and ATLAvatarItem protocols. For the simple example, it uses the participant identifier as all properties of the users, but you will need to modify it to fetch these properties from your API based on the participant identifier.
// PGUser.h
@interface PGUser : NSObject <ATLParticipant, ATLAvatarItem>
@property(nonatomic, readonly) NSString *firstName;
@property(nonatomic, readonly) NSString *lastName;
@property(nonatomic, readonly) NSString *fullName;
@property(nonatomic, readonly) NSString *participantIdentifier;
@property(nonatomic, readonly) UIImage *avatarImage;
@property(nonatomic, readonly) NSString *avatarInitials;
- (instancetype)initWithParticipantIdentifier:(NSString *)participantIdentifier;
+ (instancetype)userWithParticipantIdentifier:(NSString *)participantIdentifier;
@end
// PGUser.m
@implementation PGUser
- (instancetype)initWithParticipantIdentifier:(NSString *)participantIdentifier {
self = [super init];
if (self) {
_participantIdentifier = participantIdentifier;
_firstName = participantIdentifier;
_lastName = participantIdentifier;
_fullName = participantIdentifier;
_avatarInitials = [participantIdentifier substringToIndex:1];
}
return self;
}
+ (instancetype)userWithParticipantIdentifier:(NSString *)participantIdentifier {
return [[self alloc] initWithParticipantIdentifier:participantIdentifier];
}
@endShow all user conversations
The user is now authenticated to Layer. Let’s grab and show all conversations the user is currently involved in. Create a subclass PGConversationListViewController of ATLConversationListViewController.
// PGConversationListViewController.h
@interface PGConversationListViewController : ATLConversationListViewController <ATLParticipantTableViewControllerDelegate>
- (void)selectConversation:(LYRConversation *)conversation;
+ (NSSet *)participants;
@end
// PGConversationListViewController.m
@implementation PGConversationListViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Set data source and delegate
self.dataSource = self;
self.delegate = self;
// Add a create chat button
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(createNewChat:)];
}
#pragma mark - Conversation List Data Source
- (NSString *)conversationListViewController:(ATLConversationListViewController *)conversationListViewController titleForConversation:(LYRConversation *)conversation {
NSMutableSet *participantIdentifiers = [conversation.participants mutableCopy];
[participantIdentifiers minusSet:[NSSet setWithObject:self.layerClient.authenticatedUserID]];
if (participantIdentifiers.count == 0) return @"Personal Conversation";
NSMutableSet *participants = [[self participantsForIdentifiers:participantIdentifiers] mutableCopy];
if (participants.count == 0) return @"No Matching Participants";
if (participants.count == 1) return [[participants allObjects][0] fullName];
NSMutableArray *firstNames = [NSMutableArray new];
[participants enumerateObjectsUsingBlock:^(id obj, BOOL *stop) {
id <ATLParticipant> participant = obj;
if (participant.firstName) {
// Put the last message sender's name first
if ([conversation.lastMessage.sentByUserID isEqualToString:participant.participantIdentifier]) {
[firstNames insertObject:participant.firstName atIndex:0];
} else {
[firstNames addObject:participant.firstName];
}
}
}];
NSString *firstNamesString = [firstNames componentsJoinedByString:@", "];
return firstNamesString;
}
#pragma mark - Conversation List Delegate
- (void)conversationListViewController:(ATLConversationListViewController *)conversationListViewController didSelectConversation:(LYRConversation *)conversation {
[self presentConversationControllerForConversation:conversation];
}
#pragma mark - Participant Delegate
- (void)participantTableViewController:(ATLParticipantTableViewController *)participantTableViewController didSelectParticipant:(id <ATLParticipant>)participant {
[self.navigationController popViewControllerAnimated:NO];
// Create a new conversation
NSError *error = nil;
LYRConversation *conversation = [self.layerClient newConversationWithParticipants:[NSSet setWithArray:@[self.layerClient.authenticatedUserID, participant.participantIdentifier]] options:nil error:&error];
if (!conversation) {
NSLog(@"New Conversation creation failed: %@", error);
} else {
[self presentConversationControllerForConversation:conversation];
}
}
- (void)participantTableViewController:(ATLParticipantTableViewController *)participantTableViewController didSearchWithString:(NSString *)searchText completion:(void (^)(NSSet *filteredParticipants))completion {
}
#pragma mark - Helpers
- (void)presentConversationControllerForConversation:(LYRConversation *)conversation {
ATLConversationViewController *conversationViewController = [PGConversationViewController conversationViewControllerWithLayerClient:self.layerClient];
conversationViewController.conversation = conversation;
[self.navigationController pushViewController:conversationViewController animated:YES];
}
- (NSSet *)participantsForIdentifiers:(NSSet *)identifiers {
NSMutableSet *participants = [[NSMutableSet alloc] initWithCapacity:identifiers.count];
for (NSString *identifier in identifiers) {
[participants addObject:[PGUser userWithParticipantIdentifier:identifier]];
}
return participants;
}
#pragma mark - User Interaction
- (void)createNewChat:(id)sender {
ATLParticipantTableViewController *participantTableViewController = [ATLParticipantTableViewController participantTableViewControllerWithParticipants:[PGConversationListViewController participants] sortType:ATLParticipantPickerSortTypeFirstName];
participantTableViewController.delegate = self;
[self.navigationController pushViewController:participantTableViewController animated:YES];
}
#pragma mark - Static
+ (NSSet *)participants {
__block NSSet *participants;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
participants = [NSSet setWithArray:@[[PGUser userWithParticipantIdentifier:@"Device"], [PGUser userWithParticipantIdentifier:@"Simulator"]]];
});
return participants;
}
@endJust present this controller to open all chats the user is currently involved in. Let’s present this from our AppDelegate for now. Add this to the end of application:didFinishLaunchingWithOptions: (Note: It assumes that the initial view controller in the storyboard is a UINavigationController)
UINavigationController *navigationController = (UINavigationController *) self.window.rootViewController;
self.conversationListViewController = [LCConversationListViewController conversationListViewControllerWithLayerClient:self.layerClient];
[navigationController pushViewController:self.conversationListViewController animated:NO];Show all messages in a conversation
Now that we have all the conversations the user is involved in, let’s see how we can show all messages inside a single conversation. Create a subclass PGConversationViewController of ATLConversationViewController.
// PGConversationViewController.h
@interface PGConversationViewController : ATLConversationViewController <ATLConversationViewControllerDataSource, ATLConversationViewControllerDelegate>
@end
// PGConversationViewController.m
@implementation PGConversationViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.delegate = self;
self.dataSource = self;
}
#pragma mark - Conversation Data Source
- (id <ATLParticipant>)conversationViewController:(ATLConversationViewController *)conversationViewController participantForIdentifier:(NSString *)participantIdentifier {
// TODO Return the user corresponding to this participant identifier
return [PGUser userWithParticipantIdentifier:participantIdentifier];
}
- (NSAttributedString *)conversationViewController:(ATLConversationViewController *)conversationViewController attributedStringForDisplayOfDate:(NSDate *)date {
return [[NSAttributedString alloc] initWithString:[NSDateFormatter localizedStringFromDate:date dateStyle:NSDateFormatterShortStyle timeStyle:NSDateFormatterShortStyle]];
}
- (NSAttributedString *)conversationViewController:(ATLConversationViewController *)conversationViewController attributedStringForDisplayOfRecipientStatus:(NSDictionary *)recipientStatus {
NSMutableDictionary *mutableRecipientStatus = [recipientStatus mutableCopy];
if ([mutableRecipientStatus valueForKey:self.layerClient.authenticatedUserID]) {
[mutableRecipientStatus removeObjectForKey:self.layerClient.authenticatedUserID];
}
NSString *statusString = [NSString new];
if (mutableRecipientStatus.count > 1) {
__block NSUInteger readCount = 0;
__block BOOL delivered;
__block BOOL sent;
[mutableRecipientStatus enumerateKeysAndObjectsUsingBlock:^(NSString *userID, NSNumber *statusNumber, BOOL *stop) {
LYRRecipientStatus status = (LYRRecipientStatus) statusNumber.integerValue;
switch (status) {
case LYRRecipientStatusInvalid:
break;
case LYRRecipientStatusSent:
sent = YES;
break;
case LYRRecipientStatusDelivered:
delivered = YES;
break;
case LYRRecipientStatusRead:
NSLog(@"Read");
readCount += 1;
break;
}
}];
if (readCount) {
NSString *participantString = readCount > 1 ? @"Participants" : @"Participant";
statusString = [NSString stringWithFormat:@"Read by %lu %@", (unsigned long) readCount, participantString];
} else if (delivered) {
statusString = @"Delivered";
} else if (sent) {
statusString = @"Sent";
}
} else {
__block NSString *blockStatusString = [NSString new];
[mutableRecipientStatus enumerateKeysAndObjectsUsingBlock:^(NSString *userID, NSNumber *statusNumber, BOOL *stop) {
if ([userID isEqualToString:self.layerClient.authenticatedUserID]) return;
LYRRecipientStatus status = (LYRRecipientStatus) statusNumber.integerValue;
switch (status) {
case LYRRecipientStatusInvalid:
blockStatusString = @"Not Sent";
case LYRRecipientStatusSent:
blockStatusString = @"Sent";
case LYRRecipientStatusDelivered:
blockStatusString = @"Delivered";
break;
case LYRRecipientStatusRead:
blockStatusString = @"Read";
break;
}
}];
statusString = blockStatusString;
}
return [[NSAttributedString alloc] initWithString:statusString attributes:@{NSFontAttributeName : [UIFont boldSystemFontOfSize:11]}];
}
@endThat’s all you need to integrate a chat in your application. Need help setting this up or just want to chat? Shoot me an email at pulkit110@gmail.com.
Published 9 Apr 2015