🔔 #1.6~1.9
1. 채팅 완성하기
서버와 클라이어트 간에 서로 연결이 됐으니, 서로 메세지를 주고 받는 것을 구현하기
먼저 home.pug에서 메세지를 담을 수 있는 input 과 send button 만들기
>> home.pug 코드 수정
# home.pug
doctype html
html(lang="ko")
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 Zoom
link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
body
header
h1 Zoom!
main
form#nick
input(type="text", placeholder="닉네임을 입력하세요.", required)
button save
ul --> 메세지 리스트
form#message
input(type="text", placeholder="메세지를 입력하세요.", required)
button Send
script(src="/public/js/app.js")
- id = # / class = .
- required 속성 = 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시
send button 을 눌렀을 때 발생하는 이벤트를 처리해주기 위해 app.js 코드 수정 또는 추가해주기
= > home.pug<보여지는 페이지> 에서 app.js<클라이언트> 를 통해 server.js<서버> 로 데이터가 전달되는 방식
>> app.js 코드 수정
서버로 보내는 메세지는 반드시 str 형태여야 하는데
어떤 메세지가 닉네임이고, 채팅인지 구분을 못한다
구분을 해주기 위해서 JSON 형태를 사용하는건데,
JSON 을 str 으로 변환해주는 함수를 만들어준다 => JSON.stringify(msg)
# app.js
const messageList = document.querySelector('ul');
const nickForm = document.querySelector("#nick");
const messageForm = document.querySelector("#message");
function makeMessage(type, payload) {
const msg = { type, payload };
return JSON.stringify(msg);
}
socket.addEventListener("message", (message) => {
const li = document.createElement('li'); # 새로운 메세지를 받으면 새로운 li 생성
li.innerText = message.data; # message.data 를 li 안에 넣어주기
messageList.append(li);
});
# send button 을 눌렀을 때 발생하는 이벤트인 submit를 처리하기 위한 이벤트리스너도 만들기 위해
# handleSubmit 함수를 만들어 이벤트 처리하기
function handleSubmit(event){
# 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정
event.preventDefault();
# messageForm에서 input 찾아오기
const input = messageForm.querySelector('input');
# 메세지의 내용이 될 input.value 출력
socket.send(makeMessage("new_message", i nput.value));
const li = document.createElement('li');
li.innerText = `You : ${input.value}`;
messageList.append(li);
input.value = "";
}
function handleNickSubmit(event) {
event.preventDefault();
const input = nickForm.querySelector('input');
socket.send(makeMessage("nickname", input.value));
input.value = "";
}
messageForm.addEventListener("submit", handleSubmit);
nickForm.addEventListener("submit", handleNickSubmit);
preventDefault() = 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.
>> server.js 코드 수정
내가 보낸 채팅이 모든 사람에게 보여질 수 있어야 하기에 sokets 배열을 만들어 연결된 모든 소켓을 배열에 넣고,
배열 내의 모든 브라우저에 메세지를 뿌릴 수 있도록 해야함
또 서버에서 받아온 str 형태의 메세지를 JSON 형태로 바꾸고 키값에 따라 다르게 동작해주기 위해
swith 를 이용해 구현하기 (if/ else if 도 가능)
const sockets = []; # 어느 브라우저에서 연결했는지 알기위함
wss.on("connection", (socket) => { # 여기의 socket의 매개변수는 새로운 브라우저를 뜻함 // wss = 전체서버/soket = 하나의 연결이라 생각
sockets.push(socket); # 브라우저가 연결되면 sokets 배열에 넣음
socket['nickname'] = '';
console.log("Connected to Browser ✅");
socket.on("close", onSocketClose); # 서버 끄면 작동
socket.on("message", (msg) => {
const message = JSON.parse(msg.toString("utf8"));
switch(message.type) {
case 'new_message' :
sockets.forEach((aSocket) =>
aSocket.send(`${socket.nickname}: ${message.payload}`));
case 'nickname' :
socket['nickname'] = message.payload;
}
});
});
socket.on("message", (msg) => {
const message = JSON.parse(msg.toString("utf8"));
if(message.type === 'new_message') {
sockets.forEach((aSocket) => aSocket.send(`${socket.nickname}: ${message.payload}`));
} else if (message.type === 'nickname') {
socket['nickname'] = message.payload;
'FrameWork > Express.js' 카테고리의 다른 글
5 . 노마드코더 zoom 클론 - 방이름띄우기/방 사람수/admin panel (0) | 2023.02.05 |
---|---|
4 . 노마드코더 zoom 클론 - 방만들기/알림/메세지/닉네임 (0) | 2023.02.05 |
3 . 노마드코더 zoom 클론 - socket IO (0) | 2023.01.15 |
1 . 노마드코드 zoom클론코딩 - 환경설정/webSocket으로 클라이언트-서버 연결 (0) | 2023.01.15 |