React에서 StompJS를 이용한 웹소켓 통신

2021. 9. 27. 23:57서버 프로그래밍

Java 백엔드에서 Stomp로 구현된 웹소켓을 React에서 연동하기 위한 작업.

다음 포스팅은 전체 개념을 이해하는데 큰 도움이 되지만 중간중간 오타나 잘못된 코드가 있어서 혼동을 일으킨다.

https://velog.io/@cksal5911/WebSoket-stompJSReact-%EC%B1%84%ED%8C%85-1

 

WebSoket (stompJS+React) 채팅 - 1

이번에는 채팅은 어떻게 구현되는지, 어떤 기술이 사용되는지 함께 알아보도록 하겠습니다.🖐🏻 잠깐!스프링+리액트 조합의 채팅을 구현하는 포스팅 중 일부입니다. (stomp, soket.js)저는 프론트

velog.io

StompJS를 import 하는 방법은 다음과 같이 해야 한다.

import * as StompJs from '@stomp/stompjs';

https://github.com/stomp-js/stompjs/issues/24

 

Browser: Provide a way to use stompjs from TypeScript without modules · Issue #24 · stomp-js/stompjs

See: #24 (comment) for a workaround My situation is this: I want to avoid stuff like webpack and so on, instead, I have this in my :

 

SockJS 설치는 다음과 같이 하면 된다. (이것을 오타내서 한참 헤메게 만듦)

npm install sockjs-client --save

https://stomp-js.github.io/guide/stompjs/rx-stomp/ng2-stompjs/using-stomp-with-sockjs.html

 

Using STOMP with SockJS

This guide covers how to use SockJS client instead of WebSockets as underlying transport.

stomp-js.github.io

수신된 메시지는 IMessage 타입으로 받아서 처리하면 된다.

https://stomp-js.github.io/api-docs/latest/interfaces/IMessage.html

 

stompjs@6.1.2, rx-stomp@1.1.4

File Description Instance of Message will be passed to subscription callback and Client#onUnhandledMessage. Since it is an extended FrameImpl, you can access headers and body as properties. Part of @stomp/stompjs. See Client#subscribe for example. Extends

stomp-js.github.io

 

기타 참고 자료 :

React의 typescript를 지원하지 않는 라이브러리의 경우 다음과 같은 조치를 하면 처리가 가능하긴 하다.

I've had a same problem with react-redux types. The simplest solution was add to tsconfig.json:

"noImplicitAny": false

https://stackoverflow.com/questions/41462729/typescript-react-could-not-find-a-declaration-file-for-module-react-material

 

Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an

I am trying to import components from react-materialize as - import {Navbar, NavItem} from 'react-materialize'; But when the webpack is compiling my .tsx it throws an error for the above as - ERRO...

stackoverflow.com

 

https://github.com/sockjs/sockjs-client

 

GitHub - sockjs/sockjs-client: WebSocket emulation - Javascript client

WebSocket emulation - Javascript client. Contribute to sockjs/sockjs-client development by creating an account on GitHub.

github.com

https://www.npmjs.com/package/sockjs-client

 

sockjs-client

SockJS-client is a browser JavaScript library that provides a WebSocket-like object.

www.npmjs.com

https://github.com/zcmgyu/websocket-spring-react/blob/master/websocket-react/src/NotificationForm.js

 

GitHub - zcmgyu/websocket-spring-react: Sample about Websocket using React and Spring Boot Oauth2 to send a notification between

Sample about Websocket using React and Spring Boot Oauth2 to send a notification between user. - GitHub - zcmgyu/websocket-spring-react: Sample about Websocket using React and Spring Boot Oauth2 to...

github.com