android Socket IO Random Chat - nickname

< 닉네임 설정 >

닉네임 화면 

compose로 ui를 구성하는 건 생략하려고 합니다.

( 혹시 궁금하시면 한번 글 작성해보겠습니다. 댓글로 남겨주시면 감사하겠습니다. )

각자 원하는 스타일이 다를 수 있기 때문에 그거에 맞춰서 만들어 주시면 됩니다. 

간단하게 그냥 텍스트에 버튼 달고 log로 확인하셔도 무방합니다.

 

자! 이제 어떻게 연결하고, 사용하는지 그 과정을 소개하도록 하겠습니다. 

 

대략적인 과정은 이렇습니다.

 

닉네임 만들고 -> emit 으로 전송 -> 소켓에서 닉네임 체크 -> 중복 결과 안드로이드로 전송 -> 화면에 결과 알려줌

 

 

1. Viewmodel 

 

위의 화면을 mainScreen라 부르겠습니다.

 

먼저 socket을 만들어야겠죠?

 

viewmodel 에 하나 만들어줍니다.

 

참고로 저는 최대한 mvvm 으로 만드려고 해서 viewmodel을 안 쓰신다면 그거에 맞춰서 만드시면 되겠습니다~

 

 

1. 필요한 변수 설명

 

MainViewmodel 사진을 보시면 되겠습니다. 

간략하게 설명을 드리면

 

- val nickname = compose textfield에 들어가는 text 값

- val nicknameCheckResult = 서버에서 on 으로 보내주는 데이터를 받는 리스너

( 소켓을 이용해 데이터를 전송할때는 소켓변수.emit( "받는 쪽" , 데이터 ) ,

  받을 때는 소켓변수.on("받는 이름", 리스너명 )

아래에 사용법으로 이해가 가실 겁니다.

- val connectionResult = 소켓에 연결이 되면 서버에서 안드로이드 쪽으로 connection 이라고 보냅니다. 그때의 리스너입니다. 

 

소켓에서 안드로이드로 보낼때

 

뭔 소리인지 아직 감이 안 잡히실 수도 있습니다! 걱정 안 하셔도 됩니다.

 

좀만 더 읽다 보면 아~ 이 과정이고 이게 이래서 필요하구나 하실 겁니다!

 

아래는 MainViewModel 의 일부분입니다.

 

MainViewModel

아래의 init 을 보시겠습니다. 

 

먼저 init 에 두 개의 on 이벤트를 init 으로 만들어줍니다. ( 소켓에서 보내는 emit 이벤트를 받기 위한 것 )

 

한번 만들어두면 계속 갑니다.

 

그리고 예외처리를 위해 만약에 연결이 안 되어있는 경우도 알려줍니다.

connected() 를 사용하면 연결 상태의 Boolean 값을 알 수 있습니다.

 

 

이제 UI에서 버튼을 눌렀을 때 이벤트를 만들어줍니다. 

 

소켓에 연결이 되어있다면

 

확인 버튼을 눌렀을때 emit 이벤트를 발생시킵니다. 

 

이때 서버의 nicknameCheck 이름으로 된 on 이벤트 함수로 nickname 을 넘겨줍니다.

( 텍스트 필드의 empty 예외는 버튼에 enabled 를 두어서 입력값 "" 이 상태이면 버튼이 비활성화되게 했습니다. )

 

 

2. Server Socket

이제 서버를 보시겠습니다. 

 

 

서버의 nicknameCheck 이벤트에 data가 전달됩니다. 

 

로그로 잘 넘어왔는지 확인해봅니다.

 

io.on('connection', (socket) => {  ->  이거밖에 아래 변수 하나 만들어줍니다.

 

 

반복문으로 저 clients를 확인해서 이미 존재하는 닉네임인지 체크합니다. 

 

( 저는 반복문을 사용하지만 find로 찾으시거나 방법은 편하신 데로 찾으시면 됩니다!! )

 

닉네임이 이미 있다면 안드로이드에 nicknameCheckResult 이벤트로 false를 보내줍니다.

 

그리고 return 으로 종료합니다.

 

없다면 clients 배열에 한 명 들어갔다고 name , client , status , roomName 속성을 포함한 오브젝트 하나를 넣어줍니다.

 

그리고 emit 으로 nicknameCheckResult 값 true 를 보내줍니다.

 

이상 없이 잘 유저를 추가했으니까요.

 

이렇게 되면 아까 위에 안드로이드 MainViewModel에서 보신 이 친구가 

 

 

소켓에서 데이터를 보내네?? 리스너는 nicknameCheckResult 로 되어있으니까 저걸로 처리하자!

하면서 아래의 리스너 변수로 가서 처리를 합니다.

 

변수가 array 형태로 들어오므로 그 첫 번째 값 it[0] 을 확인합니다.

 

false 이면 존재

else -> true 이면 state들을 바꿔주고 닉네임이 완료되었다 스낵바 메시지를 띄워줍니다.

 

또한 나중에 사용할 자신의 nickname 을 SocketControlloer 의 nickname에 넣어줍니다.

( 나중에 있을 연결 해제를 위해  ) 

 

이상으로 닉네임을 만들 때 중복 체크와 데이터의 소켓으로의 송수신에 대해 알아보았습니다.

궁금하신 점은 댓글로 남겨주시면 감사하겠습니다. 

또한 부족한 부분이 있으시다고 생각이 드시거나, 틀린 부분은 경청하겠습니다. 

이상 무사시였습니다. 다음 시간에는 채팅 화면에서 어떻게 처리해야 하는지 알아보겠습니다!! 감사합니다~