2022 01 21 금요일 공부 (Web Socket)

 

20220121 Web Socket 공부.md

0.01MB

20220121_Web_Socket_공부.pdf

1.56MB

 

(2022 01 23 화요일 작성 주의) 지난주에 이어서 이번주에도 모여서 프로젝트를 했다. 남수는 WebRTC 를 이용해서 화상회의 기능을 구현하고 있는 중이고, 진주는 세션 방식을 이용해서 구현한 로그인 기능을 토큰 방식으로 바꾸는 중이였고 나도 어떤 기능을 하나 구현하고 싶다는 생각이 들어서, 화상채팅 기능을 구현하겠다고 말했다. 명세서를 확인해 보니까 화상채팅 기능을 구현하기 위해서 Web Socket 과 Stomp, SockJS 를 이용하라고 해서 명세서에 첨부된 링크를 하나하나 읽어보던 중, 화상채팅 기능을 구현해 놓은 깃을 발견했고 그걸 먼저 실행시켜 보면서 어떻게 동작하는지 알알아보고 소스를 분석해야 겠다는 생각이 들었다. git clone 한 후 코드를 실행시키는 것도 쉽지는 않았지만 이슈를 모두 해결하고 웹 브라우저 개발자 도구 console 에 찍힌 로그들을 확인하면서 동작 원리를 조금 이해할 수 있었다.

 

공부한 내용을 리뷰겸 조금 정리해보자면, 소스를 돌려보기 위해 마주친 에러는 크게 두 부류로 나눌 수 있었는데, 하나느 run 하는 시점에 난 에러들이 있고, 다른 한 부류는 웹 브라우저를 띄웠지만 데이터베이스에 데이터를 저장 할 테이블이나 컬럼이 없거나 이름이 잘못되어서 (오타) 난 500 (서버 쪽) 에러가 대부분이였다. 첫번 째 부류는 intelliJ와 VSCode에서 소스를 약간씩 수정해서 해결할 수 있었다. 그중 port 중복을 해결하기 위해서 (intelliJ에서 포트 중복되었다고 오류를 찍어줌, VSCode 에서 8000포트를 이미 사용하고 있어서!) VSCode 에서 프론트앤드 서버를 띄울때 3000 을 사용하도록 바꾸어주었다. 다음 500 에러는 데이터베이스에 관한 거여서 MySQL 에서 테이블을 만들어주었다. 그리고 테이블을 만들 때 id 컬럼의 경우 auto_increment 를 사용해서 값을 자동으로 올려주도록 해야 한다는 점과, auto_increment 는 primary key 에만 옵션을 적용해야 한다는 점을 알게 되었다!

 

# 중복 포트 문제를 해결하는 방법

# 첫번째 방법
netstat -a -n -o (-a : all, -n : IP:Port 형태로 출력, -o : 프로세스 아이디 출력)
내가 중지 시키려는 IP:Port 를 찾아 PID(프로세스ID)를 기억
taskkill /f /pid XXXX (XXXX : kill 하려는 PID 입력)

# 두번째 방법
내가 가동하려는 어플리케이션의 포트 번호를 바꿔 가동
application.properties에서 포트번호를 명시
server.port = XXXX

-- 테이블 생성시 옵션 부여
CREATE TABLE auto_test(
	id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,
	name VARCHAR(64)
);

-- 이미 생성한 테이블에 옵션 추가
ALTER TABLE auto_test 
MODIFY id INT NOT NULL AUTO_INCREMENT;

 

https://omaeng.tistory.com/10

서버 기동시 port 중복 해결방법!

https://java119.tistory.com/47

[MySQL || MariaDB] AUTO_INCREMENT 옵션 총 정리

 

Web Socket, SockJS, Stomp 를 공부한 내용은 HTTP 통신(JWT, Session 를 곁들인), Socket 통신(SockJS, Stomp 를 곁들인) 순서로 핵심적인 내용들만 짤막하게 정리해보겠다. 깊이있게 이해하고 아는 것은 아니여서 아래 첨부된 링크들을 통해서 더 살펴보아야 할 것 같다!

 

HTTP 통신 (JWT, Session 를 곁들인)

• HTTP 통신 connectionless, stateless 특성으로 인한 문제점
  • 클라이언트의 요청이 있을 경우에만 서버가 응답해서 정보를 전송하고 곧바로 연결은 끊기 때문에 각 통신의 상태, 클라이언트의 정보는 서버에 저장되지 않는다.
  • connectionless, stateless 의 특성으로 인해 "클라이언트를 기억하는 척" 하기 위한 방법(도구)이 필요했고, 그 방법이 세션과 토큰에 해당한다. 두가지 방법의 가장 큰 차이는, 세션은 디비에 저장되지만 토큰은 클라이언트 (웹 브라우저, local storage, 쿠키) 측에만 저장된다.
• Session, Cookie 차이점과 특성
  • Session : 서버에서 가지고 있는 정보
  • Cookie : 서버에서 발급된 세션을 열기 위한 키 값 (세션 ID)
  • Cookie 만으로 인증을 한다 = 서버의 자원을 사용하지 않는다 = 클라이언트가 인증 정보를 책임
  • 서버에서 추가적인 저장공간이 필요하기 때문에 저장공간 (세션 저장소, 데이터베이스) 이 필요하다.
• Token 의 특성
  • JWT (JSON Web Token) : 인증에 필요한 정보들을 암호화시킨 토큰
  • 서버가 클라이언트로부터 요청에 대한 응답을 보낼 때, 토큰을 발급 후 전달한다.
  • 세션 저장소가 필요 없고 토큰 안에 유저 정보를 넣는다.
  • 클라이언트 입장 : HTTP 헤더에 ID나 토큰을 실어 보낸다는 점에서 세션/쿠키 방식과 동일
  • 서버 입장 : 별도의 저장소를 이용한다, 인증을 위해 암호환다 의 차이 발생

https://fierycoding.tistory.com/69

[인증/인가]Session(세션)과 Token(토큰)(JWT)의 차이점

https://tofusand-dev.tistory.com/89

Cookie, Session, Token 의 차이점

 

Socket 통신 (Web Socket, SockJS, Stomp 를 곁들인)

• Socket 통신이란 HTTP 통신의 단방향성의 특성과 달리 서버와 클라이언트 양방향 연결이 이루어지는 통신이다. 자주, 실시간으로 데이터를 주고 받아야 하는 환경에서는 (실시간 채팅) Socket 통신이 HTTP 통신보다 유리하다. (클라이언트와 서버가 특정 port 를 통해 연결을 유지)
• Socket :프로그램이 네트워크 상에서 데이터를 송신과 수신을 하기 위한 연결부이다. 일반적으로 TCP/IP (또는 UDP) 프로토콜을 이용하거나, WebSocket 을 이용한다.
• Web Socket (= ws, wss(web socket secure)) : HTTP 레이어에서 작동하는 소켓으로 TCP/IP 소켓의 레이어가 다르다. IP, PORT를 통해서 통신한다는 점에서는 비슷하다.

https://medium.com/@hyun.sang/network-%EC%86%8C%EC%BC%93%EA%B3%BC-%EC%9B%B9%EC%86%8C%EC%BC%93%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-b1b745fcdcc2

[Network]소켓과 웹소켓의 차이점

https://urmaru.com/7

웹 소켓(WebSocket) 개념 이해