SlideShare a Scribd company logo
1 of 24
Download to read offline
Spring-WebSocket 기반
Full-Featured 채팅 구현
실시간 웹
소셜 피드, 알림, 채팅 등
웹의 진화
HTTP 1.1 > Ajax > WebSocket > HTTP/ 2
이벤트기반 응답의 구현 방
법
Polling
Ajax + setInterval
Comet (Ajax Push)
Long Polling
HTTP Streaming
WebSocket
HTTP 포트를 사용하는 TCP 상의 쌍방향 통신
WebSocket API
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
var ws = new WebSocket(‘ws://localhost/ws');
ws.onopen = function() {
ws.send(‘hello’);
};
ws.onmessage = function(e) {
console.log(‘message’, e.data);
};
ws.onclose = function(e) {
console.log(‘close’, e.code);
};
SockJS
웹소켓(형) 객체를 제공하는 cross-browser 라이브러리
https://github.com/sockjs/sockjs-client
var sock = new SockJS(‘ws://localhost/ws');
sock.onopen = function() {
sock.send(‘hello’);
};
sock.onmessage = function(e) {
console.log(‘message’, e.data);
};
sock.onclose = function() {
console.log(‘close’);
};
STOMP
웹소켓 서브 프로토콜
Spring WebSocket 에서 지원
stomp.js
var sock = new SockJS(‘ws://localhost/ws');
var client = Stomp.over(sock);
client.connect({}, function() {
client.subscribe("/topic/test", function(message) {
console.log(message);
});
});
client.send("/topic/test", {}, "Hello, STOMP");
client.disconnect(function() {
console.log('disconnected.');
};
Spring WebSocket
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint(“/sockjs").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.setApplicationDestinationPrefixes("/app");
config.enableSimpleBroker("/topic", "/queue");
}
}
@Controller
public class MessageController {
@MessageMapping("/app")
@SendTo("/topic/test")
public CommentView send(String message) {
return message
}
}
Scaling
BrokerRelay로 전환
현재 접속 사용자 및 구독 상태 기록
RabbitMQ
브로커로 사용
STOMP 플러그인 지원
MultiServerUserRegistry
@Autowired
SimpUserRegistry userRegistry;
final String dest = stompHeaderAccessor.getDestination();
userRegistry.findSubscriptions(s -> s.getDestination().equals(dest)).size();
Security
Spring Security 필터
Handshake 과정에서 HTTP 요청에 적용
끝

More Related Content

Similar to Spring-WebSocket 기반 Full-Featured 채팅 구현

막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js연웅 조
 
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Circulus
 
vert.x 를 활용한 분산서버 개발하기
vert.x 를 활용한 분산서버 개발하기vert.x 를 활용한 분산서버 개발하기
vert.x 를 활용한 분산서버 개발하기John Kim
 
챗봇 시작해보기
챗봇 시작해보기챗봇 시작해보기
챗봇 시작해보기성일 한
 
Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기성일 한
 
채팅 소스부터 Https 주소까지
채팅 소스부터  Https 주소까지채팅 소스부터  Https 주소까지
채팅 소스부터 Https 주소까지Kenu, GwangNam Heo
 
TCP echo 서버 및 클라이언트 예제 스터디
TCP echo 서버 및 클라이언트 예제 스터디TCP echo 서버 및 클라이언트 예제 스터디
TCP echo 서버 및 클라이언트 예제 스터디quxn6
 
.net core 에서 SignalR 사용해보기
.net core 에서 SignalR 사용해보기.net core 에서 SignalR 사용해보기
.net core 에서 SignalR 사용해보기Ji Lee
 
.NET에서 비동기 프로그래밍 배우기
.NET에서 비동기 프로그래밍 배우기.NET에서 비동기 프로그래밍 배우기
.NET에서 비동기 프로그래밍 배우기Seong Won Mun
 
자바 다중 채팅 프로그램
자바 다중 채팅 프로그램자바 다중 채팅 프로그램
자바 다중 채팅 프로그램Hwangcy
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기John Kim
 
AWS Meetup 프리젠테이션.pdf
AWS Meetup 프리젠테이션.pdfAWS Meetup 프리젠테이션.pdf
AWS Meetup 프리젠테이션.pdfAlexLee226686
 
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석Tommy Lee
 
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Channy Yun
 
Spring 4.x Web Application 살펴보기
Spring 4.x Web Application  살펴보기Spring 4.x Web Application  살펴보기
Spring 4.x Web Application 살펴보기Ji Heon Kim
 
[명우니닷컴]웹보안채팅 Isyouchat
[명우니닷컴]웹보안채팅 Isyouchat[명우니닷컴]웹보안채팅 Isyouchat
[명우니닷컴]웹보안채팅 IsyouchatMyeongun Ryu
 
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 SeongHyun Ahn
 
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)Wonseok Jang
 

Similar to Spring-WebSocket 기반 Full-Featured 채팅 구현 (20)

막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js
 
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신
 
vert.x 를 활용한 분산서버 개발하기
vert.x 를 활용한 분산서버 개발하기vert.x 를 활용한 분산서버 개발하기
vert.x 를 활용한 분산서버 개발하기
 
Jung jaeyeoup
Jung jaeyeoupJung jaeyeoup
Jung jaeyeoup
 
챗봇 시작해보기
챗봇 시작해보기챗봇 시작해보기
챗봇 시작해보기
 
Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기
 
채팅 소스부터 Https 주소까지
채팅 소스부터  Https 주소까지채팅 소스부터  Https 주소까지
채팅 소스부터 Https 주소까지
 
Node.js 첫걸음
Node.js 첫걸음Node.js 첫걸음
Node.js 첫걸음
 
TCP echo 서버 및 클라이언트 예제 스터디
TCP echo 서버 및 클라이언트 예제 스터디TCP echo 서버 및 클라이언트 예제 스터디
TCP echo 서버 및 클라이언트 예제 스터디
 
.net core 에서 SignalR 사용해보기
.net core 에서 SignalR 사용해보기.net core 에서 SignalR 사용해보기
.net core 에서 SignalR 사용해보기
 
.NET에서 비동기 프로그래밍 배우기
.NET에서 비동기 프로그래밍 배우기.NET에서 비동기 프로그래밍 배우기
.NET에서 비동기 프로그래밍 배우기
 
자바 다중 채팅 프로그램
자바 다중 채팅 프로그램자바 다중 채팅 프로그램
자바 다중 채팅 프로그램
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
 
AWS Meetup 프리젠테이션.pdf
AWS Meetup 프리젠테이션.pdfAWS Meetup 프리젠테이션.pdf
AWS Meetup 프리젠테이션.pdf
 
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
[개방형 클라우드 플랫폼 오픈세미나 오픈클라우드 Pub] 3.open shift 분석
 
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)
 
Spring 4.x Web Application 살펴보기
Spring 4.x Web Application  살펴보기Spring 4.x Web Application  살펴보기
Spring 4.x Web Application 살펴보기
 
[명우니닷컴]웹보안채팅 Isyouchat
[명우니닷컴]웹보안채팅 Isyouchat[명우니닷컴]웹보안채팅 Isyouchat
[명우니닷컴]웹보안채팅 Isyouchat
 
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄 파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄
 
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)
 

Recently uploaded

공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화JMP Korea
 
데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법JMP Korea
 
JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP Korea
 
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석JMP Korea
 
JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP Korea
 
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP Korea
 
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?Jay Park
 
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP Korea
 

Recently uploaded (8)

공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화
 
데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법
 
JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!
 
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
 
JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례
 
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
 
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
 
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
 

Spring-WebSocket 기반 Full-Featured 채팅 구현