11-1 서버에 Websocket 적용하기

Koa 로 만들어진 서버에 Websocket 을 적용하기 위해서는, koa-websocket 이라는 라이브러리를 설치해야합니다.

$ yarn add koa-websocket

포스트 실시간 알림을 구현하기 이전에, 먼저 서버와 클라이언트와의 기본 통신을 구현해보도록 하겠습니다.

Koa 서버에 웹 소켓을 적용 할 때에는, 다음과 같이, koa-websocket 을 new Koa() 를 할 때 감싸주면 됩니다.

src/index.js

require('dotenv').config(); // .env 파일에서 환경변수 불러오기

const Koa = require('koa');
const Router = require('koa-router');
const websockify = require('koa-websocket');

const app = websockify(new Koa());
(...)

그 다음엔, 웹소켓을 위한 라우트를 따로 만들어야합니다. ws 디렉토리를 만들고 그 안에 인덱스 파일을 만들어서 다음과 같이 코드를 입력하세요.

src/ws/index.js

const Router = require('koa-router');

const ws = new Router();

let counter = 0;

ws.get('/ws', (ctx, next) => {
    // 유저가 접속하면 이 코드들이 실행됩니다
    ctx.websocket.id = counter++; // 해당 소켓에 id 부여
    ctx.websocket.send('Hello, user ' + ctx.websocket.id);

    // 유저가 메시지를 보냈을때
    ctx.websocket.on('message', function(message) {
        console.log(message);
        ctx.websocket.send('pong');
    });

    // 유저가 나갔을 때
    ctx.websocket.on('close', () => {
        console.log(`User ${ctx.websocket.id} has left.`);
    });
});

module.exports = ws;

위 웹 소켓에서 유저가 접속했을때, 메시지를 보냈을 때, 그리고 연결이 끊겼을 때 할 작업을 설정해주었습니다.

이렇게 만든 라우트를, 다시 서버의 메인파일에서 적용을 해보겠습니다.

src/index.js

require('dotenv').config(); // .env 파일에서 환경변수 불러오기

const Koa = require('koa');
const Router = require('koa-router');
const websockify = require('koa-websocket');

const app = websockify(new Koa());
const router = new Router();
const api = require('./api');
const ws = require('./ws');

(...)

router.use('/api', api.routes()); // api 라우트를 /api 경로 하위 라우트로 설정
app.use(router.routes()).use(router.allowedMethods());
app.ws.use(ws.routes()).use(ws.allowedMethods());

app.listen(port, () => {
    console.log('heurm server is listening to port ' + port);
});

이제 서버쪽의 소켓 기본 설정이 끝났습니다. 한번 클라이언트쪽에서 연결을 해볼까요? 개발자 콘솔을 열어서 다음 코드를 입력하세요:

function createSocket() {
    const socket = new WebSocket('ws://localhost:4000/ws');
    socket.onmessage = (msg) => console.log(msg);
    socket.onopen = () => console.log('connected to socket');
    return socket;
}
const s = createSocket();

그럼, 다음과 같은 결과가 나타납니다.

connected to socket
MessageEvent {isTrusted: true, data: "Hello, user 0", origin: "ws://localhost:4000", lastEventId: "", source: null…}

이제 서버에 데이터를 전달해봅시다.

s.send('ping');

이 코드를 실행하면 서버가 pong 데이터를 전달해줍니다.