15일차

오늘은 스트리밍 시작/종료 버튼을 눌렀을 떄 다른 사용자들에게도 영향을 주도록 설정.

 

어제 했던 채팅창 동결 기능을 응용해서 재사용.

 

WebCam.js

//WebCam.js

	// 중략...
    
    const [stompClient, setStompClient] = useState(null);
    const [connected, setConnected] = useState(false);
    
    //중략..
    
        // 스트리밍 시작 버튼 활성화/비활성화 다른 사용자들에게 공유 시키기
    useEffect(() => {
        const socket = new SockJS('http://localhost:9001/ws'); // java 쪽의 서버포트 설정과 맞춰서 작성
        const client = new Client({
            webSocketFactory: () => socket,
            connectHeaders: {},
            debug: function (str) {
                console.log('STOMP Debug:', str);
            },
            onConnect: function (frame) {
                console.log('STOMP Connected:', frame);
                setConnected(true);
                client.subscribe('/topic/streaming', (response) => {
                    console.log(webCamView);
                    setWebCamView(JSON.parse(response.body));
                });
            },
            onStompError: function (frame) {
                console.error('STOMP Error:', frame);
            },
            onWebSocketError: function (error) {
                console.error('웹소켓 에러:', error);
            }
        });

        client.activate();
        setStompClient(client);

        return () => {
            if (client) {
                client.deactivate();
            }
        };
    }, [webCamView]);

    useEffect(() => {
        getCamera();
    }, [webCamView]);
    
    
    // 중략...
    
    
    //스트리밍 시작 버튼 모든 사용자들에게 뿌리기
    const handleBeginStreaming = () => {
        if (stompClient) {
            stompClient.publish({
                destination: '/app/chat.streaming'
            });
            stompClient.subscribe('/topic/streaming', (response) => {
                const newStreamingState = JSON.parse(response.body);
                setWebCamView(newStreamingState);
            });
        }
    }
    
    // 중략...

 

ChatController에 다음 구문 추가

    //스트리밍 시작/종료 전환
    @MessageMapping("/chat.streaming")
    @SendTo("/topic/streaming")
    public boolean streamingBegin() {
    	streamingBegin = !streamingBegin;
        return streamingBegin;
    }
    
    //스트리밍 시작/종료 상태 가져오기
    @GetMapping("/chat/streaming")
    public boolean getBeginStreaming() {
    	return streamingBegin;
    }

 

 

다음은 로그인 세션을 받아 memberId가 채팅창에 표시되도록 하기

 

팀원이 제작한 로그인 기능을 받아와서 구현.

 

LiveChat.js에 다음 구문을 추가.

const LiveCHat = () => {

// 중략...

	const {loginMember, setLoginMember} = useContext(MyPageContext);

//중략...

    // 메시지 보내기
    const sendMessage = () => {
        if (stompClient && connected && message) {
            stompClient.publish({
                destination: '/app/chat.send', //java 쪽의 컨트롤러(@MessageMapping)와 맞춰서 작성
                body: JSON.stringify({ sender: loginMember.memberId, content: message })
            });
            setMessage('');
        } else if (!connected) {
        	console.error('연결이 안됩니다. 관리자에 문의하세요.');
        }
    };
    
    
// 중략...

 

메시지보내기에서 sender : "User" 라고 쓰여있던 부분을 sender : LoginMember.memberId 로 변경해 로그인 정보가 가지고 있는 사용자의 아이디를 불러오도록 설정.

 

다음은 웹 페이지 2개를 띄워놓고 서로 다른 아이디로 로그인한 후 시현

 

 

 

서로 채팅을 주고 받고 아이디가 다르게 보이는 것을 확인.

 

이제 채팅에 시간이 뜨도록 표시.

 

    const timeFormat = (date) => {
    return new Intl.DateTimeFormat('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      hour12: true
    }).format(date).toLowerCase();
    }
  
  //중략
  
    const sendMessage = () => {
    if (stompClient && connected && message) {
      const memberProfile = loginMember.memberProfile;
      
      const msgAt = timeFormat(new Date()); // 이 구문 추가
      
      stompClient.publish({
        destination: '/app/chat.send', //java 쪽의 컨트롤러(@MessageMapping)와 맞춰서 작성
        body: JSON.stringify({ 
          profile: memberProfile, 
          sender: loginMember.memberId, 
          content: message,
          time: msgAt
         })
      });
      setMessage('');
    }

 

수정의 흔적

 

 

const timeFormat = (date) => {
    return new Intl.DateTimeFormat('en-US', {
        hour: '2-digit',
        minute: '2-digit',
        hour12: true
    }).format(date).toLowerCase();
}

 

en-US : 미국식 시간으로 표시. -> pm 또는 am으로 표시됨. 만약 ko-KR 한국식으로 표시하면 '오후' 또는 '오전'으로 표시

됨

 

hour: '2-digit' : 시간을 2자리 숫자로 지정. ex) 9 -> 09시

minute: '2-digit' : 분을 2자리 숫자로 지정. ex) 5 -> 05분

hour12: true :

  - 12시간제를 사용 설정. 

  - true일 경우, AM 또는 PM으로 출력.

  - false일 경우 24시간제

 

Intl.DateTimeFormat(  'locales'  {options}   );

 

  - locales : 날짜와 시간 형식에 사용할 로케일을 지정. ex) en-US, ko-KR

  - options : 날짜와 시간의 형식을 정의. 형식의 세부사항 지정

 

format(date): 파라미터로 넘어온 date 객체를 지정한 형식으로 변환

 

 

오늘은 여기까지. 이제 수정해야할 것은 채팅 삭제 인덱스 맞추기, 로그인 정보에서 프로필 사진 가져와서 띄우기.