이번에는 클라이언트에서 채팅방을 만들고 선택해서 해당 채팅방으로 접속할 수 있는 기능을 개발하겠습니다.
시작
먼저 home.html 페이지에 채팅방 리스트를 보여줍니다.
지금은 임의로 room 1 과 room 2 채팅방을 li 태그로 만들어두었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chatting</title>
</head>
<body>
<header>Chatting Web Page</header>
<main>
<h2>Welcome</h2>
<div id="room">
<ul id="roomList">
<li>Room 1</li>
<li>Room 2</li>
</ul>
</div>
<form>
<input type="text" placeholder="메세지를 입력해주세요." , required />
<button type="submit">전송</button>
</form>
</main>
</body>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</html>다음으로 채팅방 이름을 클릭하면 해당 채팅방의 이름이 서버로 전송되도록
app.js 파일을 수정하겠습니다.
const socket = io();
const form = document.querySelector("form");
const roomList = document.getElementById("roomList");
function messageSubmit(event) {
event.preventDefault();
const input = form.querySelector("input");
socket.emit("send_message", input.value);
input.value = "";
}
function enterRoom(event) {
socket.emit("enter_room", event.target.textContent);
}
form.addEventListener("submit", messageSubmit);
roomList.addEventListener("click", enterRoom);enterRoom 이라는 메서드를 생성하고 ul 태그에 이벤트 리스너를 연결했습니다.
채팅방은 동적으로 생성되고 삭제되기 때문에 이벤트 버블링을 사용하기 위해 상위 엘리먼트에 이벤트를 연결합니다.
다음으로 server.js 의 socketServer 부분을 아래와 같이 enter_room 이벤트를 생성합니다.
socketServer.on("connection", (socket) => {
socket.on("send_message", (message) => console.log(message));
socket.on("enter_room", (roomName) => {
console.log(roomName);
console.log(socket.id);
console.log(socket.rooms);
});
});enter_room 이벤트가 작동하면 터미널에는 다음과 같이 출력됩니다.
[nodemon] restarting due to changes...
[nodemon] starting `babel-node src/server.js`
Server Start
Room 1
YWE7gZ0mtvodHLJyAAAD
Set(1) { 'YWE7gZ0mtvodHLJyAAAD' }socket 의 속성은 다음과 같습니다.
- id : socket 을 구별하는 속성
- rooms : socket 이 현재 어떤 룸에 있는지 나타내는 속성, Set 에 저장이 되며 id 와 동일한 값은 프라이빗룸을 뜻함
출력을 하면 socket 의 id 와 rooms 가 출력이 되는데 rooms 은 Set 에 저장이 되며,
현재 socket 은 프라이빗룸 하나만 갖고 있는것을 확인할 수 있습니다.
우리는 클라이언트에서 클릭한 채팅방을 socket 이 접속하도록 하기 위해 join 메서드를 사용합니다.
socketServer.on("connection", (socket) => {
socket.on("send_message", (message) => console.log(message));
socket.on("enter_room", (roomName) => {
console.log(roomName);
console.log(socket.id);
console.log(socket.rooms);
console.log("join 메서드 실행");
socket.join(roomName);
console.log(socket.rooms);
});다음과 같이 join 메서드에 전달받은 roomName 을 인자로 넣어주면
해당 roomName 이 socket 의 rooms 에 추가되면서 해당 채팅방에 접속할 수 있습니다.
socket.join("방 이름") : socket 의 room 을 추가하는 메서드
[nodemon] restarting due to changes...
[nodemon] starting `babel-node src/server.js`
Server Start
Room 1
IoLGtR_zOPqRC0FcAAAB
Set(1) { 'IoLGtR_zOPqRC0FcAAAB' }
join 메서드 실행
Set(2) { 'IoLGtR_zOPqRC0FcAAAB', 'Room 1' }위와 같이 socket 의 rooms 에는 프라이빗룸과 클라이언트에서 클릭한 Room 1 이 추가되었습니다.
'Javascript' 카테고리의 다른 글
| chatting server - 채팅방 생성 및 접속(3) (0) | 2023.02.25 |
|---|---|
| chatting server - 채팅방 생성 및 접속(2) (0) | 2023.02.25 |
| chatting server - socket.io 연결 (0) | 2023.02.24 |
| chatting server - html 과 javascript, express 연동 (0) | 2023.02.24 |
| chatting server - 환경설정 (0) | 2023.02.24 |
