1. server.js 수정하기
(수정 전)
function handleConnection(socket){
console.log(socket)
}
wss.on("connection", handleConnection)
다음의 코드를 좀 더 직관적으로 수정하고 넘어가자
(수정 후)
wss.on("connection", (socket) => {
console.log(socket);
})
why?) handleConnection 함수를 먼저 선언한 다음 on 메서드에 인자로 전달하는 대신, 같은 역할을 하는 익명 함수를 만들어 on 메서드에 포함되는 형태로 변경했음.
→ connection 이벤트가 발생했을 때 소켓을 받는다는 걸 좀 더 직관적으로 표현할 수 있음.
2. socket이용하여 사용자에게 메시지 보내기
소켓을 이용하여 메시지를 보내보자.
server.js코드를 다음과 같이 수정하자.
(수정 후)
wss.on("connection", (socket) => {
// console.log(socket);
console.log("Connected to Browser");
socket.send("hello!!");
})
server.js 전체 코드
//console.log("hello");
import http from 'http';
import WebSocket from 'ws';
import express from 'express';
const app = express();
app.set("view engine", "pug");
//dirname은 Node.js기본 전역변수로, 현재 실행되는 폴더의 경로를 의미
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));
// '/'를 받으면 home으로 가게 설정
app.get("/", (req, res) => res.render("home"));
//만약홈이 아닌 다른 주소로 get요청을 보내더라도 홈으로 리다이렉션하게 예외처리함
app.get("/*", (req, res) => res.redirect("/"));
const handleListen = () => console.log("Listening on http://localhost:3000");
//app.listen(3000, handleListen);
const server = http.createServer(app);
const wss = new WebSocket.Server({server});
wss.on("connection", (socket) => {
// console.log(socket);
console.log("Connected to Browser");
socket.send("hello!!");
})
server.listen(8080,handleListen);
설명 : 브라우저가 사용자 역할을 함. 브라우저에게 "hello!!"를 보낼 예정.
socket은 send 메서드를 통해 메시지를 보낼 수 있음.
→ server.js는 서버쪽 코드니까 서버가 사용자에게 메시지를 보낼 것을 예상할 수 있다.
3. app.js 수정하기
서버에서 메시지를 보냈으니 이를 확인할 수 있게 프론트 앤드 코드를 추가해야한다.
3-1) app.js코드를 다음과 같이 수정하자. (설명은 주석 참고)
const socket = new WebSocket(`ws://${window.location.host}`);
//연결되었을 때
socket.addEventListener("open", () => {
console.log("Connected to Server");
})
//메시지가 전달되었을 때
socket.addEventListener("message", (message) => {
console.log("Just got this:", message, "from the server");
})
//서버가 오프라인 되었을 때
socket.addEventListener("close", () => {
console.log("Disconnected from Server");
})
<결과화면>
실행되었을 때, 의도한 대로 콘솔에 메시지가 잘 출력됨을 확인할 수 있다.
3-2) 추가로 MessageEvent부분이 너무 더러우니 메시지 내용만 확인할 수 있도록 app.js의 다음 부분을 아래와 같이 수정
//메시지가 전달되었을 때
socket.addEventListener("message", (message) => {
console.log("Just got this:", message.data, "from the server");
})
<결과화면>
hello 메시지 데이터만 따로 뽑아 정리되어 출력됨을 확인할 수 있다.
3-3) 서버 종료해보기
터미널에서 Ctrl + C를 눌러 서버를 종료하면 Disconnect가 콘솔에 잘 출력된다.
터미널 참고
<결과화면>
disconnect메시지 확인 가능하다.
4. 서버 쪽 close 이벤트 처리하기
프론트쪽에서 addEventListener를 이용해 이벤트처리 해주는 것처럼, 서버에서도 비슷한 작업이 필요함.
메시지는 서버가 사용자에게 일방적으로 전달하는 것이 아니라 서로 주고받을 수 있어야 함.
server.js를 수정해보자
wss.on("connection", (socket) => {
// console.log(socket);
console.log("Connected to Browser");
socket.on("close", () => console.log("Disconnected from Browser"));
socket.send("hello!!");
})
여기서도 close 이벤트를 처리하고 있다. 프론트와의 차이점은 서버쪽에서는 브라우저가 종료되었을 때가 close라는 점!
<결과화면>
실제로 localhost 브라우저를 종료하면 터미널에 다음과 같은 메시지가 뜬다.
프론트와 서버측의 close차이점을 반드시 이해하자.
5. 사용자→ 서버 메시지 보내기
5-1) app.js 코드에 다음 코드를 추가하여 메시지가 잘 보내지는지 확인해보자.
setTimeout(() => {
socket.send("hello from browser!");
}, 5000);
설명 : 5000밀리초 = 5초 / setTimeout 메서드를 이용해 브라우저를 열면 5초 뒤에 서버에게 메시지를 보내게 될 것.\
5-2) server.js 코드 수정하기
메시지가 보내졌을 때의 이벤트처리 함수를 추가.
wss.on("connection", (socket) => {
// console.log(socket);
console.log("Connected to Browser");
//브라우저가 종료되었을 때를 의미하는 close
socket.on("close", () => console.log("Disconnected from Browser"));
//메시지가 보내졌을때, 콘솔에 그 내용을 출력
socket.on("message", (message) => {
console.log(`${message}`)
});
socket.send("hello!!");
})
실제로 브라우저가 켜진 후 5초 후에 터미널에 다음과 같은 메시지가 출력됨을 확인
잘 전해진다.
