[iOS/Swift3.0] iOS Chatting App with Socket.io(upload image) - bug reporting

iOS Chatting App with Socket.io

• making iOS Chatting App
• viewdidappear called twice
• socketio getMessages called many times
• socketio chatting app upload image(url)

References

• https://socket.io/get-started/chat/
• https://www.appcoda.com/socket-io-chat-app/
• http://minsone.github.io/mac/ios/ios-uiviewcontroller-once-call-when-viewdidappear

socket.io를 이용하여 텍스트, 이미지로 채팅하는 앱을 만들고자한다 해당 튜토리얼에서는 text만 주고받는 예제였는데 나의 경우 이미지도 전송하는 것이 필요해서 기능을 구현했다 그런데 이미지 전송 후 출력하는 과정에서 문제점이 발생했다

이미지를 불러오기위해서는 imagePickerController등 별도의 VC가 present되고 사진을 선택하면 dismiss되어 채팅창이 보이게 되어있다

그런데 다시 채팅창이 present될 때 viewDidAppear()에 작성한 getMessage()함수가 호출하는데, 여기서 하나의 이미지를 보냈는데도 getMessage()는 두번 이상 호출되는 문제가 있었다

먼저 알아둘 것 - viewDidAppear

• great place to start an animations or the loading of external data from an API.
• https://stackoverflow.com/questions/5562938/looking-to-understand-the-ios-uiviewcontroller-lifecycle

---

1. ImagePickerController를 사용했을 때 해본 방법

처음 사진업로드 기능은 한번에 한장만 업로드 하기로 했기때문에 imagePickerController를 사용하여 이미지 업로드 기능을 구현하였다

이때 앞서 발생한 문제에 대해서는 viewDidAppear에서 imagePickerController.isBeingDismissed == false일때 getMessage하도록 했었다 (운좋게 해결된 듯 하다)

1. Custom ImageViewController (with collectionView)

   • ref. https://www.youtube.com/watch?v=BFZ4ZCw_9z4

여러장의 이미지를 전송하기 위해서는 기본 제공하는 pickercontroller로는 할 수 없고 별도의 vc(imageVC)를 작성해야했다

그래서 vc를 생성하고 photo library의 사진을 보여주는 collectionview를 이용해 사진을 보여주도록 만들었다

이미지를 선택한 후 확인버튼을 누르면 selectedItem.count만큼 sendMessage가 실행된다

imageVC가 dismiss되어 채팅창이 나오면 viewDidAppear에 작성한 getMessage가 실행되는데

마치 for문을 돌리듯 vc 첫번째 present - 메세지 1개 출력,

vc 두번째 present - 메세지 2개 출력 3..4... 이렇게 반복되었다..

로그를 찍어보니 dismiss되고 viewDidAppear에서 getMessage를 호출하고있었다. text를 전송할때는 8번과 11번만 로그에 찍히기 때문에 12번이 마지막에 호출되는 것은 틀렸다는 것을 확인할 수 있다

12번은 맨 처음 채팅방에 접속했을 때만 찍혀야하는 로그이다

[text mode]
8. SocketIOManager - sendMessage
sendMessage to server
receive data : {receive_data}
11. controller getChatMessage : [get_chat_message]

[image mode]
1. handleUploadTap
2. ImageViewController - viewDidLoad
3. grabPhotos
4. cellForItemAt
...
5. collectionview - didselectItem
사진 선택 완료
6. photo selecte complete
7. sendMessage
8. SocketIOManager - sendMessage
sendMessage to server
receive data : {receive_data}
11. controller getChatMessage : [get_chat_message]
12. SocketIOManager - getChatMessage
12. get Message from Server

12번은 맨 처음 뷰가 appear됐을때만 실행하면 되기 때문에 딱 한번만 getMessage를 실행하도록  아래와 같이 조건문을 추가한다

override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
 
        // 처음으로 호출되었는지 확인하여 채팅메세지 가져오기
        if isBeingPresented || isMovingToParentViewController{
            DispatchQueue.main.asyncAfter(deadline: .now(), execute: {
                SocketIOManager.sharedInstance.getChatMessage { (messageInfo) -> Void in
                    print("11. controller getChatMessage : \(messageInfo)")
                    self.chatMessages.append(messageInfo)
                    self.scrollToBottom()
                    self.collectionView?.reloadData()
                }
            })
        }
    }

이렇게 오류를 해결했다!!!!! 정말.. 아무튼 1번도 isBeingDismissed가 아닌 위의 방법으로 했다면 더욱 정확한 해결법이 됐을 것이다 매우 복잡!