지긋지긋해 WebSocket connection 에러가 뭘까아아아

 

WebSocket connection to 'ws://URL' failed:

 

 

import React, { useEffect, useRef, useState } from "react";
import io from "socket.io-client";
import Peer from "peerjs";
import Webcam from "react-webcam";

const App = () => {
  const [myPeerId, setMyPeerId] = useState("");
  const [partnerPeerId, setPartnerPeerId] = useState("");
  const webcamRef = useRef(null);
  const peerRef = useRef(null);
  const partnerVideoRef = useRef(null);

  useEffect(() => {
    const socket = io("http://localhost:5050/"); // 서버 주소에 맞게 변경
    const peer = new Peer(undefined, {
      host: "localhost", // Peer 서버의 호스트에 맞게 변경
      port: 5050, // Peer 서버의 포트에 맞게 변경
      path: "/peerjs",
    });
    peerRef.current = peer;

    peer.on("open", (id) => {
      console.log("내 Peer ID:", id);
      setMyPeerId(id);
    });

    socket.on("partner-peer-id", (id) => {
      console.log("상대방 Peer ID:", id);
      setPartnerPeerId(id);
    });

    peer.on("call", (call) => {
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: true })
        .then((stream) => {
          call.answer(stream);
          call.on("stream", (remoteStream) => {
            partnerVideoRef.current.srcObject = remoteStream;
          });
        });
    });

    return () => {
      socket.disconnect();
      peer.destroy();
    };
  }, []);

  const handleCall = () => {
    navigator.mediaDevices
      .getUserMedia({ video: true, audio: true })
      .then((stream) => {
        const call = peerRef.current.call(partnerPeerId, stream);
        call.on("stream", (remoteStream) => {
          partnerVideoRef.current.srcObject = remoteStream;
        });
      });
  };

  return (
    <div>
      <h1>영상 통화 앱</h1>
      <div>
        <h3>내 Peer ID: {myPeerId}</h3>
        <input
          type="text"
          placeholder="상대방 Peer ID 입력"
          value={partnerPeerId}
          onChange={(e) => setPartnerPeerId(e.target.value)}
        />
        <button onClick={handleCall} disabled={!partnerPeerId}>
          영상 통화 시작
        </button>
      </div>
      <div>
        <Webcam audio={false} ref={webcamRef} />

        <h3>상대방 영상</h3>
        <video ref={partnerVideoRef} autoPlay />
      </div>
    </div>
  );
};

export default App;