# SockJS

joonoo3

[진행중인 포스트입니다.] 지난 WebSocket을 스프링에서 구현한 이후 React와의 연동에서 발생한 오류들을 해결했습니다 링크 : https://velog.io/@joonoo3/Spring-WebSocket을-이용한-실시간-채팅 > js const client = useRef({}); // 소켓 연결 const connect = () => { client.current = Stomp.over(() => { const sock = new SockJS('ws://localhost:8080/ws'); return sock; }); client.current.connect( {}, () => { // callback 함수로 sub을 해줍니다. client.curre

sloth_

사내 서비스에서 사용자 알림 기능을 구현할 때 웹 소켓을 사용하기에 이를 정리하고 이해해보려 한다. 웹 소켓이란? 웹 소켓이란 클라이언트와 서버가 http 프로토콜 안에서 전이중 통신을 할 수 있게 하는 통신 프로토콜이다. > 전이중 통신이란, 양방향 통신 중에서도 동시에 보내면서 받을 수도 있는 통신을 말한다. 채팅방처럼 보내는 도중에 응답을 받을 수도 있는 그런 것을 떠올리면 된다. 위의 설명에서도 나오다시피 웹 소켓의 예제들은 주로 채팅 서비스를 구현하면서 많이들 공부하는데, 이는 웹 소켓의 전이중 통신 방식을 제일 잘 보여주는 것이 채팅 서비스 기능이기 때문이다. 꼭 채팅이 아니더라도 실시간 알림 같은 기능으로도 이용할 수 있다. 등장 배경(사실은 추측에 가깝다) 웹 서비스는 본래 사용자의 요청이 들어오면 해당 요청에 대한 응답을 전해주고 연결이 종료된다. 하지만 웹 서비스가 발전하면서 기존의 요청에 대한 응답만 전달할 것이 아니라 특정

sarang_daddy

