[WebSocket/Socket IO] 채팅 서비스 구현 4. Socket IO 설치 및 연결하기

지금까지는 웹소켓을 사용하여 채팅 서비스를 개발했습니다. 그러나 생각보다 코드 구현이 까다롭다고 느끼셨을 수 있는데요. Socket IO를 사용하면 보다 간편하게 채팅 서비스를 구현할 수 있습니다.

Socket IO 설치하기

Socket IO는 양방향 실시간 통신을 지원하는 프레임워크입니다. Socket IO 또한 웹소켓 프로토콜을 사용하지만, 웹소켓을 사용할 수 없을 때 다른 방식으로 이를 지원하는 기능을 포함하고 있습니다. Socket IO의 가장 큰 장점은 이제까지 웹소켓을 사용해 구현했던 코드를 훨씬 간결하게 구현할 수 있다는 것입니다.

 

이제 Socket IO를 설치하고 사용해보도록 하겠습니다.

npm i socket.io

Socket IO 서버 구현

기존의 웹소켓 코드를 아래와 같이 업데이트합니다. 이후 http://localhost:8000/socket.io/socket.io.js 로 접속해봅니다. 브라우저에 Socket IO 함수들이 표시된다면 정상적으로 연결된 것입니다.

// server.js

import http from "http";
import { Server } from "socket.io";
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"));

const httpServer = http.createServer(app);
const ioServer = new Server(httpServer); // SocketIO 서버 구현

ioServer.on("connection", (socket) => {
  console.log(socket);
});

httpServer.listen(8000);

다음으로 프론트를 연결해보도록 하겠습니다. home.pug에서 socket.io.js를 연결해줍니다.

// home.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    title Zoom
  body
    header
      h1 Chat Together!
    main
      form#nickname
        input(type="text", placeholder="Choose your nickname", required)
      button Save
      ul
      form#message
        input(type="text", placeholder="Please write a message", required)
      button Send
    script(src="/socket.io/socket.io.js") 
    script(src="/public/js/app.js")

다음으로 app.js로 이동하여 Socket IO에서 제공하는 io 함수를 통해 서버와 연결을 완료할 수 있습니다.

// app.js

const socket = io();

이제 Socket IO 기본 설정을 모두 마쳤습니다. 다음 포스팅에서는 본격적으로 다시 채팅 서비스를 개발해도보도록 하겠습니다.