Swiftでソケット通信するチャットアプリ

Swiftでソケット通信するチャットアプリを作ってみた。
iOSにはSIOSocketを、バックエンドにはSocket.ioを使用。

Github

環境

iOS

Swift
SIOSocket https://github.com/MegaBits/SIOSocket

バックエンド

Node.js
Express https://github.com/strongloop/express/stargazers
socket.io https://github.com/Automattic/socket.io
mongodb http://www.mongodb.org/
mongoose https://github.com/LearnBoost/mongoose

あれこれ

iOSでソケット通信するためのライブラリにはSocketRocketなど色々あるがSIOSocketがSwiftと相性良さそう。

ソケット通信の部分以外にも、
キーボードを出すとTexiViewが隠れないようTableViewが上部にずれたり
TextViewが改行で可変になったり
Autolayoutで画面外に隠したcontainerViewをアニメーションで出し入れするなど
何かしら役に立つ部分があると思う。

バックエンドはもうちょっときれいに書きたかったけど今回は面倒なので割愛。
Expressも使う必要なかったけど今後の拡張を考えて使用している。

ソースコード(iOS)

ViewController

import UIKit

class ViewController: UIViewController, UITextViewDelegate {
@IBOutlet weak var tableView: UITableView!
@IBOutlet weak var inputAreaView: UIView!
@IBOutlet weak var textView: UITextView!
@IBOutlet weak var textViewConstraintHeight: NSLayoutConstraint!
@IBOutlet weak var sendButton: UIButton!
@IBOutlet weak var settingsButton: UIButton!

@IBOutlet weak var settingsView: UIView!
@IBOutlet weak var settingsViewConstraintMarginTop: NSLayoutConstraint!
var settingsViewController:SettingsViewController! = nil
var settingsViewIsDisplayed = false

var messages: Array<MessageModel>?
var socket:SIOSocket! = nil

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    messages = []

    // ここがソケット通信するところ
    SIOSocket.socketWithHost("ws://localhost:3000", response:  { (_socket: SIOSocket!) in
        self.socket = _socket

        self.socket.onConnect = {() in
            println("connected")
            self.socket.emit("message init", args: [])
        }

        self.socket.onReconnect = { (attempts: Int) in

        }

        self.socket.onDisconnect = {() in
            println("disconnected")
        }

        // メッセージを受信
        self.socket.on("message send", callback:{(data:[AnyObject]!)  in
            let dic = data[0] as NSDictionary
            let model = MessageModel(_name: dic["name"] as String, _message: dic["message"] as String)
            self.messages?.append(model)
            self.tableView.reloadData()
        })

        // メッセージの初期化
        self.socket.on("message init", callback:{(data:[AnyObject]!)  in
            let arr = data[0] as NSArray
            for var i = 0; i < arr.count; i++ {
                let dic = arr[i] as NSDictionary
                let model = MessageModel(_name: dic["name"] as String, _message: dic["message"] as String)
                self.messages?.append(model)
            }
            self.tableView.reloadData()
            // tableviewのスクロールを一番下まで動かす
            UIView.animateWithDuration(0.2, delay: 3.0, options: nil, animations: {}, completion: {(finished) -> Void in
                let indexPath = NSIndexPath(forRow:(self.tableView.numberOfRowsInSection(0) as Int - 1), inSection: self.tableView.numberOfSections()-1 as Int)
                self.tableView.scrollToRowAtIndexPath(indexPath, atScrollPosition: UITableViewScrollPosition.Top, animated: true)

            })
        })
    })

    // SettingsViewControllerを取得
    self.settingsViewController = self.childViewControllers[0] as SettingsViewController
    //SettingsViewControllerを閉じた時
    self.settingsViewController.closeMe = {
        self.moveSettingsView()
        self.settingsViewIsDisplayed = false
    }

    // tableViewの高さを可変にする
    self.tableView.estimatedRowHeight = 49
    self.tableView.rowHeight = UITableViewAutomaticDimension

    // textviewのスクロールのバグ修正
    textView.scrollEnabled = false;
    textView.scrollEnabled = true;

    // 装飾周り
    textView.layer.borderColor = UIColor(white: 0.5, alpha: 0.2).CGColor
    textView.layer.borderWidth = 0.5
    var inputViewLayer = CALayer()
    inputViewLayer.frame = CGRect(x: 0, y: 0, width: inputAreaView.frame.width, height: 1)
    inputViewLayer.backgroundColor = UIColor(white: 0.5, alpha: 0.3).CGColor
    inputAreaView.layer.addSublayer(inputViewLayer)
    sendButton.layer.cornerRadius = 2.0

    // イベント系
    sendButton.addTarget(self, action: "sended:", forControlEvents: UIControlEvents.TouchUpInside)
    settingsButton.addTarget(self, action: "settingsPressed:", forControlEvents: UIControlEvents.TouchUpInside)
    NSNotificationCenter.defaultCenter().addObserver(self, selector: Selector("keyboardWillAppear:"), name: UIKeyboardWillShowNotification, object: nil)
    NSNotificationCenter.defaultCenter().addObserver(self, selector: Selector("keyboardWillHide:"), name: UIKeyboardWillHideNotification, object: nil)
}

