[Node.js] Socket.io로 Room 구현하기 (feat. TypeScript)

안녕하세요 Foma 입니다.

 

오늘은 Socket.io를 이용하여 Room을 구현해 특정 Room에 있는 유저들에게만 메세지를 보낼 수 있도록 구현해 보겠습니다.

 

바로 시작할게요~

---

Preview

 

---

Install

 

typescript, ts-node, express, socket.io 를 설치해 줍니다.

 

npm install typescript
npm install ts-node
npm install express
npm install socket.io
npm install @types/express
npm install @types/socket.io

---

Model

 

메세지 모델을 만들어 줍니다.

 

export interface Message {
  type: string;
  user: string;
  message: string;
  room: string;
}

---

index.ts

 

express와 Message를 import 해줍니다.

 

import express from "express";
import { Message } from "./models/Message";

 

express 앱을 만들어 주고 http socket.io 서버를 만들어 줍니다.

 

const app = express();
app.use(express.json());
let http = require("http").Server(app);
let io = require("socket.io")(http);

 

chat 네임 스페이스를 만들어 줍니다.

 

const chatRoom = io.of("/chatRoom");

 

* NameSpace는 소켓 url에서 엔드 포인트 역할을 하며 여러 Room들을 가질 수 있는 공간으로 보시면 됩니다.

 

 

위에서 만든 chat 네임 스페이스로 connection 되었을 때 코드를 작성해 줍니다.

 

chat.on("connection", function (socket: any) {	...

 

서버에 유저가 접속하였을 때 socket의 join() 메서드에 메세지(파라미터) 객체의 room으로 접속하도록 합니다.

 

그 다음 chat 네임스페이스에서 메세지의 room에 해당 메세지를 보내도록 합니다.

 

  socket.on("welcome", (message: Message) => {
    socket.join(message.room);
    chat.in(message.room).emit("welcome", message);
  });

 

그 다음 메세지가 왔을 때도 마찬가지로 작성해 줍니다.

 

  socket.on("message", (message: Message) => {
    chat.in(message.room).emit("message", message);
  });

 

그 다음 유저가 떠났을 떄는 socket의 leave 메서드를 활용하여 해당 메세지의 room에서 떠나도록 합니다.

 

  socket.on("leave", (message: Message) => {
    socket.leave(message.room);
    chat.in(message.room).emit("leave", message);
  });

 

마지막으로 http 서버를 실행시켜 줍니다.

 

http.listen(3001, function () {
  console.log("listening on:3001");
});

---

Next Tutorial

 

• React Native로 프론트 구현하기