[2] WebSocket 통신 - 메세지 및 이벤트

Express로  App 생성

 

import express from "express";
const app = express();

 

App 기본 설정 (Server.js) - HTTP 방식

 

/* HTTP 방식 */
// views에 있는 pug 템플릿 보여줌
app.set("view engine","pug");
app.set("views", __dirname + "/views");

// root 경로로 들어가면 home을 보여줌 (-> ./views/home.pug)
app.get("/", (req, res)=> res.render("home"));

// public 경로로 들어가면 public 하위 경로의 JS 실행 (static으로 설정해야 보임)
app.use("/public", express.static(__dirname + "/public"));

// 전부 Home으로 돌려보내기
app.get("/*", (req, res) => res.redirect("/"));

const handleListen = () => console.log(`Listening on http://localhost:3000`);

// 3000 포트, 접속시 handleListen 실행 
app.listen(3000, handleListen);

• app.set() : view 엔진 설정 (FE 부분)
• app.get() : 해당 경로 템플릿 처리, 리다이렉트
• app.use() : 해당 경로 이벤트 처리

 

 

App 기본 설정 - WebSocket 추가 및 사용 (Server.js)

 

/* WS 방식 */

// http 서버 및 WS 생성 -> http 서버 위에서 webSocket 서버 생성 (개발의 효율성을 위함 이렇게 할 필요까지 없음)
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// socket -> 연결된(접속) 사람의 정보 담김 
function handleConnection(socket) {
    console.log("Connected to Browser!");
    socket.send("Hello, This is Server !");

    // Server Side 알림 (Browser에서 보낸 정보 / WS 연결 정보 등)
    socket.on("message", (message) => {console.log(message.toString("utf8"));}); // Browser로부터 받은 message 출력 (utf8 설정)
    socket.on("close", () => {console.log("Disconnected from the Browser");});
}

// http 접속 -> connection event 발생 -> ws으로 넘어감
wss.on("connection", handleConnection);

server.listen(3000, handleListen);

 

 

App 기본 설정 - WebSocket 메세지 사용 (App.js)

 

// http(X) ws(O) || window.location.host == localhost:3000 (server.js에 설정한 포트)

const socket = new WebSocket(`ws://${window.location.host}`);

/*
 socket.send() 한거 FE에서 받기
 1. socket 열기
 2. message 열기
 3. Disconnect 감지 
*/
socket.addEventListener("open", () => {
    console.log("Connected to Server!");
});

socket.addEventListener("message", (message) => {
    console.log("New Message : ", message.data);
});

socket.addEventListener("close", () => {
    console.log("DisConnected From Server ㅠㅠ ");
});

// 3초 뒤 메세지 전송 
setTimeout(() => {
    socket.send("hello From the Browser");
}, 3000);

 

 

[결과]

- 브라우저 콘솔창

- 서버 콘솔창