[SWIFT] IOS에서 채팅기능 구현하기(1) with AWS Amplify

예. 오랫만이네요.

일이 좀 많아서, 이제야 글을 쓰게 되었습니다.

 

오늘 소개할 내용은 IOS에서 AWS Amplify를 이용해 채팅 기능을 구현하는 방법을 알아볼 예정입니다.

 

현재 계획을로는 1편의 경우 채팅방 리스트를 구현하는 방법을 알아볼 것이고

2편의 경우 실질적인 채팅 기능 구현하는 방법을 소개할 예정입니다.

 

1편의 경우 간단한 내용이기도 하고 가볍게 써보겠습니다.

 

아래의 이미지는 저의 채팅 리스트 초안입니다.

생긴거만 봐도 정말 별거 없습니다. 

리스트 뷰의 특성상 지정된 셀의 형식으로 내용이 증가하기 때문에 만들기도 쉽습니다.

 

아래 사진의 경우 해당 scene의 구조도입니다.

 

이제부터는 내부 코드들에 대해 알아보겠습닏다.

 

저의 경우 story board형식을 사용했습니다.

 

우선 핵심이 되는 table view 코드입니다.

 

1. 선언 부분

var chatRoomList = [[String:String]]()
 
class ChatListTableViewController: UITableViewController {
 
    @IBOutlet var chatRoomListView: UITableView!
 
    var addChatRoom = [String:String]()
    var addChatRoomUser = [String:String]()
    var addChatTable = [String:String]()

 

2. 함수 부분

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
 
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return chatRoomList.count
    }
 
    //cell로 보낼 정보 = member1,2(User), id(channel
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "chatListCell", for: indexPath) as! ChatListTableViewCell
        let dictTemp = chatRoomList[indexPath.row]
        
        let imageUrlString = dictTemp["userImgUrl"] ?? ""
        let imageUrl = URL(string: imageUrlString)
        
        cell.chatProfileName.text = dictTemp["userNickName"]
        cell.chatProfileText.text = dictTemp["lastMessage"] //이거는 message query이용해서 따와야 함
        cell.chatProfileTime.text = dictTemp["messageDate"] //위와 동일하다.
        
        Task {
            let userImage = await downloadImage(fileName: dictTemp["userImgName"] ?? "")
            cell.chatProfileImage.image = userImage
        }
 
        return cell
    }
 
    //신버전
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let viewController = ChattingViewController()
        viewController.detailData = chatRoomList[(self.tableView.indexPathForSelectedRow)!.row]
        navigationController?.pushViewController(viewController, animated: true)
    }

 

table view의 코드는 이렇게 간단히 구성되어 있습니다.

 

 

table view 코드를 마무리하기 앞서 한 가지 기능을 더 소개하고자 합니다.

대부분의 앱들에서 table view의 경우 갱신을 할 수 있는 기능을 포함합니다.

 

아래의 코드는 table view를 갱신하는 코드입니다.

 

1. 선언

let refreshControll = UIRefreshControl()

 

2. 함수

    //table view pull down recycling
    func initRefresh(){
        refreshControll.addTarget(self, action: #selector(refreshTable(refresh:)), for: .valueChanged)
        chatRoomListView.refreshControl = refreshControll
    }
 
    @objc func refreshTable(refresh: UIRefreshControl){
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            self.chatRoomListView.reloadData()
            refresh.endRefreshing()
        }
    }

 

 

이제 마지막으로 cell 코드를 알아보겠습니다.

import UIKit

class ChatListTableViewCell: UITableViewCell {
    
    @IBOutlet var chatProfileImage: UIImageView!
    @IBOutlet var chatProfileName: UILabel!
    @IBOutlet var chatProfileText: UILabel!
    @IBOutlet var chatProfileTime: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }

}

 

정말 간단합니다.

 

이렇게 채팅기능 1편은 정말 가볍게 마무리하게 되었습니다.

이제와서 다시보니 두서없이 쓴거 같습니다.

 

다음 게시물은 복잡하기도 한 만큼 성의 있게 써보겠습니다.

예정대로 다음 게시물은 채팅의 실질적 구현방식에 대해서 쓸 예정입니다.

 

내일 쓸 생각이긴 한데, 내일 일정이 빡빡해서 어떻게 될 지는 잘 모르겠군요...,

솔직히 내일은 힘들듯...,