override func viewDidAppear(animated: Bool) {
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

// MARK: - TableViewDelegate
func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int  {
    return messages!.count
}

func tableView(tableView: UITableView?, cellForRowAtIndexPath indexPath:NSIndexPath!) -> UITableViewCell! {
    var cell: MessageCell = self.tableView.dequeueReusableCellWithIdentifier("MessageCell", forIndexPath: indexPath) as MessageCell
    let message = messages![indexPath.row]
    cell.setContent(message)
    return cell
}

func tableView(tableView: UITableView?, didSelectRowAtIndexPath indexPath:NSIndexPath!) {

}

// MARK: - textFieldDelegate
func textViewDidBeginEditing(textView: UITextView) {
}

func textViewDidEndEditing(textView: UITextView) {
    textView.resignFirstResponder()
}

func textViewShouldEndEditing(textView: UITextView) -> Bool {
    textView.resignFirstResponder()
    return true
}

func textViewDidChange(textView: UITextView) {
    // autolayoutのconstraintを変更してtextviewの高さを可変にする
    let maxHeight:CGFloat = 60.0
    let size = textView.sizeThatFits(textView.frame.size)
    if (textView.frame.height < maxHeight) {
        self.textViewConstraintHeight.constant = size.height
    }
}

func textView(textView: UITextView, shouldChangeTextInRange range: NSRange, replacementText text: String) -> Bool {
    return true
}

// MARK: - keyboardNotification
func keyboardWillAppear(notification: NSNotification) {
    // settingsViewが表示されている時(TexiField)
    if (settingsViewIsDisplayed) {
        return
    }

    // キーボードの高さだけ全体にオフセットを与える
    var rect:NSValue
    var duration: NSTimeInterval
    if let userInfo = notification.userInfo as? Dictionary<String,AnyObject> {
        rect = userInfo["UIKeyboardFrameEndUserInfoKey"] as NSValue
        duration = userInfo["UIKeyboardAnimationDurationUserInfoKey"] as NSTimeInterval

        let transform = CGAffineTransformMakeTranslation(0, -rect.CGRectValue().size.height)

        UIView.animateWithDuration(duration, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut,
            animations: {() -> Void in
                self.view.transform = transform
            }, completion: {(finished) in
        })
    }
}

func keyboardWillHide(notification: NSNotification) {
    // settingsViewが表示されている時(TexiField)
    if (settingsViewIsDisplayed) {
        return
    }

    // 与えたオフセットを取り除く
    var duration: NSTimeInterval
    if let userInfo = notification.userInfo as? Dictionary<String,AnyObject> {
        duration = userInfo["UIKeyboardAnimationDurationUserInfoKey"] as NSTimeInterval

        UIView.animateWithDuration(duration, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut,
            animations: {() -> Void in
                self.view.transform = CGAffineTransformIdentity
            }, completion: {(finished) in
        })
    }
}

// MARK: - Button Event
func sended(sender: UIButton!) {
    if !MyUtils().stringHasContent(textView.text) {
        return
    }
    let username = (MyUtils().stringHasContent(MyUtils().username)) ? MyUtils().username! : "Mr. Unknown"

    // ソケットにemitする
    let model = NSDictionary(dictionary: ["name": username, "message": textView.text, "date": convertDateToStr(NSDate())]);
    socket.emit("message send", args:[model] as SIOParameterArray)

    // texiviewの高さを元に戻す
    textView.text = nil
    let size = textView.sizeThatFits(textView.frame.size)
    self.textViewConstraintHeight.constant = size.height

    textView.resignFirstResponder()
}

private func convertDateToStr(date:NSDate) -> String {
    let dateFormatter = NSDateFormatter()
    dateFormatter.locale = NSLocale(localeIdentifier: "en_US")
    dateFormatter.dateFormat = "yyyy/MM/dd HH:mm:ss"
    return dateFormatter.stringFromDate(date)
}

func settingsPressed(sender: UIButton!) {
    settingsViewIsDisplayed = true
    moveSettingsView()
    self.settingsViewController.textField.becomeFirstResponder()
}

func moveSettingsView() {
    var offset:CGFloat = 0.0

    if (self.settingsViewConstraintMarginTop.constant == 0) {
        offset = self.settingsView.frame.height
    } else {
        offset = 0.0
    }

    self.view.removeConstraint(self.settingsViewConstraintMarginTop)

    self.settingsViewConstraintMarginTop = NSLayoutConstraint(
        item: self.view!, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal,
        toItem: self.settingsView, attribute: NSLayoutAttribute.Top,
        multiplier: 1, constant: offset)

    self.view.addConstraint(self.settingsViewConstraintMarginTop)

    UIView.animateWithDuration(0.24,
        delay: 0.0,
        options: UIViewAnimationOptions.CurveEaseIn,
        animations: {() -> Void in
            self.view.layoutIfNeeded()
        },
        completion: nil)
}


}

ソースコード(バックエンド: Node.js)

app.js

#!/usr/bin/env node
var express = require('express'); 
var debug = require('debug')('socket-example');
var app = express();
var mongoose = require('mongoose');

app.set('port', process.env.PORT || 3000);

//mongoose
var Schema = mongoose.Schema;
var MessagesSchema = new Schema({
    name: String,
    message: String,
    date: Date
});
mongoose.model('messages', MessagesSchema);
mongoose.connect('mongodb://localhost/onechat');
var Messages = mongoose.model('messages');

//socket.io
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket) {

    socket.on('disconnect', function() {
        console.log('user disconnected');
    });

    socket.on('message init', function(data) {
        console.log('message init');

        Messages.find({}).limit(100).exec(function(err, data){
            socket.emit('message init', data);
        });
    });

    socket.on('message send', function(data) {
        console.log('message send');

        data.date = Date.parse(data.date);
        var message = new Messages(data);
        message.save(function(err, message) {
            if (err) return console.error(err);
            io.emit('message send', message);
        });
    });
});

http.listen(app.get('port'), function() {
    console.log('listening on *:' + http.address().port);
});