[iOS] Socket.io를 이용해 채팅 구현하기

안녕하세요, 5anniversary이에요~~~

 

이번 포스팅에서는 Socket.io를 이용해 채팅을 구현해본 경험을 올려볼거에요!!

 

여태까지 가지고 있었던 Socket 통신에 대한 두려움을 없애버릴수있는 경험이었어요!! 생각보다 어렵지 않더라구요!!

 

제가 사용한 라이브러리는 이거에요!!

 

 

Socket 통신을 하면서 느끼게 된 점은 HTTP REST API와 비교해서 별 다른점이 없다는 점이었어요!!

‼️다른 점은 연결이 되고있고 되어있는 연결을 통해 지속적으로 데이터를 주고 받는다는 점‼️

 

이제 하나씩 알아가 볼게요!!

 

제가 작성한 코드의 경우에는 싱글턴 패턴을 사용해 작성을 했어요!!

 

그리고 서버부분을 간단하게 설명해드리자면

 

1. 단체 채팅방이 구현되어야하기 때문에 url의 경우에는 BaseURL + /roomIndex로 구성되어있어요!

 

2. connect 메소드를 통해서 연결을 해줍니다!

 

3. 그 다음 joinRoom을 emit시켜줘 서버에 해당 roomIndex에 들어왔음을 알려줍니다.

 

4. chat message를 emit시켜줘 서버에 채팅을 보냅니다.

 

5. chat message를 on메소드로 연결해 다른 사용자들이 주는 데이터를 받아옵니다.

 

정말로 간단하죠??

 

이제 코드로는 어떻게 구현이 되었는지 알아볼게요!!

 

 

    func establishConnection(_ roomIndex: String, _ name: String) {
        
        manager = SocketManager(socketURL: URL(string: "BaseURL/chat/\(roomIndex)")!,
                                    config: [.log(false), .compress])
        
        socket = manager.socket(forNamespace: "/")

        socket.connect()
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1, execute: {
            self.socket.emit("joinRoom", roomIndex, name)
        })
    }

1번, 2번, 3번에 해당하는 코드인데요!! 여기서 설명에서 조금 추가 해드려야할 부분이 있는데요!! 

 

connect 메소드를 실행시켜줄때 같이 joinRoom을 하게 되면 연결이 안되는 경우가 있어서 0.1초 이후로 joinRoom을 emit 하게 작성했습니다.

 

    func sendMessage(_ roomIndex: Int,
                     _ message: String,
                     _ nickname: String) {
        socket.emit("chat message", nickname, message, roomIndex)
    }

4번에 해당하는 코드인데요 정말 말 그대로!! 메시지에 이름, 메시지, 방 번호를 넣어서 emit 해주면 채팅이 보내져요!!

 

    func connect(completion: @escaping ([Any]) -> Void){
        socket.on("chat message") { (data, ack) in
            completion(data)
        }
    }

이 코드는 5번에 해당하는 코드에요!! 

chat message를 on메소드로 연결시켜 escaping closure를 통해 채팅 뷰에 데이터를 전달해주고 있어요!!

 

와... 원래 가지고 있었던 생각보다 클라이언트 부분에서 어려운 부분이 별로 없었어요!! 서버에서 정해준 이름을 가지고 연결하고 보내주면 되는 Socket 통신이었습니다!! 어렵게 생각하지 말고 서버 개발자분들의 말에 잘 맞춰서 개발을 진행하면 되겠습니다!!

 

지금까지 Socket통신을 해본 경험기를 봐주셔서 감사하구요!! 혹시나 이런 부분을 고쳤다 하시면 알려주시면 감사하겠습니다!!