#sockjs

리액트 웹소켓 사용자 인증

웹소켓을 사용해서 채팅구현 중에 있습니다. 이때 사용자 인증 처리를 핸드셰이크 시 요청 헤더에 토큰을 담아 보내려고 합니다. Web Socket API에선 요청 헤더에 토큰을 담아 보내는게 안되고, Socket.IO나 SockJS 라이브러리를 사용하라는걸 알게되었는데 혹시나 라이브러리 사용하지 않고 Web Socket API 에서 요청 헤더에 토큰을 담아보내는 방법이 있나요?

Next.js 로 Spring과 웹소켓 통신이 가능한가요?

next.js와 spring으로 데이팅앱을 개발중이라 실시간 1:1 채팅 기능을 구현하고 있습니다. 저는 프론트엔드 개발자이고, next.js를 사용중인데 사정이 있어서 클라이언트 사이드에서 fetching을 해오고 있습니다. 그런데 스프링과 통신 설정을 했는데도 connection, send까지는 되는데 subscribe가 안되고 있는지 메시지를 받는게 안되고 있습니다. next.js에서 스프링과 stompjs, sockjs를 통해 실시간 채팅을 구현하는게 불가능한가요?

플러터에 sockjs

현재 프론트엔드 파트에서 플러터를 이용하여 모바일 개발을 진행하고 있습니다 진행중인 프로젝트에 채팅방 기능이 있는데 플러터에서는 웹소켓을 이용하기 위해서 web_socket_channel 과 같은 패키지를 이용하여 소켓통신을 하는것으로 알고있습니다 그런데 백엔드에서 소켓통신을 할때 스프링부트와 sockjs를 이용하여 소켓통신 서버를 구축하고 해당 채널을 구독하면 메세지를 보내는 구조로 구성해 나갈거라 말해줬습니다. 현재 소켓통신과 관련하여 아무것도 해본적이 없고 플러터에서 웹소켓통신을 하기위해 관련 강의만 몇개 찾아본게 전부라 현재 어떤방식으로 소켓통신이 이루어져야 하는지 감이 오질 않습니다. 1. 백엔드에서 sockjs를 이용하여 프론트엔드 플러터와 통신을 하려 하는데 가능한가요? 2. 가능하다면 어떤 패키지를 사용하여야 하나요? 3. end point를 websocket으로 구독하고 해당 채널에 이벤트를 통해 메시지를 전달해 준다고 하는데 프론트에서는 어떤 처리를 해줘야 하나요?? 아직 부트캠프를 진행중이며 해당 프로젝트의 핵심기능중 하나라 질문남겨봅니다. 프론트에서 어떤 처리를 해줘야 하고 백엔드에서는 각각 어떤 처리를 해야 하는지 궁금합니다.

리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}