android Socket IO Random Chat - Socket IO 연결 과정

2022. 11. 26. 14:07android/Random Chatting

Socket IO 통신 연결을 알아보자!!

 

소켓 IO가 무엇인지 이런 거는 생략하고 안드로이드에서 어떻게 사용하는지

 

이번 시간에는 연결 방법을 알려드립니다.

 

먼저 서버용 Node js 를 위해 Visual Code도 필요함을 말씀드립니다!

 

node js 에서도 socket io 모듈이라는 걸 다운로드할 겁니다. 

 

그때 받은 버전에 따라 안드로이드 버전도 맞아야합니다.

 

이 글을 보고 하실 분들은 저와 같이 맞춰주시면 되겠습니다

 

이제 visual code 가 있으신 분들은 스킵하시고 없으신 분들은 

 

아래의 링크에서 다운로드하시면 됩니다. 

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

설치 위치 이런 건 상관없습니다.

 

다운로드하시면서 드라이브 편하신 위치에 폴더를 하나 만들어줍니다

 

저는 D 드라이브에 Chat이라는 폴더를 만들었습니다 ( 사진의 폴더는 메추라기로 예시용 폴더입니다. )

 

저기 폴더 열기에서 방금 만든 폴더를 선택해줍니다.

 

저랑 다르신 건 저는 테마를 적용해둬서 보기와 다를 수 있습니다

 

 

 

 

아래 사진처럼 마우스 두면 저렇게 나오는데 눌러서 app.js라는 파일을 만들어줍니다.

 

 

새 터미널을 눌러서 이제 필요한 모듈을 설치해야 합니다.

 

 

 

- npm init을 터미널에 입력해줍니다. 

엔터를 막 눌러서 넘어가 줍니다.

 

Is this OK? 나오면 또 엔터!

 

그러면 폴더에 package.json 이 생성된 것을 보실 수 있습니다.

 

 

 

이래서 언제 다 설명하나 싶은데... 그래도 계속 가보겠습니다

 

 

- npm install express

터미널에 위와 같이 적어서 엔터!

 

 

 

- npm install socket.io@2.3.0 

저는 2.3.0 버전을 사용하는데 버전을 2.x 버전을 찾아서 맞춰 설치해주시면 됩니다.

 

 

package.json 에 보시면 

 

중간에 dependecies가 보이시나요???

 

express와 socket io 가 잘 다운된 게 보이네요

 

자 이제 간략한 코드를 작성해보겠습니다.

 

app.js로 돌아가서

const express = require('express')
const http = require('http')
const app = express()
const server = http.createServer(app)
const io = require('socket.io')(server)

io.on('connection', (socket) => {
    console.log(`Socket connected : ${socket.id}`)
 
    socket.on('disconnect', () => {
      console.log(`Socket disconnected : ${socket.id}`)
    });
 
  });

  server.listen(3001, () => {
    console.log(`Server listening at http://localhost:3001`)
  });
 
이렇게 적어주면 일단은 기본적인 서버쪽 socket io setting 끝입니다.

 

코드에 대한 설명은 차차 하겠습니다.