[Node.js] 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket)

안녕하세요 Foma 입니다.

 

오늘은 Node.js에서 Websocket을 이용하여 실시간 서버를 구현해 보려고 합니다.

 

바로 시작할게요~

 

(백엔드 서버를 초기화 하는 방법은 생략하고 진행합니다. 혹시 모르시는 분들은 여기 에서 확인해 주세요!)

 

---

Tutorial

 

• 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket)
• 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with websocket)

---

Install

 

express

 

간단하게 서버를 만들 수 있도록 도와주는 모듈

 

npm install express@4.18.1

 

cors

 

HTTP의 동일 출처 정책을 해결하기 위한 모듈

 

npm install cors@2.8.5

 

 

nodemon

 

소스 코드 변경 시 자동으로 서버가 재실행 되도록 도와주는 모듈

 

npm install nodemon@2.0.14

 

socket.io

 

실시간 서버를 만들 수 있도록 도와주는 모듈

 

npm install socket.io@4.5.1

---

 

Implemet a websocket

 

아래는 실시간 웹소켓을 만들기 위해 필요한 변수들입니다.

 

const express = require("express");
const app = express();
const http = require("http");
const WebSocket = require("ws");
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
const port = 3001;

 

우선 웹 소켓 서버를 연결해 줍니다.

 

wss.on("connection", (ws) => {
  ...

 

그 다음 message를 수신할 수 있도록 세팅해 줍니다.

 

	ws.on("message", (message) => {
    	...

 

웹 서버 소켓의 클라이언트들로부터 받은 데이터를 forEach 함수로 모두 순회합니다.

 

    wss.clients.forEach(function each(client) {
    	...

 

만약 클라이언트의 준비 상태가 웹소켓이 OPEN인 상태라면 수신한 메세지를 JSON으로 파싱한 뒤 파싱한 데이터를 다시 string화 시켜서 클라이언트에 전송합니다.

 

      if (client.readyState === WebSocket.OPEN) {
        let parse = JSON.parse(message);
        let stringify = JSON.stringify(parse);
        client.send(stringify);
      }

 

서버가 잘 작동되는지 테스트 해보겠습니다.

 

app.get("/", (req, res) => {
  res.send("Hello World!");
});

server.listen(port, () => console.log(`Server running on ${port}`));

 

아래와 같이 잘 작동되는군요.

 

---

index.js

 

const express = require("express");
const app = express();
const http = require("http");
const WebSocket = require("ws");
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
const port = 3001;

wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        let parse = JSON.parse(message);
        let stringify = JSON.stringify(parse);
        client.send(stringify);
      }
    });
  });
});

app.get("/", (req, res) => {
  res.send("Hello World!");
});

server.listen(port, () => console.log(`Server running on ${port}`));

---

Source Code

 

GitHub - fomagran/ChattingAppFullStack