-1

I am trying to build a chat app in swift using JSQMessagesViewController. Unfortunately, messages do not appear on screen. The only thing visible is the input bar.

This is what my view looks like

I followed the instructions in this tutorial: https://www.raywenderlich.com/122148/firebase-tutorial-real-time-chat except I didn't strat with the demo app but used my own application as a starting point. Thus, I am not using a storyboard or a navigationController.

This is my chatController:

import Foundation
import UIKit
import Foundation
import JSQMessagesViewController

class chatController: JSQMessagesViewController {

var messages = [JSQMessage]()
var outgoingBubbleImageView: JSQMessagesBubbleImage!
var incomingBubbleImageView: JSQMessagesBubbleImage!

private func setupBubbles() {
    let factory = JSQMessagesBubbleImageFactory()
    outgoingBubbleImageView = factory.outgoingMessagesBubbleImageWithColor(UIColor.jsq_messageBubbleBlueColor())
    incomingBubbleImageView = factory.incomingMessagesBubbleImageWithColor(UIColor.jsq_messageBubbleLightGrayColor())
}

override func viewDidLoad() {
    super.viewDidLoad()
    title = "Sprout"
    setupBubbles()
    collectionView!.collectionViewLayout.incomingAvatarViewSize = CGSizeZero
    collectionView!.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero

    print(self.view.frame)
}

override func viewDidLayoutSubviews() {
    self.collectionView.frame = self.view.frame
    //self.collectionView.setNeedsLayout()
    //self.collectionView.layoutIfNeeded()
    print("collectionview frame: \(self.collectionView.frame)")
    print("view frame: \(self.view.frame)")
}

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)

    // messages from someone else
    addMessage("foo", text: "Hey person!")
    // messages sent from local sender
    addMessage(senderId, text: "Yo!")
    addMessage(senderId, text: "I like turtles!")
    // animates the receiving of a new message on the view
    finishReceivingMessage()
}

override func viewDidDisappear(animated: Bool) {
    super.viewDidDisappear(animated)
}

override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {
    let message = messages[indexPath.item] // 1
    if message.senderId == senderId { // 2
        return outgoingBubbleImageView
    } else { // 3
        return incomingBubbleImageView
    }
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
    let cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath) as! JSQMessagesCollectionViewCell

    let message = messages[indexPath.item]

    if message.senderId == senderId {
        cell.textView!.textColor = UIColor.whiteColor()
    } else {
        cell.textView!.textColor = UIColor.blackColor()
    }

    return cell
}

override func didPressSendButton(button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: NSDate!) {

    self.addMessage(senderId, text: text);
    finishSendingMessage()
}

func addMessage(id: String, text: String) {
    print("add message: \(text)")
    let message = JSQMessage(senderId: id, displayName: "", text: text)
    messages.append(message)
}
}

which I am showing calling this code from my rootViewController:

let userID = "abc123"
let userName = "randomUserName"
let chatVc = chatController()
chatVc.senderId = userID
chatVc.senderDisplayName = userName
self.presentViewController(chatVc, animated: true, completion: nil)

I tried to clean the project without success. Can somebody help me display the message bubbles? Thanks for any help! Kind regards, Alex

Isuru
  • 30,617
  • 60
  • 187
  • 303
Alexander
  • 51
  • 10
  • Did you try with `indexPath.row` instead of `indexPath.item` ? – Zico Sep 16 '16 at 12:17
  • Thanks, I just did. But it didn't change anything. – Alexander Sep 16 '16 at 12:24
  • Ok, actually I don't know that library and it was the only thing that I know could cause your problem. – Zico Sep 16 '16 at 12:25
  • Where is Message Observer Logic ? observeMessages () – Nitesh Sep 16 '16 at 12:25
  • Try that then add that into your ViewDidAppear too. I had faced the same problem few weeks back. – Nitesh Sep 16 '16 at 12:28
  • it's not implemented yet @Nitesh . In the tutorial it is used to observe firebase changes, but before I start to fetch messages from a database I need to display hard coded messages. – Alexander Sep 16 '16 at 12:28
  • I think you didn't put your text inside the cell ? I might be wrong but that the next point that is bugging me. – Zico Sep 16 '16 at 12:30
  • @Zico what do you mean by that? – Alexander Sep 16 '16 at 12:54
  • 1
    Sorry it was a mistake. So when I looked at their [example](https://github.com/jessesquires/JSQMessagesViewController/blob/develop/SwiftExample/SwiftExample/ChatViewController.swift), I think your are missing some methods like, [numberOfItemsInSection](https://github.com/jessesquires/JSQMessagesViewController/blob/develop/SwiftExample/SwiftExample/ChatViewController.swift#L336). – Zico Sep 16 '16 at 13:12
  • Yeah I just found that missing the moment you commented! So I implemented it, now I am getting an Assertion failure, looking deeper into this.. – Alexander Sep 16 '16 at 13:13
  • 1
    @Zico that's it! I was missing two functions, must have overseen them. Thanks for your help, it is working now! – Alexander Sep 16 '16 at 13:16

1 Answers1

0

So I fixed it now, I was missing two functions:

override func collectionView(collectionView: JSQMessagesCollectionView!, 
messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {
  return messages[indexPath.item]
}

override func collectionView(collectionView: UICollectionView, 
numberOfItemsInSection section: Int) -> Int {
  return messages.count
}

I must have overseen them when I was following the tutorial. With @Zico 's help, I found the mistake and fixed it.

Alexander
  • 51
  • 10