즉시성을 가져야 하는 양방향 통신을 사용하기 위해, socket.io모듈을 사용하여 서버를 구축해보자.
1. 필요한 모듈 설치
먼저 서버를 구축해보자
$ npm install socket.io
http와 express도 필요하다. 그 이유는, socket.io는 인터페이스만 제공하는 것이라 엔진이 있어야 하기 때문이다.
$ npm install http
$ npm install express
모듈 설치가 완료되었다.
2. 코드
const socketio = require("socket.io");
const express = require("express");
const http = require("http");
// express 서버 생성
const app = express();
app.get("/client", (req, res)=> res.sendFile(`${__dirname}/client.html`));
const server = http.createServer(app);
const io = socketio(server);
io.on("connection", (socket) =>{
const {url} = socket.request;
console.log(`연결됨: ${url}`);
});
server.listen(5500, ()=>console.log("### 서버시작 ###"))먼저 express로 서버 객체를 생성하고, client.html 을 작성한다. 동일 호스트 내에서 접근하는 것이 CORS문제도 없고 간단하여 이렇게 했다.
http로 express서버를 감싼 후, socketio 함수의 인자로 넘겨주면, socket.io핸들링 객체가 나온다. 이걸로 .on으로 이런 저런 이벤트를 등록하고 서버를 시작하면 되는 것이다.
클라이언트
html5의 웹소켓을 사용해도 되긴하나, 브라우저 호환성에서 문제가 있을 수 있어 socket.io 클라이언트 모듈을 사용하는 것이 좋다. 아래 코드는 cdn으로 모듈을 가져와서 일단 접속만 할 수도 있고, 모듈을 받아서 쓰고 싶다면, $ npm install socket.io-client
이렇게 해서 기본 세팅이 완료되었다.
동작 확인
연결이 되는지 확인해보자.
$ nodemon main.js 로 서버를 실행한다.
클라이언트 페이지로 접속한다.
버튼을 클릭할때마다, 아래와 같은 메시지가 뜬다.
