PangYeon`s IT Log

Socket IO를 이용한 정말 간단한 채팅 프로그램이며, express를 사용한다.

기초만 쓴것이기 때문에 정말로 간단하다.

전체 코드 :  https://github.com/wonkwangyeon/Real_Simple_SocketIO_Chat

1. 프로젝트를 하나 만들고 아래의 명령어를 입력한다.

npm init
npm install express --save
npm install socket.io --save

2. 입력후 app.js라는 파일과 client.html라는 파일을 만든다.

3. app.js 파일에 들어가 아래와 같이 입력한다. (위 github에서 복사 가능)

5번째 라인 :  서버를 오픈한다. 또한 Socket.IO 홈페이지의 레퍼런스에서 app.listen으로 서버를 열지마라고 주의한다.

10번째 라인 : localhost:3000 으로 들어가면 바로 client.html을 열기 위함이다.

15번째 라인 : socket io 에 접속한다.

16번째 라인 : 클라이언트에서 들어오는 메세지를 받은후

18번째 라인 : 이 메세지를 접속한 모든 클라이언트에게 보낸다.

간단하다 on이 메세지를 받는 함수, emit이 메세지를 보내는 함수이다.  앞의 'receive'라는 것을 통해 어디로 보내고 어디로 받는지 정할 수 있다. 

클라이언트 부분을 보면 간단하게 이해가 된다.

4. client.html

20~32번째 라인 : 메세지를 받고 전송하는 간단한 입력 폼 전체 소스를 보면 20번째 위에는 아주 간단한 css가 설정되어있다.

33번째 라인 : 핵심. 이것을 통해 socket.io를 사용할 수 있다.

35번째 라인 : 서버에서 오픈한 socket 서버에 접속한다.

37번째 라인 : 버튼을 누르면 실행하는 이벤트이다.

38번째 라인 : 위에 설명하였듯이 emit이 메세지를 보내는 함수 이다. 그리고 'receive'라는 서버에서 설정한 이름을 통해 그곳으로 메세지를 보낸다.

39번째 라인 : 메세지를 보냈으면 현재 입력되어 있는 메세지를 초기화하는 것.

41번째 라인 : 위에 설명하였든이 on이 메세지를 받는 함수이다. 'client_receive'라는 이름이라고 설정하였고 서버에서

 emit을 'client_receive'라고 설정하여 보낸다.

42번째 라인 : 받은 내용을 22번째 라인의 textarea에 설정한다.

5. 결과

node app.js 를 통해 실행하고

localhost:3000로 접속한다.

기본적인 함수를 익히고 이를 통해 정말로 간단한 채팅프로그램을 만들어보았다.

전체 코드 :  https://github.com/wonkwangyeon/Real_Simple_SocketIO_Chat

참고 :  https://socket.io/docs/#What-Socket-IO-is

Spring boot에서 AWS Elastic Beanstalk 사용시 .ebextensions 사용하는 방법이다.

Elastic Beanstalk 사용시 배포방법이 war파일 배포방법과 jar파일 배포방법이 있는데

이 두개는 .ebextensions 사용시 기본적인 사용법은 같으나 배포시 차이점이 있다.

1. 2018/10/26 - [Develop/Spring Boot] - Spring Boot AWS Elastic BeanStalk을 이용한 배포

2. 2019/02/12 - [Develop/Spring Boot] - Spring boot ElasticBeanstalk 환경변수설정시 주의사항

1.  기본 사용방법으로는 .ebextensions 란 폴더를 프로젝트 최상위에 만든다. 

2. 만들었으면 이제 서버에 적용하고 싶은 값들을 .config 확장자로 만들어 .ebextensions의 폴더에 넣으면 된다.

기본적으로 적용하고싶은 파일들의 순서는 알파벳순서라서, 보통 00-이름.config, 01-이름2.config 이렇게 이름을 짓는다.

[Directory구조 예시]

Project

--.ebextensions 

-- 00-이름.config

-- 01-이름2.config

3. 이제 nginx설정하는 방법이다. (이것이 필요 없다면 바로 4번의 배포 방법으로 가시면 됩니다.)

아래의 사진처럼 폴더를 생성한다.

3-1 . 먼저 nginx 설정을 변경하고싶다면 nginx의 전체 속성을 일단 복사해서 가져온 뒤

nginx.conf라는 파일을 생성 후 복사한 전체 내용을 ngnix.conf에 붙여넣고 변경하고 싶은 내용을 추가하면 된다. 

위 사진처럼 nginx 폴더(conf.d폴더가아님) 바로 아래에 nginx.conf 파일을 넣는다. 이렇게 되면 nginx 의 전체설정을 서버에 완전히 쓰게 된다.

3-2. nginx 전체 설정 가져오기가 번거롭다면 위 사진처럼 conf.d 폴더와 그리고 아래에 elasticbeanstalk이라는 폴더를 생성한다.

conf.d폴더아래에 만약 .conf 파일을 생성한다면 이 내용은 nginx.conf 전체 속성의 http 단에 들어가고

elasticbeanstalk 폴더 아래에 만약 .conf 파일을 생성한다면 이 내용은 nginx.conf 전체 속성의 http 단의 sever 단에 들어간다

이게 무슨말이냐면 아래의 사진처럼 conf.d 폴더에 생성한 .conf 파일의 내용은 검정색 선 안에 들어가고

elasticbeanstalk 폴더 아래에 생성한 .conf 파일의 내용은 빨간색 선 안에 들어간다.

이런식으로 nginx 설정을 변경한다.

4. 배포는 war파일 배포와 jar파일 배포시 차이가 있다. 일단 공통적으로 zip 을 해주어야 한다.

4-1. war 파일은 .ebextensions 폴더와 함께 zip 파일로 만든후 이를 Elastic Beanstalk에 올리면 ebextensions 에서 설정한 값이 적용된다.

[.zip 파일 directory 예시]

.zip

-- .ebextensions 

-- .war

4-2. jar파일은 zip파일로 만들고 배포하면 설정이 먹히지 않는다. 그렇기 때문에 Procfile 이라는 것을 사용해야 한다.

Procfile을 말 그대로 Procfile이라고 프로젝트 최상위 경로에 생성한다 

[Directory구조 예시]

Project

--.ebextensions 

-- 00-이름.config

-- 01-이름2.config

생성 후 Procfile 내용안에 아래와 같이 작성한다.

web: java -jar jar파일경로/파일이름.jar

작성하였으면 이제 .ebextensions 폴더와 .jar파일 Procfile을 zip 파일로 압축한다.

[.zip 파일 directory 예시]

.zip

-- .ebextensions 

-- .jar

-- Procfile

그리고 이를 Elastic Beanstalk에 올리면 ebextensions 에서 설정한 값이 적용된다.

(어차피 zip파일로 압축할거면 굳이 root 폴더에 생성해야하는 이유가 무엇인지 궁금하다.

build 시 자동으로 zip 파일로 압축하는 방법이 있다고 하던데 알아봐야겠다.)

참고 :  https://docs.aws.amazon.com/ko_kr/elasticbeanstalk/latest/dg/create_deploy_Java.html

Spring boot ElasticBeanstalk 환경변수설정시 주의사항이다.

이것 때매 조금 고생을 한 적이 있다.

Spring boot에서 application.properties 작성시 대표적으로 server.port 등 이렇게 . (마침표)을 써서 사용한다

하지만 ElasticBeanstalk 에서는 아래의 사진처럼 이를 _ (언더스코어)로 구분하는데

Spring boot의  application.properties에는 - (하이픈)이 사용되는 것이 있다. 대충 이런것들 spring.aop.proxy-target-class이 있다.

이럴 경우 - (하이픈)은 . (마침표)가 아니라 그냥 두는 경향이 있는데 

이 또한 무조건 - (하이픈)을 _ (언더바)로 바꾼뒤 ElasticBeanstalk 의 환경변수설정에 입력해야 한다.

ex) SPRING_AOP_PROXY_TARGET_CLASS