websocket관련 에러 질문드립니다!


  • Level 6

    안녕하세요! 프론트는 리액트 백은 nest로 개발중인데요 socket.io사용해서 웹소켓 사용하는 부분에서 에러가 나서 질문드립니다. 노드 버전은 14, socket.io버전은 2 입니다. 현재 localhost:3090으로 프록시 서버 사용중입니다.
    vendors-node_modules_gravatar_index_js-node_modules_react-toastify_dist_react-toastify_esm_js-c635b6.js:3135 WebSocket connection to 'ws://localhost/socket.io/?EIO=3&transport=websocket' failed:

    import io from 'socket.io-client';
    import { useCallback } from 'react';
    	
    const backUrl = "http://localhost/3095";
    
    const sockets: { [Key: string]: SocketIOClient.Socket } = {};
    const useSocket = (workspace?: string): [SocketIOClient.Socket | undefined, () => void] => {
    	console.log('rerender', workspace);
    	
    	const disconnect = useCallback(() => {
    		if (workspace) {
    			sockets[workspace].disconnect();
    			delete sockets[workspace];
    		}
    	}, [workspace]);
    	
    	if (!workspace) {
    		return [undefined, disconnect];
    	}
    	if (!sockets[workspace]) {
    		sockets[workspace] = io.connect(`${backUrl}/ws-${workspace}`, {
    		transports: ['websocket'],
    		});
    	}
    	
    	return [sockets[workspace], disconnect];
    };
    
    export default useSocket;
    
  • Level 5

    @스테판짜장

    안녕하세요.

    해당 문제는 const backUrl = "http://localhost/3095"; 부분에 잘못된 주소가 들어가 발생하는 문제로 보입니다. 2개 이상의 포트를 사용하는 경우, 도움말을 참고하여 도메인을 각각 지정하여 주시고, const backUrl = "https://지정한 Backend 도메인.run.goorm.io"; 형태로 변경하여 연결해보시기 바랍니다.

  • Level 6

    @스테판짜장 프론트는 alecture, 백은 back 폴더입니다..

  • Level 6

    https://goor.me/tNbH2
    혹시 워크스페이스 들어와서 봐주실 수 있을까요?

  • Level 6

    @스테판짜장 Mixed Content: The page at 'https://ffffront.run.goorm.io/workspace/sleact/channel/일반' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://0.0.0.0:3095/socket.io/?EIO=3&transport=websocket'. This request has been blocked; this endpoint must be available over WSS.

  • Level 6

    WebSocket connection to 'wss://0.0.0.0:3095/socket.io/?EIO=3&transport=websocket' failed: Error in connection establishment: net::ERR_ADDRESS_INVALID 이라고 뜨는것 같습니다ㅠㅠ

  • Level 12

    @스테판짜장

    같은 컨테이너에서 백엔드와 프론트엔드를 구현했다면 CORS 에러가 나지는 않을 것 같습니다.
    혹시 0.0.0.0으로 바꾸었을 때도 같은 에러 메시지가 출력되나요?

  • Level 6

    @배명호-goorm
    그래도 여전히 문제가 발생합니다ㅠ 현재 로컬호스트 3095를 백엔드서버로 3090을 프론트엔드로 지정한 상태에서 프록시서버를 써서 cors에러를 피하고 있는 상황입니다.

  • Level 12

    안녕하세요. 스테판짜장님.

    backUrl에 localhost를 작성해주셨는데요, 구름IDE는 로컬 PC 환경과 달리 클라우드 컨테이너 환경에서 코드를 실행시키기 때문에 localhost가 아닌 0.0.0.0 이라는 주소를 사용해 클라우드 컨테이너 환경과 연결을 해야 합니다.

    0.0.0.0 으로 수정해도 같은 오류가 발생한다면, 3095 포트로 서버가 실행 중인지 확인해 보시길 바랍니다.

ONLINE USERS

POPULAR TOPICS

SUGGESTED TOPICS