React로 SockJS, STOMP를 사용하여 채팅기능을 구현해보자. 구현된 채팅은 중고 거래 웹에 맞게 1:1 채팅 기능으로 구현했다. 이번 채팅 구현에는 JavaScript 라이브러리인 SockJS와 STOMP 프로토콜로 구현했다. 서버측 구현은 BE팀에서 담당했다. (여기선 React에서 사용된 코드만 정리했다.) 채팅은 서버와 클라이언트 양쪽에서 실시간 통신을 위해 동일한 라이브러리를 사용해야하기에 협업이 잘 되어야 한다 🤝 SockJS SockJS란 웹 애플리케이션과 웹 서버 간에 실시간 양방향 통신을 가능하게 해주는 JavaScript라이브러리다. SockJS는 웹 소켓(WebSocket)을 사용할 수 있는 경우에는 웹 소켓을 사용하여 통신하지만, 웹 소켓을 지원하지 않는 경우에는 다른 대안 수단으로 통신하도록 해주는 유용한 라이브러이다. [웹 소켓을 지원하지 않는 환경에서의 SockJS](https://dev-gorany.tistory

jinnnii

1. 목적 이전 포스팅에서는 자바에서 Python 파일을 직접 실행하여 한 줄 씩 결과 값을 Log로 출력하는 것을 해보았다. 이번에는 서버에서 출력하는 값을 실시간으로 클라이언트로 가져와 뷰에서 값이 출력하는 것을 해볼 것이다. Websocket 통신으로 SockJs와 Stomp를 사용하였다. 2. Websocket 통신 - SockJS와 Stomp WebSocket 실시간 양방향 통신을 위한 프로토콜. 서버와 클라이언트 간 웹 기반의 애플리케이션에서 데이터를 전송하기 위해 사용된다. SockJS WebSocket의 대안으로 사용되는 JavaScript 라이브러리. 브라우저 웹 서버 사이 짧은 지연시간과 크로스 브라우징을 지원하며 Websocket이 지원안되는 최신 브라우저에서도 잘 작동되도록 해준다.(Fallback) STOMP 간단한 텍스트 기반 메시징 프로토콜. 중개자 역할을 하는 서버와 클라이언트 간의 표준 메시징 프로토콜이다.

moon-tree

◆ SockJS 웹 소켓(WebSocket)과 유사한 방식으로 양방향 통신을 가능하게 하는 라이브러리입니다. 그러나 웹 소켓이 지원되지 않는 구형 브라우저에서도 동작할 수 있도록 설계되어 있습니다. > 서버와 클라이언트 간의 연결을 생성하고 유지하면서, 실시간으로 데이터를 전송할 수 있습니다. 이를 위해, SockJS는 다양한 전송 프로토콜(transport protocol)을 제공합니다. 예를 들어, WebSocket이 지원되는 경우 WebSocket을 사용하고, 그렇지 않은 경우에는 HTTP Streaming, HTTP Long Polling 등의 방식으로 연결을 유지하고 데이터를 전송합니다. > JavaScript, Python, Java, Ruby, PHP 등 다양한 언어에서 지원되는 라이브러리입니다. 이를 이용하여 웹 애플리케이션에서 실시간 채팅, 게임, 알림 등 다양한 기능을 구현할 수 있습니다. > **Node.js와 함께 사용

inssg

여러대의 채팅 서버간에 메시지 공유하기(feat. Redis) 앞장에서 구현한 채팅서버 문제점 채팅방의 메인 저장소 부재로 서버의 메모리에 적재된 채팅방은 서버를 재시작할 때마다 초기화 되는 이슈 발생 DB를 이용하거나 다른 저장소를 이용하여 채팅방이 계속 유지되도록 처리가 필요 ⇒ Redis 사용 채팅서버가 여러개일 경우 서버간 채팅 공유 불가 현재는 pub/sub가 발생한 서버 내에서만 메시지를 주고 받을수 있다. 구독대상인 채팅방(topic)이 생성된 서버 안에서만 유효하므로 다른 서버로 접속한 클라이언트는 해당 채팅방이 보이지 않고, 채팅방 구독도 불가능함. 구독대상이 여러 서버에서 접근할 수 있도록 개선 필요 ⇒ 공통으로 사용가능한 pub/sub 시스템을 구축하고 모든 서버들이 해당 시스템을 통해 pub/sub 메시지를 주고받도록 변경해

inssg

웹소캣 기존의 단방향 HTTP 프로토콜과 호환되어 양방향 통신을 제공하기 위해 개발된 프로토콜. 일반 socket 통신과 달리 HTTP 80포트를 이용하므로 방화벽에 제약이없다. 접속까지는 HTTP 프로토콜을 이용하고 그 이후의 통신은 자체적이 Websocket 프로토콜로 통신한다. 실시간 채팅앱 구현을 위해 웹소캣을 사용하는 이유 클라이언트A와 서버가 연결되고, 클라이언트B와 서버가 연결된 상태에서 클라이언트A가 채팅 메시지를 보내면 서버가 클라이언트B에게 보내주는 형태이다. 이러한 방식은 클라이언트A와 B 모두 서버와 연결되어 있을 때만 사용 가능하다. 즉, 한 사람이 채팅 앱을 꺼뒀다면 메시지를 주고 받을 수 없는 것이다. 하지만 카카오톡을 비롯한 채팅 서비스는 그렇지 않다. 실제 상용 채팅 서비스는 클라이언트의 채팅 메시지 전송을 수신한 뒤 데이터베이스에 저장하고, 만약 수신자가 서버와 연결되어 있다면 소켓 통신을 통해 메시지를 곧장 보

woong99

SockJS WebSocket의 문제점 모든 클라이언트의 브라우저에서 WebSocket을 지원한다는 보장이 없다. Server/Client 중간에 위치한 Proxy가 Upgrade 헤더를 해석하지 못해 서버에 전달하지 못할 수 있다. Server/Client 중간에 위치한 Proxy가 유휴 상태에서 도중에 Connection을 종료시킬 수 있다. WebSocket Emulation 우선 WebSocket을 시도하고, 실패할 경우 HTTP Streaming, Long-Polling 같은 HTTP 기반의 다른 기술로 전환해 다시 연결을 시도하는 거을 말한다. node.js를 사용한다면 Socket.io를 이용하는 것이 일반적이다. Spring을 사용한다면 SockJS를 이용하는 것이 일반적이다. Spring은 Servlet 스택 위에서 Server/Client 용도의 SockJS 프로토콜을 모두 지원한다

woong99

✏️ 프로젝트 설명 이전 프로젝트의 문제점 중 브라우저 호환성을 해결하기 위해 SockJS를 추가하여 채팅을 구현하였다. 🎁 기능 ✅ [채팅1] WebSocket + SpringBoot와 동일 📗 학습 내용 및 코드 분석 ⭐️ 이전 프로젝트와의 차이점만 게시 ⭐️ SockJS ⭐️ WebSocket Config Java Configuration을 통해 SockJS를 가능하게 한다. ⭐️ JS WebSocket을 SockJS로 바꾸어준다. ❗️ 결론 SockJS를 이용해 웹소켓을 지원하지 않는 브라우저에서 서버와 클라이언트 간 통신이 끊기지 않도록 구현했다! IE에서는 제대로 테스트해보지 못했지

msung99

시작에 앞서 : 왜 학습을 진행하게 되었는가? 이번에 진행중인 사이드 프로젝트의 주제가 "동기화" 와 관련한 것인데, 동기화는 여러 사람들에게 있어 "실시간성" 을 보장해야 한다는 특징을 지닌다고 느꼈습니다. 기존 HTTP 방식으로 처리가 가능하면 좋겠지만, HTTP의 방식으로는 매번 새로고침을 하지 않는이상 동기화에 문제가 발생하며 새로고침을 한다고한들 싱크가 맞지 않을 것이란 판단이 들었습니다. 따라서 웹소켓에 대해 깊이있는 학습을 진행한 후 웹소켓과 그의 하위프토코콜인 STOMP 를 적용시켜보고자 이렇게 포스팅을 진행합니다. > 이번 포스팅은 간단한 대표 예제코드만 포함하고 있으며, 이론 위주의 설명으로 구성되어 있습니다. 자세한 실무적인 코드는 조만간 새롭게 다루어보고자 합니다! 웹소켓(Web Socket) 이란 웹소켓은 웹 어플리케이션을 위한 양방향 통신기법으로, 실시간성을 보장할 수 있는 방식입니다. 따라서 실시간성을 보장하는 서비스, 예를들

zxcvbee

나만무 시작한지 벌써 3주가 흘렀다. react-native와 spring framework를 사용해서 범용적인 서비스를 만들겠다고 하던 패기 넘치는 우리팀이 share extension이라는 입문자에게는 높았던 허들을 넘어 구현을 진행해나가고 있다. 최근에는 채팅을 구현했는데 처음해보는 거라 신기하고 바로바로 결과가 보여 재밌었다. 이전에 고민했던대로 채팅 서버는 Stomp와 SockJS, MySQL을 사용해 구현했다. 시행착오 및 적용 Stomp와 클라언트는 vue.js를 통해 적용하는 예시로 처음 WebSocket의 흐름을 파악했다. ![](https://velog.velcdn.com/images/zxcvbee/post/c3e0f0dc-a1ce-4759-8

kkookk55

WenRTC p2p 통신을 이용하여 다대다 통신연결을 위한 코드를 작성중입니다! 현재 offer 를 주고받는데 까지 성공하였고 내일은 answer와 candidate 송수신까지 구현을 목표로 하고있습니다! 오늘 새로 알게된 내용으로는 객체의 키값을 변수로 불러올때의 문법입니다 ` 위의 코드는 pcs 객체에서 allUsers[i]의 값을 키로 값을 불러오는 코드입니다! 아래의 코드에서 예시 내용을 확인할 수 있습니다 :) 정말 많은시간을 잡아먹고 있는 RTC 통신.... 내일은 꼭 끝이 났으면 좋겠습니다 ㅠㅠㅠ

zxcvbee

우리 Send Wish 어플은 친구 생일선물, 부모님 생신 선물 등을 혼자 또는 함께 상품을 고를 때 해야하는 많은 의사결정을 도와주는 툴로써 만들어지고 있다! 함께 결정하기 위해 상품들을 한눈에 보면서 이야기 나누고 싶다는 의견을 받아들여 공유 장바구니 내부 채팅방을 만들게 되었다. 우리는 react-native와 Spring framework를 사용하고 있었기에 Stomp와 Socket.IO 중에 어떤 것을 사용해야할까 고민이 들었다. Stomp는 spring-websocket 모듈을 통해서 제공하기에 우리 기술 스택과 맞지만 react-native와 연결된 자료가 많지 않았다. 반면 Socket.IO 는 node.js 기반으로 만들어진 기술로 우리에겐 새로운 기술스택이지만 react-native와 사용된 자료가 많았다. 개발 프로젝트 초심자들로 react-native의 버전업과 호환에 시간을 많이 쏟았기에 더이상 시간을 지체할 수 없어서 나온 고민이었다. 이미 p

kkookk55

이전 포스팅과 이어지는 글입니다. 이전 글에서 테스트가 이루어 지지않은 코드를 올려두었는데요 백엔드 서버와 테스트 한 결과 원하던 결과를 얻지 못했습니다 ㅠㅠㅠ 이후 코드 수정하여 signaling이 성공한 코드를 올려보겠습니다 :) 이번 코드에선 STUN 서버를이용하였는데 구글에서 제공하는 코드를 사용하였습니다. 실제 서비스에선 STUN서버를 구축하여 사용할 예정입니다. 아직 1:1 peer to peer 통신밖에 되지 않으며 채널이나 새로운 로직을 구현하여 최대 4명까지 통신 가능한 코드를 구현할 계획입니다.

kkookk55

이번주엔 Sockjs와 stomp를 이용한 실시간 채팅을 구현하는 중이다... 많은 예시 코드를 봤지만 정말이해하기 힘들고 어느정도 구현이 완료된 현시점에서도 코드를 100% 이해하지 못하고있다^^ 머리아픔... 프론트 깃헙 리포 https://github.com/Line-Clone/Lineclonefront Chat.jsx > 현시점 까지 문제는 채팅방에 입장 후 실시간으로 타 사용자의 메세지는 받아와 지지만 내가 채팅을 입력하기 전까지 화면이 리렌더링이 되지 않는 것.... 빠른 시일내에 수정 예정입니당 ...

stringbuckwheat

6. 기타 트러블 슈팅 1) ModelAndView RestChatController (채팅이 아닌) 다른 파트를 구현할 때엔 동기와 비동기가 섞여 있기도 했고, 일부분만을 ajax로 처리한 탓에 view는 @Controller에서, 기타 json을 리턴받아야 할 경우에만 @RestController의 메소드를 사용했다. 그러나 채팅을 구현할 땐 (우리 조의 템플릿 특성상) 최초로 채팅 메인 페이지를 띄울 때를 제외하면 view의 이동이 발생하지 않는다. 이에 @RestController에서 DB에서 가져온 데이터와 view 이동을 동시에 처리하기 위해 ModelAndView를 리턴하는 메소드를 작성하였다. ModelAndView를 써보는 것은 처음이었는데, 주요 메소드는 다음과 같다. 메소드 | 역할 --- | --- setViewName(String view)|응답할 view이름 설정 addObject(String name, Object value)|v

stringbuckwheat

5. chat.js 1) 전체 코드 2) click 이벤트 - 트러블 슈팅: click 이벤트 바인딩 채팅 페이지에 진입하면 DB에 저장된 채팅방 목록과 해당 워크스페이스 멤버 리스트 정보를 사이드바에 띄운다. 이때 그 페이지에서 새로운 채팅방을 만들면 리로드 없이 새 채팅방 정보를 사이드에 append하는데, 이때 새로 추가한 채팅방에 대해서는 click 이벤트가 동작하지 않는 문제가 발생했다. 동적으로 추가된 요소에 이벤트가 바인딩 되지 않아 생기는 문제다. 이에 로 시작하던 기존 코드를 로 수정하였다. 이벤트를 선택자가 아니라 document에 위임하여 해결한다. - $("#msgArea").empty(), $("#msg").

stringbuckwheat

1. 시작하며 파이널 프로젝트로 만든 협업툴 Safari에서 미처 구현하지 못한 채팅 기능을 추가하기 위해 Spring boot 환경에서 WebSocket, SockJs, STOMP를 사용해 간단한 채팅을 만들어 보았다. 파이널 프로젝트 회고는 여기로! 2. pom.xml pom.xml에 dependency를 추가한다. 1) WebSocket HTTP는 Request/Response 기반의 Stateless protocol로 클라이언트에서 Request를 보내면 서버가 Response를 하는 단방향 통신이다. 이 경우 서버의 데이터가 업데이트 되더라도 클라이언트가 refresh를 하지 않는 이상 변화된 데이터가 업데이트 되지는 않는다. 읽고 있던 게시판의 글이 수정되더라도

thfl3363

저번에는 채팅 라이브러리에 어떤것이 있고 어떤것을 선택할지 결정했다. 우리조는 서버가 스프링이기 때문에 SockJs를 stomp와 함께 사용하기로 결정했다. 그렇다면 이제 이 websocket을 어떻게 사용해야할지... 고민이 많아진다. 나는 최신버전인 v5를 사용했고 stomp 페이지에서 코드를 참고했다. 이제 구현순서를 설명해보려고 한다. 1. 기본환경 설정 먼저 stomp와 sockjs를 사용하기 위해 해당 라이브러리를 설치하고 임포트해준다. 2. 클라이언트 생성 및 소켓 연결 클라이언트 생성은 다음과 같다. 클라이언트를 생성해서 채팅이 brokerURL을 연결하고 연결을 위한 헤더에는 서버와 협의하여 Authorization 토큰을 보내준다. 디버그는 앞으로 통신이 어떤식으로 되는지 보여주는 가장 핵심적인 부분이다.

thfl3363

스파르타 코딩클럽 이노베이션 캠프에 참가하면서 최종 실전프로젝트로 캠스터디를 구현하기로 했다. 이 아이디어는 내가 낸 것인데... 사실 어느정도 빡셀것이라고 예상했던 주제이다.. 다행히 팀원들을 너무 잘 만나서 팀원 모두 개같이 망하더라도 실전다운 프로젝트를 만들어보자는 공통된 의지를 바탕으로 진행하게되었다. 여기서 내가 담당한 기능은 채팅이다.. 사실 이전까지 한번도 채팅을 구현해본 적이 없어서 내가 할 수 있을까...? 라는 생각으로 시작했다..근데 뭐 어떡해... 먼저 나서서 제일 어려울것 같은 화상연결을 담당하신 프엔 팀장님도 계시는데 나도 해내야지ㅎㅎ 이때부터는 그냥 무조건 해낸다는 생각하나만으로 임했다...ㅋㅋㅋㅋ 일단 채팅기능을 구현하기 알아보았을때 websocket이라는게 있다고 들었다. <span styl