今回は
前回の記事(iOSアプリのUIをAndroidライクに作成できるライブラリを作ってみた)
で紹介させていただいたライブラリを使って実際にサンプルアプリを作ってみました。
完成品はこちら
##アプリ概要
クライアント: iOS
サーバー: Rails
複数のiOS端末でメッセージチャットが出来る、以上！
##サーバー側準備
とりあえずrails newでアプリ作成。
$ rails new chat_test
ActionCableを作成して、
$ rails g channel room chat
ActionCableの設定を修正。
application.rb
module ChatTest
class Application < Rails::Application
config.load_defaults 5.2
config.action_cable.allowed_request_origins = [/ws:*/]
end
end
今回は簡単な実装なので全員同じ部屋にぶち込みます。
メッセージが来たら通信が確立されている全端末に届いたメッセージを送信するように設定。
channels/room_channel
class RoomChannel < ApplicationCable::Channel
def subscribed
stream_from "chat_room_channel"
end
def chat data
ActionCable.server.broadcast "chat_room_channel", chat_message: {message: data["message"], uuid: data["uuid"]}
end
end
あとはサーバーを起動してサーバー側の実装は完了。（ポートはSwiftJsonUIのホットロード機能用に3000と8080を使っているので3100を使用。）
$ rails s -p 3100 -b 0.0.0.0
##クライアント側準備
まずはアプリケーションを作成して
アプリケーションの初期設定でHotLoaderを有効に。詳しくはライブラリのwikiに書いてますのでご確認くださいませ。
Appdelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
SJUIViewCreator.copyResourcesToDocuments()
return true
}
func applicationDidBecomeActive(_ application: UIApplication) {
#if DEBUG
HotLoader.instance.isHotLoadEnabled = true
#endif
}
hot_loaderも微修正して準備完了。
hot_loader/server.js
var watcher = chokidar.watch('../chat-test/*/*.json',{
...
}
hot_loader/layout_loader.js
app.get("/layout_loader", function(req, res, next){
var filePath = path.join(__dirname, "../chat-test");
チャット用のViewControllerを作成してそれをwindowのrootViewControllerに設定。
StoryBoardは使わないので削除。
チャットのメッセージ用のモデルChatMessageモデル、チャットのWebSocket管理用のクラスChatManager、チャット表示ようのUICollectionViewCellのChatCollectionViewCellを作成して
必要なファイルを揃えた後のプロジェクト構成はこんな感じ。
一応今後の拡張も考えて標準ビューコントローラーのDefaultViewControllerも作成。
チャットは自分と自分以外で左右に吹き出しを分けたいのでChatCollectionViewCellの子クラスにChatMeCollectionViewCellとChatYouCollectionViewCellも作成しておきます。
WebSocket通信の管理クラスであるChatManagerクラスはこんな感じ。
今回のメインはSwiftJsonUIのライブラリの使い方なので詳細は省略。
ChatManaget.swift
protocol ChatManagerDelegate: class {
func didConnected()
func failedToConnect(error: Error)
func onReceiveMessage(chatMessage: ChatMessage)
func didSendMessage()
func failedToSendMessage(error: Error)
}
class ChatManager: WebSocketDelegate {
private static var Instance = ChatManager()
public static var instance: ChatManager {
get {
return Instance
}
}
public var isChatEnabled: Bool = false
{
willSet {
if newValue != isChatEnabled {
newValue ? connectToSocket() : disconnectFromSocket()
}
}
}
weak var delegate: ChatManagerDelegate?
let uuid = UUID().uuidString
private lazy var handleQueue: DispatchQueue = DispatchQueue(label: "socket_queue")
private var _socket: WebSocket?
private func createSocket() -> WebSocket {
let socket = WebSocket(url: URL(string: "ws://\((Bundle.main.object(forInfoDictionaryKey: "CurrentIp") as? String) ?? ""):3100/cable/")!)
socket.delegate = self
socket.callbackQueue = handleQueue
return socket
}
private func connectToSocket() {
guard (self._socket == nil || !self._socket!.isConnected) else {
return
}
handleQueue.async(execute: {
print("connect to server")
self._socket = self.createSocket()
self._socket?.connect()
})
}
private func disconnectFromSocket() {
guard let socket = self._socket, socket.isConnected else {
return
}
handleQueue.async(execute: {
socket.disconnect()
self._socket = nil
})
}
func websocketDidConnect(socket: WebSocketClient) {
handleQueue.async(execute: {
let time = Date()
let data = ["action": "subscribed", "data": "\(time)"]
do {
let jsonAction = try JSONSerialization.data(withJSONObject: data, options: JSONSerialization.WritingOptions.prettyPrinted)
let jsonChannel = try JSONSerialization.data(withJSONObject: ["channel": "RoomChannel"], options: JSONSerialization.WritingOptions.prettyPrinted)
let commandDict = [
"command" : "subscribe",
"identifier": String(data: jsonChannel, encoding: String.Encoding.utf8)!,
"data": String(data: jsonAction, encoding: String.Encoding.utf8)!
]
let jsonData = try JSONSerialization.data(withJSONObject: commandDict, options: JSONSerialization.WritingOptions.prettyPrinted)
socket.write(string: String(data: jsonData, encoding: String.Encoding.utf8)!)
DispatchQueue.main.async(execute: {
let notification = NSNotification.Name("socketDidConnected")
NotificationCenter.default.post(name: notification, object: nil)
self.delegate?.didConnected()
})
} catch let error {
socket.disconnect()
DispatchQueue.main.async(execute: {
self.delegate?.failedToConnect(error: error)
})
}
})
}
func websocketDidDisconnect(socket: WebSocketClient, error: Error?) {
DispatchQueue.main.async(execute: {
let notification = NSNotification.Name("socketDidDisConnected")
NotificationCenter.default.post(name: notification, object: nil)
})
}
func websocketDidReceiveMessage(socket: WebSocketClient, text: String) {
if let data = text.data(using: .utf8) {
do {
let json = try JSON(data: data)
if !json["message"]["chat_message"].isEmpty {
DispatchQueue.main.async(execute: {
self.delegate?.onReceiveMessage(chatMessage: ChatMessage(json: json["message"]["chat_message"]))
})
}
} catch let error {
print("Parse Error: \(error)")
}
}
}
func websocketDidReceiveData(socket: WebSocketClient, data: Data) {
}
func sendMessage(message: String) {
handleQueue.async(execute: {
guard let socket = self._socket, socket.isConnected else {
DispatchQueue.main.async(execute: {
let error = NSError(domain: "Socket not connected", code: 500, userInfo: nil)
self.delegate?.failedToSendMessage(error: error)
})
return
}
let data = ["action": "chat", "message": message, "uuid": self.uuid]
do {
let jsonAction = try JSONSerialization.data(withJSONObject: data, options: JSONSerialization.WritingOptions.prettyPrinted)
let jsonChannel = try JSONSerialization.data(withJSONObject: ["channel": "RoomChannel"], options: JSONSerialization.WritingOptions.prettyPrinted)
let commandDict = [
"command" : "message",
"identifier": String(data: jsonChannel, encoding: String.Encoding.utf8)!,
"data": String(data: jsonAction, encoding: String.Encoding.utf8)!
]
let jsonData = try JSONSerialization.data(withJSONObject: commandDict, options: JSONSerialization.WritingOptions.prettyPrinted)
socket.write(string: String(data: jsonData, encoding: String.Encoding.utf8)!)
DispatchQueue.main.async(execute: {
self.delegate?.didSendMessage()
})
} catch let error {
print("Error: \(error)")
DispatchQueue.main.async(execute: {
self.delegate?.failedToSendMessage(error: error)
})
}
})
}
}
メッセージの送信は
func sendMessage(message: String)
受信周りはWebSocketDelegateで管理。今回は細かい機能はないのでざっくり実装。
ActionCableにリクエスト投げる時のパラメータの構成が独特なのでそこだけ注意。
あとはコントローラーで表示周りの処理を書いていきまーす。
##ビューコントローラー実装
とりあえず必要になるプロトコルを全部入れちゃいます。
ChatViewController.swift
class ChatViewController: DefaultViewController, UICollectionViewDelegate, UICollectionViewDataSource, ChatManagerDelegate {
アクセスしたいビューたちをBindingに設定
ChatViewController.swift
class ChatViewController: DefaultViewController, UICollectionViewDelegate, UICollectionViewDataSource, ChatManagerDelegate {
private class ViewBinding: Binding {
weak var rootView: SJUIView!
weak var collectionView: SJUICollectionView!
weak var messageArea: SJUIView!
weak var messageTextView: SJUITextView!
weak var sendBtn: SJUIButton!
}
private lazy var _binding = ViewBinding(viewHolder: self)
ビューのアクティブ、インアクティブのタイミングでチャットの通信の接続/切断
ChatViewController.swift
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
ChatManager.instance.delegate = self
ChatManager.instance.isChatEnabled = true
}
override func viewDidDisappear(_ animated: Bool) {
super.viewDidDisappear(animated)
ChatManager.instance.isChatEnabled = false
}
ビューをバインディング＆コレクションビューにセルを登録の処理をするメソッドを作成。
iPhoneX系用にsafeAreaのサイズに応じて若干ビューを変更できるように。
ChatViewController.swift
override func initializeView() {
super.initializeView()
_binding.collectionView?.constraintInfo?.topMargin = safeAreaInsets.top
_binding.messageArea?.constraintInfo?.bottomMargin = safeAreaInsets.bottom
_binding.rootView.resetConstraintInfo()
_binding.collectionView.delegate = self
_binding.collectionView.dataSource = self
_binding.collectionView.register(ChatMeCollectionViewCell.self, forCellWithReuseIdentifier: ChatMeCollectionViewCell.cellIdentifier)
_binding.collectionView.register(ChatYouCollectionViewCell.self, forCellWithReuseIdentifier: ChatYouCollectionViewCell.cellIdentifier)
}
こいつをviewDidLoadで呼んであげます。
ChatViewController.swift
override func viewDidLoad() {
super.viewDidLoad()
initializeView()
}
ついでにキーボード表示された時のイベントとかアプリがバックグラウンドに行った時のイベントも登録してあげます。
ChatViewController.swift
let nc = NotificationCenter.default
nc.addObserver(self, selector: #selector(keyboardWillChangeFrame(_:)), name: UIResponder.keyboardWillChangeFrameNotification, object: nil)
nc.addObserver(self, selector: #selector(applicationWillEnterForeground), name: NSNotification.Name(rawValue: "applicationWillEnterForeground"), object: nil)
nc.addObserver(self, selector: #selector(applicationDidBecomeActive), name: NSNotification.Name(rawValue: "applicationDidBecomeActive"), object: nil)
メッセージの送受信系のメソッドも作成。
ChatViewController.swift
func sendMessage() {
_binding.sendBtn.isEnabled = false
ChatManager.instance.sendMessage(message: _binding.messageTextView.text)
}
func onReceiveMessage(chatMessage: ChatMessage) {
_chatMessages.append(chatMessage)
_binding.collectionView.reloadData()
let lastIndexPath = IndexPath(row: _chatMessages.count - 1, section: 0)
_binding.collectionView.scrollToItem(at: lastIndexPath, at: .top, animated: true)
}
func didSendMessage() {
_binding.sendBtn.isEnabled = true
_binding.messageTextView.text = ""
hideKeyboard()
}
キーボードが出て来た時の表示管理。
画面のルートビューがキーボードの上部に接地するように。
ChatViewController.swift
override func keyboardWillChangeFrame(_ notification: Foundation.Notification){
var keyboardFrameEnd: CGRect = ((notification as NSNotification).userInfo![UIResponder.keyboardFrameEndUserInfoKey] as! NSValue).cgRectValue
keyboardFrameEnd = view.convert(keyboardFrameEnd, to: _binding.rootView)
let animationDuration: TimeInterval = ((notification as NSNotification).userInfo![UIResponder.keyboardAnimationDurationUserInfoKey] as! NSNumber).doubleValue
_binding.rootView.constraintInfo?.bottomMargin = keyboardFrameEnd.origin.y >= view.frame.size.height ? 0 : keyboardFrameEnd.size.height - safeAreaInsets.bottom
view.animateWithConstraintInfo(duration: animationDuration)
}
あとはコレクションビュー関連のメソッドを実装してしまえば完了。
メッセージのセルのheightをメッセージ量に応じて計算してくれるメソッドはChatCollectionViewCellに実装しておきます。
計算用のcellをプロパティで保持しておいてそれを使って計算。本当は計算結果はキャッシュしておいた方が良いのですが、その辺はやらずに毎回計算。
ChatViewController.swift
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return _chatMessages.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let chatMessage = _chatMessages[indexPath.row]
let cellIdentifier = chatMessage.isMe ? ChatMeCollectionViewCell.cellIdentifier : ChatYouCollectionViewCell.cellIdentifier
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath) as! ChatCollectionViewCell
cell.applyData(chat: chatMessage)
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
let height = _demoCell.estimatedHeight(chat: _chatMessages[indexPath.row])
return CGSize(width: UIScreen.main.bounds.size.width, height: height)
}
これでビューコントローラー周りは大体完成。
##ビュー作成
まずはメインのビューを作成。
Layouts/chat.json
{
"type": "View",
"id": "root_view",
"width": "matchParent",
"height": "matchParent",
"background": "#dcdcdc",
"orientation": "vertical",
"direction": "bottomToTop",
"canTap": false,
"onclick": "hideKeyboard",
"child": [
{
"type": "View",
"id": "message_area",
"width": "matchParent",
"height": "wrapContent",
"orientation": "horizontal",
"direction": "rightToLeft",
"paddings": [
10.0,
15.0
],
"child": [
{
"type": "Button",
"id": "send_btn",
"width": 80.0,
"height": 50.0,
"centerVertical": true,
"background": "#01DF01",
"cornerRadius": 4.0,
"fontColor": "#ffffff",
"text": "送信",
"onclick": "sendMessage"
},
{
"type": "TextView",
"id": "message_text_view",
"width": "matchParent",
"rightMargin": 15.0,
"minHeight": 50.0,
"maxHeight": 250.0,
"flexible": true,
"background": "#ffffff",
"cornerRadius": 4.0,
"containerInset": [
15.0
]
}
]
},
{
"type": "Collection",
"id": "collection_view",
"width": "matchParent",
"height": "matchParent",
"background": "#f0f0f0"
}
]
}
画面表示はこんな感じ。
次に自分側のメッセージを表示するビューを作成。
chat_me_cell.json
{
"type": "View",
"width": "matchParent",
"height": "matchParent",
"paddings": [
0,
10.0,
20.0
],
"child": [
{
"type": "Label",
"id": "message_label",
"height": "matchParent",
"alignRight": true,
"maxWidth": 250.0,
"edgeInset": [
15.0,
20.0
],
"background": "#ffffff",
"cornerRadius": 4.0,
"clipToBounds": true,
"binding": "message"
}
]
}
次は相手側。
chat_you_cell.json
{
"type": "View",
"width": "matchParent",
"height": "matchParent",
"paddings": [
0,
10.0
],
"child": [
{
"type": "Label",
"id": "message_label",
"maxWidth": 250.0,
"edgeInset": [
15.0,
20.0
],
"background": "#ffffff",
"cornerRadius": 4.0,
"clipToBounds": true,
"binding": "message"
}
]
}
これで一通り完成！
実際に動かしてみる。
とりあえず動いていることが確認できたのでオッケー！
今回のサンプルコードはこちらから確認できます。