[Swift] Socket.IO를 이용한 소켓통신 채팅앱 만들어보기 (1/3)

2019.12.13 ~ 2019.12.17

 

안녕하세요😄😄

 

소켓을 공부하려고 마음 먹은지 꽤 오래전이지만 드디어 하게되네요

 

소켓으로 할 수 있는 대표적인걸로는 채팅이 있죠

 

그래서‼️

 

채팅앱을 만들어 보려고해요

보기엔 쉬워보이지만 생각보다 많이 어렵더라구요...

 

우선 간단하게 소켓이 뭔가?!

에 대해 간단하게 알아 볼게요

 

보통 통신을 주고 받고 할때 요청 - 응답으로 주고 받았어요

HTTP통신으로 요청을주면 JSON으로 응답을 받는 그런원리요!!

 

채팅앱 같이 메시지를 주고받을때 데이터를 확인하려면 계속 메세지가 왔는지 확인해야하는 부분에서

계속 요청을 해야하겟죠??? request..request...request....request

저런 방법의 통신은 너무 비효율적인 것 같아요

그래서 소켓통신을 사용해서 구현하는것 같아요

 

 

소켓통신이란

네트워크를 통해 (서버-클라이언트)양쪽에 링크를 생성하고 그 링크를 통해 데이터를 주고 받는 거에요

 

서버쪽에서 임의의 포트번호로 설정해놓고

클라이언트에서 해당 포트로 접속을 시도하면 서버와 클라이언트가 그 포트번호로 서로 연결되어 있는 상태가 되죠!!

그 상태에서 데이터를 주고 받을 수 있어요

연결되어있는 상태이기때문에 언제든 데이터가 들어오면 받아서 처리할 수 있어요

 

소켓을 연결시키고나면

기능상 서버 소켓 과 클라이언트 소켓으로 구분되죠

딱 정해져있는게 아니에요

둘다 같은 소켓이지만 하는 역할이 달라서 구분한거죠!!

 

서버 소켓은 클라이언트 소켓의 요청을 받아서 처리를 하고

클라이언트 소켓은 서버 소켓에게 요청을 하고 처리를 하죠

 

더 자세히는 다루지 않을게요..!!

더 공부해보면서 알아 가도록해요 

이정도 개념의 흐름정도만 알고 나중에 더 알아가면되요

 

 

그래서 저희는 Swift로 소켓을 다룰거잖아요??

 

소켓을 다루기위해 많은 블로그와 많은 자료들을 찾아보면서 해봤는데

계속 실패하고 에러나고

많은 삽질을 했어요,,,

 

 

그렇게 돌고돌아서 제일 유명한(?) Socket.IO를 사용해서 구현할 거에요

Socket.IO 에서 Node.js 모듈을 지원해줘서 아마 서버는 많은사람들이 Node.js로 하지않을까 싶어요

 

Spec

💡💡💡💡💡💡💡💡💡

Client - Swift

Server - Node.js

💡💡💡💡💡💡💡💡💡

 

Socket.io를 먼저 받아야겟죠??

https://github.com/socketio/socket.io-client-swift

에 들어가서 최신버전을 확인하고 사용하세요!!

 

이 글을 작성하는 시점으로

15.2.0버전을 사용했습니다!!

 

 

먼저 소켓이될 클래스를 생성해 줬어요

import UIKit
import SocketIO

class SocketIOManager: NSObject {
    static let shared = SocketIOManager()
    var manager = SocketManager(socketURL: URL(string: "http://localhost:9000")!, config: [.log(true), .compress])
    var socket: SocketIOClient!
    override init() {
        super.init()
        socket = self.manager.socket(forNamespace: "/test")
        
        socket.on("test") { dataArray, ack in
            print(dataArray)
        }
    }

    func establishConnection() {
        socket.connect()
    }
    
    func closeConnection() {
        socket.disconnect()
    }
   
    func sendMessage(message: String, nickname: String) {
        socket.emit("event",  ["message" : "This is a test message"])
        socket.emit("event1", [["name" : "ns"], ["email" : "@naver.com"]])
        socket.emit("event2", ["name" : "ns", "email" : "@naver.com"])
        socket.emit("msg", ["nick": nickname, "msg" : message])
        
    }
}

 

manager변수를 생성하는 부분에서 서버의 주소와 포트를 맞춰줘야 통신이되요!!

저 같은경우는 9000번 포트를 사용했어요

 

위에사진을 보면 manager.defaultSocket을 써서 기본인 "/"의 위치에서 사용해도되지만

저는 /test라는 룸을 만들어줘서 사용했어요

 

룸이란?!

Socket.IO에서 소켓을 룸(Namespace)으로 나누어서 룸단위로 구분할 수 있는 기능이 있어요

클라이언트가 /test룸에 속한 소켓이라면

서버에서도 /test룸으로 설정하고 처리를 해줘야 서로통신이 가능하겟죠?!

 

 

 

Socket.IO의 중요한 메서드들이 있어요

이것들만 알면 소켓으로 간단한 통신을 할 수 있어요

 

socket.connet => 설정한 주소와 포트로 소켓 연결시도

 

socket.disconnet => 소켓 연결종료

 

socket.emit("ab", ["data1", "data2"]) => "ab"란 이벤트이름으로 "data1", "data2" 송신

 

socket.on("abc") => 이름이"abc"로 emit된 이벤트 수신

 

 

 

이렇게 만든 클래스를 원하는 뷰컨트롤러에서 사용만하면 끝이에요

 

class ViewController: UIViewController {
    
    @IBOutlet weak var textField: UITextField!
    var socket: SocketIOClient!
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    @IBAction func disconnetSocket(_ sender: Any) {
        SocketIOManager.shared.closeConnection()
    }
    @IBAction func connectSocket(_ sender: Any) {
        SocketIOManager.shared.establishConnection()
    }
    
    @IBAction func sendData(_ sender: Any) {
        SocketIOManager.shared.sendMessage(message: self.textField.text!, withNickname: "ns")
    }

}

 

정리하고 보니 이렇게 몇개 없고 간단한데,,,

 

자료를 찾으면서 따라할 때는 복잡하고, 뒤죽박죽에 어느부분이 문젠지도 잘 몰랐엇어요...

 

 

이게 끝이 아니에요!!!

 

지금 클라이언트쪽을 잘 해놨지만

서버쪽코드가 이상하다면 소켓 통신이 되지않아요!!

그렇기 때문에 더 어려움도 있었던것 같아요,,,

 

웨,,,않,,뒈,,,지..?? 웨,,,않,,뒈,,,지..?? 많이 삽질 좀 했어요..ㅠ

 

 

 

다음에 채팅창처럼 보이도록 구현해보고

서버쪽도 간단하게 다뤄볼께요!!

 

 

⬇️⬇️채팅앱 UI구현⬇️⬇️

2019/12/17 - [iyOmSd/Title: Swift] - [Swift] Socket.IO를 이용한 소켓통신 채팅앱 만들어보기 (2/3)

[Swift] Socket.IO를 이용한 소켓통신 채팅앱 만들어보기 (2/3)

 

 

⬇️⬇️서버 구현⬇️⬇️

2019/12/17 - [iyOmSd/Title: Swift] - [Swift] Socket.IO를 이용한 소켓통신 채팅앱 만들어보기 (3/3)

[Swift] Socket.IO를 이용한 소켓통신 채팅앱 만들어보기 (3/3)