지금까지는 웹소켓을 사용하여 채팅 서비스를 개발했습니다. 그러나 생각보다 코드 구현이 까다롭다고 느끼셨을 수 있는데요. 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 기본 설정을 모두 마쳤습니다. 다음 포스팅에서는 본격적으로 다시 채팅 서비스를 개발해도보도록 하겠습니다.
'개발 > Projects' 카테고리의 다른 글
[WebSocket/Socket IO] 채팅 서비스 구현 5. 채팅방 만들기 (0) | 2022.12.06 |
---|---|
[WebSocket/Socket IO] 채팅 서비스 구현 3. 닉네임 설정하기 (0) | 2022.12.05 |
[WebSocket/Socket IO] 채팅 서비스 구현 2. 메시지 수신하기 (0) | 2022.12.05 |