채팅 이외에도 userId 2가 데이터가 좀 많아서 테스트하기 좋을 거 같아요!

1. 달력 페이지 구성하는 정보 조회 api

   챌린지 정보 조회 (달력 페이지)

   

   • 챌린지 관련 변수(채팅 제외한 화면 구성) : title, startDate, endDate, successRate

   • chattingRoomId: 채팅 보내는데 사용할 채팅룸 id

   • chattingList : 채팅 내역

   • 이전 채팅 기록이 없는 경우

   • 이전 채팅 기록이 같이 반환 되는 경우

2. 채팅 메시지 보내기 api

   채팅 보내기

   {
   	"type" :"TALK",
   	"roomId":8,
   	"userId":2,
   	"nickName":"minsu",
   	"message":"오늘도 다들 팟팅해요!",
   	"time":""
   }
   

프론트

Using STOMP

SockJS로 브라우저에 연결하기 위해 sockjs-client를 이용할 수 있다. STOMP에 있어 많은 어플리케이션들은 jmesnil/stomp-websocket( stomp.js 로 알려진 )라이브러리를 사용해왔지만, 더이상 유지되지 않는다. 최근에는 JSteunou/webstomp-client를 많이 사용한다.

밑에 코드는 참고했던 블로그에서 가져온거로 전달해야하는 json은 위에 제가 쓴거 참고해 주세여!

var websocket = new WebSocket("/ws/chat");
var stomp = webstomp.over(websocket);

stomp.connect({}, function(frame) {
}

<script th:inline="javascript">
    $(document).ready(function () {

        var roomName = [[${room.name}]];
        var roomId = [[${room.roomId}]];
        var username = [[${#authentication.principal.username}]];

        console.log(roomName + ", " + roomId + ", " + username);

        ***var websocket = new WebSocket("ws://3.35.3.205:8080/ws");
        var stomp = Stomp.over(websocket);***

        ***stomp.connect***({}, function () {
            console.log("STOMP Connection");

            ***stomp.subscribe("/sub/chat/room/" + roomId, function (chat)*** {
                var content = JSON.parse(chat.body);

                var writer = content.writer;
                var message = content.message;
                var str = '';

                if (writer === username) {
                    str = "<div class='col-6'>";
                    str += "<div class='alert alert-secondary'>";
                    str += "<b>" + writer + " : " + message + "</b>";
                    str += "</div></div>";
                    $("#msgArea").append(str);
                } else {
                    str = "<div class='col-6'>";
                    str += "<div class='alert alert-warning'>";
                    str += "<b>" + writer + " : " + message + "</b>";
                    str += "</div></div>";
                    $("#msgArea").append(str);
                }
            });

            $("#button-send").on("click", function (e) {
                var msg = document.getElementById("msg");

                console.log(username + ":" + msg.value);
                ***stomp.send('/pub/sendMessage', {}, JSON.stringify({roomId: roomId, message: msg.value, writer: username}));***
                msg.value = '';
            });
        });
    });
</script>

import React, { useEffect, useState } from 'react';
import socketIOClient from 'socket.io-client';

const ChatComponent = () => {
  const [roomName, setRoomName] = useState('');
  const [roomId, setRoomId] = useState('');
  const [username, setUsername] = useState('');
  const [messages, setMessages] = useState([]);
  const [messageInput, setMessageInput] = useState('');

  useEffect(() => {
    const roomNameFromServer = /* 서버에서 가져오는 코드 */;
    const roomIdFromServer = /* 서버에서 가져오는 코드 */;
    const usernameFromServer = /* 서버에서 가져오는 코드 */;

    setRoomName(roomNameFromServer);
    setRoomId(roomIdFromServer);
    setUsername(usernameFromServer);

    const websocket = socketIOClient('<http://3.35.3.205:8080>');

    websocket.on('connect', () => {
      console.log('WebSocket Connection');

      websocket.on(`chat.room.${roomIdFromServer}`, (content) => {
        const parsedContent = JSON.parse(content);

        setMessages((prevMessages) => [
          ...prevMessages,
          {
            writer: parsedContent.writer,
            message: parsedContent.message,
          },
        ]);
      });
    });

    return () => {
      // Clean up WebSocket connection on component unmount
      websocket.disconnect();
    };
  }, []); // Empty dependency array means this effect runs once on mount

  const sendMessage = () => {
    if (messageInput.trim() !== '') {
      websocket.emit('send.message', {
        roomId: roomId,
        message: messageInput,
        writer: username,
      });
      setMessageInput('');
    }
  };

  return (
    <div>
      {/* Render your chat messages here using the messages state */}
      {messages.map((message, index) => (
        <div key={index} className="col-6">
          <div className={`alert ${message.writer === username ? 'alert-secondary' : 'alert-warning'}`}>
            <b>{`${message.writer} : ${message.message}`}</b>
          </div>
        </div>
      ))}

      {/* Input field and button for sending messages */}
      <input
        type="text"
        id="msg"
        value={messageInput}
        onChange={(e) => setMessageInput(e.target.value)}
      />
      <button onClick={sendMessage} id="button-send">
        Send
      </button>
    </div>
  );
};

export default ChatComponent;