■はじめに
JSQMessagesViewControllerとFirebaseを使ってリアルタイムチャットを作ってみました。以下参考にさせていただいた記事はSwift2で書かれてるので、Swift4でも動くように直したコードを本記事に残します。ライブラリの導入等、実装以外の部分は以下記事を参考にしてみてください。
■開発環境
・Xcode9.3.1
・Swift4.1
■コード
(1)AppDelegate.swift
import UIKit import Firebase @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { FirebaseApp.configure() return true } func applicationWillResignActive(_ application: UIApplication) { // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state. // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game. } func applicationDidEnterBackground(_ application: UIApplication) { // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits. } func applicationWillEnterForeground(_ application: UIApplication) { // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background. } func applicationDidBecomeActive(_ application: UIApplication) { // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface. } func applicationWillTerminate(_ application: UIApplication) { // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:. } }
(2)ViewController.swift
import UIKit import Firebase import JSQMessagesViewController class ViewController: JSQMessagesViewController { // データベースへの参照を定義 var ref: DatabaseReference! // メッセージ内容に関するプロパティ var messages: [JSQMessage]? // 背景画像に関するプロパティ var incomingBubble: JSQMessagesBubbleImage! var outgoingBubble: JSQMessagesBubbleImage! // アバター画像に関するプロパティ var incomingAvatar: JSQMessagesAvatarImage! var outgoingAvatar: JSQMessagesAvatarImage! func setupFirebase() { // DatabaseReferenceのインスタンス化 ref = Database.database().reference() // 最新25件のデータをデータベースから取得する // 最新のデータが追加されるたびに最新データを取得する ref.queryLimited(toLast: 25).observe(DataEventType.childAdded, with: { (snapshot) -> Void in let snapshotValue = snapshot.value as! NSDictionary let text = snapshotValue["text"] as! String let sender = snapshotValue["from"] as! String let name = snapshotValue["name"] as! String print(snapshot.value!) let message = JSQMessage(senderId: sender, displayName: name, text: text) self.messages?.append(message!) self.finishSendingMessage() }) } override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. // クリーンアップツールバーの設定 inputToolbar!.contentView!.leftBarButtonItem = nil // 新しいメッセージを受信するたびに下にスクロールする automaticallyScrollsToMostRecentMessage = true // 自分のsenderId, senderDisplayNameを設定 self.senderId = "user1" self.senderDisplayName = "test" // 吹き出しの設定 let bubbleFactory = JSQMessagesBubbleImageFactory() self.incomingBubble = bubbleFactory?.incomingMessagesBubbleImage(with: UIColor.jsq_messageBubbleLightGray()) self.outgoingBubble = bubbleFactory?.outgoingMessagesBubbleImage(with: UIColor.jsq_messageBubbleBlue()) // アバターの設定 self.incomingAvatar = JSQMessagesAvatarImageFactory.avatarImage(with: UIImage(named: "Swift-Logo")!, diameter: 64) self.outgoingAvatar = JSQMessagesAvatarImageFactory.avatarImage(with: UIImage(named: "Swift-Logo")!, diameter: 64) //メッセージデータの配列を初期化 self.messages = [] setupFirebase() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } // Sendボタンが押された時に呼ばれるメソッド override func didPressSend(_ button: UIButton, withMessageText text: String, senderId: String, senderDisplayName: String, date: Date) { //メッセージの送信処理を完了する(画面上にメッセージが表示される) self.finishReceivingMessage(animated: true) //firebaseにデータを送信、保存する let post1 = ["from": senderId, "name": senderDisplayName, "text":text] let post1Ref = ref.childByAutoId() post1Ref.setValue(post1) self.finishSendingMessage(animated: true) //キーボードを閉じる self.view.endEditing(true) } // アイテムごとに参照するメッセージデータを返す override func collectionView(_ collectionView: JSQMessagesCollectionView, messageDataForItemAt indexPath: IndexPath) -> JSQMessageData { return messages![indexPath.item] } // アイテムごとのMessageBubble(背景)を返す override func collectionView(_ collectionView: JSQMessagesCollectionView, messageBubbleImageDataForItemAt indexPath: IndexPath) -> JSQMessageBubbleImageDataSource { let message = self.messages?[indexPath.item] if message?.senderId == self.senderId { return self.outgoingBubble } return self.incomingBubble } // アイテムごとにアバター画像を返す override func collectionView(_ collectionView: JSQMessagesCollectionView, avatarImageDataForItemAt indexPath: IndexPath) -> JSQMessageAvatarImageDataSource? { let message = self.messages?[indexPath.item] if message?.senderId == self.senderId { return self.outgoingAvatar } return self.incomingAvatar } // アイテムの総数を返す override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return messages!.count } }
■おわりに
Swift2で書かれたコードをSwift4に直したことはこれまでもあるのですが、やはり変更が多く手こずりました。。ただ、直す中で学ぶことも多いので、今回のような実装が今後あっても前向きにチャレンジしていきたいと思います！
■関連リンク
・GitHub - jessesquires/JSQMessagesViewController: [DEPRECATED] An elegant messages UI library for iOS
