Node js 웹소켓(WebSocket)으로 서버-클라이언트 메시지 주고받기 예시

Node js (server)

import http from "http";
import WebSocket from "ws";
import express from "express";

const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));

app.get("/", (req, res) => {
    res.render("home");
});

app.get("*", (req, res) => {
    res.redirect("/");
});

const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on("connection", (socket) => {
    console.log("클라이언트가 연결되었음.");
    
    // 이벤트
    socket.on("close", () =>{
        console.log("클라이언트가 나갔음 ㅠㅠ.");
    });

    socket.on("message", (message) => {
        console.log("클라이언트로 부터의 메시지 : " + message);
    });

    socket.send('서버에서 보내보는 테스트 메시지');
});

server.listen(3000, () => {
    console.log(`Listening on http://localhost`);
});

javascript (client)

const messageList = document.querySelector("ul");
const messageForm = document.querySelector("form");

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

// 이벤트
socket.addEventListener("open", () => {
    console.log("서버에 연결되었음.");
});

socket.addEventListener("message", (message) => {
    console.log("서버로 부터의 메시지 : ", message);
});

socket.addEventListener("close", () => {
    console.log("서버가 종료됨.")
});

setTimeout(() => {
    socket.send("클라이언트에서 보내보는 테스트 메시지");
}, 1000);

messageForm.addEventListener("submit", (event) => {
    event.preventDefault();
    const input = messageForm.querySelector('input');
    // input의 데이터를 submit 했을 때, 서버로 메시지 전송
    socket.send(input.value);
});

 

Full Sample code

https://github.com/Seokhyeon-Park/node-clone-v2

 

결과