[프론트엔드] 나와 대화하기, 유저 대화 카톡창

 

프로젝트 진행 기간 : 1일

개발 툴 : Visual Studio Code

프론트엔드 : HTML, CSS, Javascript

백엔드 : Node.js와 Express

실시간 통신 : webSocket

서버 환경 : Tomcat -> JSP 실행 / 서비스 호스팅

데이터 베이스 : MySQL

 

 

• 프론트엔드: Visual Studio Code를 사용하여 HTML, CSS, JavaScript로 구현
• 백엔드: Node.js와 Express를 사용하여 서버 구현
• 웹소켓: WebSocket을 사용하여 실시간 통신 구현
• 데이터베이스: MySQL을 사용하여 채팅 메시지 저장 및 관리
• 서버 환경: 톰캣을 사용하여 JSP 페이지 실행 및 서비스 호스팅

 

 

기본 창

- 입력 창 비어져있으면 버튼 비활성화

- 입력 창에 무언가 입력하면 버튼 활성화

 

 

메세지 전송 결과

 

2번째 메세지 삭제 결과

 

- 프로젝트 파일

chating.zip

0.11MB

---

 

 

카톡방 기능 

 

- Nodejs, websocket (tomcat)로 mysql 데이터베이스와 연동하여

user 기능 추가

 

websocket.zip

2.28MB

 

 

js 코드 첨부

let num = 0;
var myID ="";

url = "ws://192.168.22.51:55000";
socket = new WebSocket(url);

socket.onopen = function() {
    console.log("open");
}
socket.onmessage = function(e) {
    var msgData = e.data.split(":");
    console.log("보낸사람 : ", msgData[0], ", 메세지 : ", msgData[1]);
    sendText(msgData[0], msgData[1]);
    fetch("http://localhost:8080/websocket/dataadd.jsp?userid=" + myID +
        "&message=" + msgData[1]);
}
socket.onclose = function(e) {
    console.log("closed");
}
function inputChatData(data) {
    console.log(data);
    for (var index=0; index < data.length; index++) {
        var userid = data.data[index].userid;  // 저장된 메시지의 보낸 사람 ID
        var message = data.data[index].message;  // 저장된 메시지 내용
        console.log(userid, message);
        sendText(userid, message); // 저장된 메시지 출력
    }
    console.log("이전 대화 불러오기 완료");
}

$(function() {
    fetch("http://localhost:8080/websocket/dataread.jsp")
    .then(response => response.json())
    .then(json => inputChatData(json))

    // userid 입력
    $("#idButton").on("click", function() {
        myID = $("#name").val();
    });

    // 클릭이나 엔터 이벤트
    textBox = $("#inputText");
    $("#enterButton").on('click', function() {
        // sendText(myID, textBox.val());
        socket.send(myID + ":" + $("#inputText").val());
        $("#inputText").val('');
        
    });
    $("#inputText").on("keypress", function(key) {
        if (key.which == 13) {
            socket.send(myID + ":" + $("#inputText").val());
            // sendText(myID, textBox.val());
            $("#inputText").val('');
        }
    });

    // 버튼 색상 활성화
    $("#inputText").on("input", function() {
        $("#enterButton").attr("class","turnOn"); 
    });
});

function sendText(currentID, message) {
    if (!message == "") {
        $("#enterButton").attr("class", "button"); // 버튼 꺼짐
        

        var myMsg = currentID + ": " + message;
        var messageClass = currentID === myID ? "text1" : "text2"; // 보낸 메시지와 받은 메시지를 구분
        $("#content").append("<div class='" + messageClass + "' id='text_" + num + "'>"
            + "<span>" + myMsg + "</span>"
            + "<img src='x.png' class='delete' onclick='delText(" + num + ")'>"
            + "</div>");
        
        num++;
    } else {
        // console.log("입력 값 없음");
    }
}


function delText(idx) {
    $("#text_" + idx).remove();
}