Not getting chat bubble using JSQMessageViewController in ios

Question

I am not getting Chat Bubble in JSQMessageViewController but not able to get what to method to be add to get chat bubble in my chat page in IOS I am getting only Textbox and send button when I type text and click send not getting bubbles I am new please help me.

 //  .h File content
        //  ChatpageViewController.h
        //  ChatApp


    #import <UIKit/UIKit.h>
    #import <JSQMessagesViewController/JSQMessages.h>
    #import <JSQMessagesViewController.h>
    #import "JSQMessagesCollectionViewFlowLayout.h"
    #import "JSQMessages.h"
    #import "JSQPhotoMediaItem.h"
    #import "JSQLocationMediaItem.h"
    #import "JSQVideoMediaItem.h"
    #import "JSQMessagesMediaViewBubbleImageMasker.h"
    #import "JSQMessagesAvatarImage.h"
    #import "JSQMessagesAvatarImageFactory.h"
    #import "JSQMessagesBubbleImage.h"
    #import "JSQMessagesBubbleImageFactory.h"
    #import "UIImage+JSQMessages.h"



    @interface ChatpageViewController : JSQMessagesViewController<JSQMessagesCollectionViewDataSource,JSQMessagesCollectionViewDelegateFlowLayout,JSQMessagesCollectionViewCellDelegate,JSQMessageData,JSQMessageMediaData,JSQMessageAvatarImageDataSource,JSQMessageBubbleImageDataSource>

    @property(nonatomic,strong)NSDictionary * receivedict;


    @property (strong, nonatomic) IBOutlet UILabel *name;
    @property (strong, nonatomic) IBOutlet UILabel *mobile;
    - (IBAction)cancelbtn:(id)sender;


    @end

M File starts from here

//
//  ChatpageViewController.m
//  ChatApp
//


#import "ChatpageViewController.h"


@interface ChatpageViewController ()
{

}

@end

@implementation ChatpageViewController
@synthesize receivedict,name,mobile;




-(void)viewWillAppear:(BOOL)animated
{

    self.collectionView.collectionViewLayout.springinessEnabled = YES;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
       // Do any additional setup after loading the view.
    [self.navigationController setNavigationBarHidden:YES animated:YES];
NSLog(@"%@",receivedict);
    name.text = [receivedict objectForKey:@"Name"];
    id.text =[receivedict objectForKey:@"Id"];



}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (NSString *)senderId
{
    return [receivedict objectForKey:@"Id"];
}


- (NSString *)senderDisplayName
{

    return [receivedict objectForKey:@"Name"];
}

- (NSDate *)date
{
    return 18/03/2016;
}


- (void)didPressSendButton:(UIButton *)button withMessageText:(NSString *)text senderId:(NSString *)senderId senderDisplayName:(NSString *)senderDisplayName date:(NSDate *)date
{

    [JSQSystemSoundPlayer jsq_playMessageSentSound];

    JSQMessage *message = [[JSQMessage alloc] initWithSenderId:senderId
                                             senderDisplayName:senderDisplayName
                                                          date:date
                                                          text:text];
   // [demoData.messages addObject:message];
    [self finishSendingMessageAnimated:YES];


    NSLog(@"%@",message);
}



- (IBAction)cancelbtn:(id)sender
{
    [self.navigationController popViewControllerAnimated:YES];
}
@end

1. You have to add the message to your datasource in order to update the underlying collectionview and see the actual bubbles (something that is currently commented out in your code...) 2. Please post _real_ code... `return 18/03/2016;` is not an `NSDate`... — Alladinian, Mar 18 '16 at 10:07
Sorry In hurry I put that date to return, But I want to know what are the method to be implemented to get bubbles. because I am getting message typing textfield and send button when i click the send no bubbles are coming — VyTcdc, Mar 18 '16 at 10:15

score 2 · Answer 1 · answered Mar 18 '16 at 10:23

There is lots of problem in your code .. You are not implementing all JSQ methods .. kindly check how to integrate JSQMessageViewController and than for bubbles that is you main question check answer below :-

You have to use JSQMessagesBubbleImage class to get bubbles like ...

in .h file define

 @property (strong, nonatomic) JSQMessagesBubbleImage *outgoingBubbleImageData;
 @property (strong, nonatomic) JSQMessagesBubbleImage *incomingBubbleImageData;

in .m file in viewDidLoad

JSQMessagesBubbleImageFactory *bubbleFactory = [[JSQMessagesBubbleImageFactory alloc] init];

self.outgoingBubbleImageData = [bubbleFactory outgoingMessagesBubbleImageWithColor:[UIColor jsq_messageBubbleBlueColor]];
self.incomingBubbleImageData = [bubbleFactory incomingMessagesBubbleImageWithColor:[UIColor jsq_messageBubbleLightGrayColor]];

than provide JSQMessages CollectionView DataSource

 - (id<JSQMessageBubbleImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView messageBubbleImageDataForItemAtIndexPath:(NSIndexPath *)indexPath
{
    JSQMessage *message = [messages objectAtIndex:indexPath.item];

    if ([message.senderId isEqualToString:self.senderId]) {
          return self.outgoingBubbleImageData;
    }

    return self.incomingBubbleImageData;
}

Hi I have added the above method in my .h and .m file still I am not getting the bubbles, Please help me, I have mentioned my project file link bellow https://www.dropbox.com/s/41rwahp082g999g/ChatAppod.zip?dl=0 — VyTcdc, Mar 18 '16 at 12:13
follow this https://github.com/jessesquires/JSQMessagesViewController/blob/develop/JSQMessagesDemo/DemoMessagesViewController.m .. you need to provide source to JSQ collectionview ... just check demo — Bhavin Bhadani, Mar 18 '16 at 12:20

score 0 · Answer 2 · answered Mar 22 '16 at 07:13

I tried after adding the bellow methods in my coding then I have got the bubble with the bellow post other functions - (void)didPressSendButton:(UIButton *)button etc.

- (id<JSQMessageBubbleImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView messageBubbleImageDataForItemAtIndexPath:(NSIndexPath *)indexPath
{
    JSQMessage *message = [fularray objectAtIndex:indexPath.item];

    if ([message.senderId isEqualToString:self.senderId]) {
        return self.outgoingBubbleImageData;
    }

    return self.incomingBubbleImageData;
}

- (id<JSQMessageAvatarImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView avatarImageDataForItemAtIndexPath:(NSIndexPath *)indexPath {
    return [JSQMessagesAvatarImageFactory avatarImageWithUserInitials:@"JL" backgroundColor:[UIColor blueColor] textColor:[UIColor whiteColor] font:[UIFont systemFontOfSize:12.0] diameter:30.0];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return [fularray count];
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (id<JSQMessageData>)collectionView:(JSQMessagesCollectionView *)collectionView messageDataForItemAtIndexPath:(NSIndexPath *)indexPath {
    return fularray[indexPath.row];
}

Not getting chat bubble using JSQMessageViewController in ios

2 Answers2