개요

일대일 채팅을 실현하다.
프런트는 스위프트, 백엔드는 루비 온 레일스.
또한 Pusher라는 WebSocket의 API를 사용했습니다.
push의 인상

pusher.com에 로그인

pusher.com 가입자.등록 후 절차에 따라 응용 프로그램을 제작한다.
그런 다음 다음 다음 페이지로 이동합니다.

이 페이지에는 서버 클라이언트 측의 샘플 코드가 실렸습니다. 이 원본 코드를 참고하십시오.
또한 이미지 오른쪽
- app_id
- key
- secret
의 값입니다.나중에 사용.

Rails로 API 만들기

서버 쪽 기능 만들기.

Pusher 도입

gem 'pusher'

키 정보 관리

pusher.com에서 프로그램을 만들 때 발행된 키 정보를 프로필에 저장합니다.
생성config/pusher.ymlconfig/pusher.yml

development:
app_id: <あなたのapp_id>
access_key: <あなたのaccess_key>
access_key_secret: <あなたのaccess_key_secret>

Pusher 설정 파일 만들기

동시에push.com의 계기판을 참고하여pusher 설정을 진행합니다.
생성config/initializers/pusher.rbconfig/initializers/pusher.rb

require 'pusher'

config_pusher = YAML.load_file('config/pusher.yml')[Rails.env]
Pusher.url = "http://#{config_pusher['access_key']}:#{config_pusher['access_key_secret']}@api.pusherapp.com/apps/{config_pusher['app_id']}"
Pusher.logger = Rails.logger

이상은push의 준비입니다.이제api를 만듭니다.

제작 컨트롤러

rails g controller api/chats

라우팅 설정

routes.rb

Rails.application.routes.draw do
  namespace :api, default: {format: :json} do
    resources :chats, only: :create
  end
end

chats 컨트롤러 편집

api/chats_controller.rb

class Api::ChatsController < ApplicationController
  skip_before_filter :verify_authenticity_token #外部からのリクエストを許可する
  def create
    Pusher['general'].trigger('chat_event', {
      message: params[:message]
    })
  end
end

지정Pusher['general']부분의 []은 채팅방의 이름입니다.이 부분을 바꾸면 여러 개의 채팅방을 만들 수 있고 방에 따라 알림을 보낼 수 있다.이번에는 일반
또 이번에는 json을 반환하지 않아도 성립할 수 있지만 템플릿 오류가 발생했기 때문에 먼저 제작create.json.juilder합시다.
위api의 제작을 완료하였습니다.

iOS에서 만든 API 두드리기

서버 측의 설치가 완료되면 iOS 측에서 제작한api를 사용하여 실시간 통신을 할 수 있습니다.

iOS 프로젝트에서 Pusher 가져오기

CocoaPods를 사용합니다.Pusher의 클라이언트 전용 라이브러리 libPusher를 사용합니다.
다른 것은 HTTP 통신과 json을 편리하게 사용하기 위해 각각 Alam ofire, Swifty JSON을 사용한다.

target 'ChatiOS' do
 pod 'libPusher', '~> 1.6.1'
 pod 'Alamofire'
 pod 'SwiftyJSON'
end

키 정보를 다시 설정합니다.
ViewController.swift

import UIKit
import Pusher
import Alamofire
import SwiftyJSON

class ViewController: UIViewController, PTPusherDelegate {

    var client: PTPusher!

    override func viewDidLoad() {
        super.viewDidLoad()

        //Pushernの設定
        self.client = PTPusher(key: "<あなたのaccess_key>", delegate: self, encrypted: true)
        self.client.connect()
    }

API 두드리기 전송 요청

let paramas = [
     "message": hoge,
]

Alamofire.request(.POST, "http://localhost:3000/api/chats", parameters: paramas)
    .responseString { response in
    print("Success: \(response.result.isSuccess)")
    print("Response String: \(response.result.error)")
}

이렇게 appi를 두드리면 방금 만든 create 동작이 호출되고 알림이 Pusher로 전송됩니다.
공지가 Pusher로 전송되면 고객에게 다시 공지됩니다.

Pusher로부터 알림 받기

//Pusherから通知を受け取る
let channel = self.client.subscribeToChannelNamed("general")
channel.bindToEventNamed("chat_event") { (channelEvent) -> Void in
    //pusherから通知がくると呼ばれる
    let json = JSON(channelEvent.data)
    print(json["message"])
}

채팅의 UI를 만들어 적당한 곳에 이상의 기술을 추가하면 간단한 채팅 앱을 만들 수 있다.
채팅의 UI 제작은 아래를 보십시오.
Swift로 채팅 애플리케이션을 간편하게 제작할 수 있는 UI

참고 자료