이번에는 메세지를 입력해서 상대방에게 보내도록 하겠습니다. app.js먼저 form 에 메세지를 입력하고 버튼을 클릭하면 messageSubmit 메서드를 통해"send_message" 이벤트가 발생하도록 합니다.이때, 입력된 메세지(input.value) 와 현재 채팅방의 이름(currentRoom) 을 함께 서버로 전송합니다....function messageSubmit(event) { event.preventDefault(); const input = document.getElementById("messageText"); socket.emit("send_message", input.value, currentRoom); input.value = "";}...form.addEventListene..

이번에는 채팅방 나가는 기능과 접속과 나갈때 알림 메세지를 보내도록 하겠습니다. 채팅방 나가기 먼저 home.html 페이지에 채팅방 상태에서 나갈 수 있도록 나가기 버튼을 추가합니다. Chatting Web Page Welcome 방 만들기 생성 취소 나가기 전송 app.js 다음으로 나가기 버튼을 눌렀을때 발생시킬 이벤트를 버튼에 연결하고 채팅방에 메세지를 띄워주는 addMessage 메서드를 작성합니다. const socket = io(); const form = document.getElementById("textSend"); const room = document.getElementById("room"); const roomList = document.getElementById("roomList..

앞에서 채팅방을 생성하는 기능을 만들었습니다. 마지막으로 채팅방의 이름이 기존에 존재하는 이름일 경우 채팅방을 생성하지 않고 존재하지 않을 경우에만 생성하도록 하겠습니다. 시작 클라이언트 다음과 같이 app.js 파일을 수정합니다. const roomName = document.getElementById("roomNameText"); function makeRoom(check) { if (check == false) { // 동일한 이름의 채팅방이 있을 경우 alert("채팅방이 존재합니다."); roomName.value = ""; } else { const li = document.createElement("li"); li.textContent = roomName.value; roomList.appe..

서버에 연결된 socket 을 join 메서드를 통해 room 에 연결을 해서 채팅방에 접속을 했습니다. 이번에는 클라이언트가 서버와 socket 을 통해 연결이 되면 서버에 저장된 채팅방의 목록을 가져와 브라우저에 그려주고 채팅방을 모달창을 통해 생성하도록 하겠습니다. 채팅방 목록 랜더링 먼저 home.html 파일을 다음과 같이 수정합니다. Chatting Web Page Welcome Room 1 Room 2 방 만들기 생성 취소 전송 다음으로 css 파일을 생성합니다. #modal { position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height:..

이번에는 클라이언트에서 채팅방을 만들고 선택해서 해당 채팅방으로 접속할 수 있는 기능을 개발하겠습니다. 시작 먼저 home.html 페이지에 채팅방 리스트를 보여줍니다. 지금은 임의로 room 1 과 room 2 채팅방을 li 태그로 만들어두었습니다. Chatting Web Page Welcome Room 1 Room 2 전송 다음으로 채팅방 이름을 클릭하면 해당 채팅방의 이름이 서버로 전송되도록 app.js 파일을 수정하겠습니다. const socket = io(); const form = document.querySelector("form"); const roomList = document.getElementById("roomList"); function messageSubmit(event) { ev..

이번에는 앞에서 만든 express 서버를 socket.io 라이브러리를 사용해서 웹소켓을 사용해 통신하겠습니다. 시작 먼저 socket.io 모듈을 다운받습니다. PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web> npm i socket.io 다음으로 server.js 파일 안에 httpServer 와 socketServer 를 각각 만들어줍니다. import express from "express"; import http from "http"; import SocketIO from "socket.io"; const app = express(); const httpServer = http.createServer(app); const socketSer..

이번에는 express 모듈을 통해 만든 서버에 접속하면 html 페이지를 보여주도록 하겠습니다. 시작 프로젝트 폴더에 html 페이지를 관리하는 views 와 script 파일을 관리하는 js 라는 폴더를 만들었습니다. views 폴더에 home.html 파일을 생성하고 다음과 같이 작성합니다. Chatting Web Page Welcome 실행 localhost:3000 에 재접속하면 script 의 alert 명령어가 실행되는것을 확인할 수 있습니다.