Socket.io - 실습 (세팅)

브라우저와 실시간 통신을 위해 socket.io 세팅을 한다.

세팅 - Server

import http from 'http';
import { Server } from 'socket.io';
import express from 'express';
import { instrument } from '@socket.io/admin-ui';

const app = express();

app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
app.use('/public', express.static(__dirname + '/public'));
app.get('/', (_, res) => res.render('home'));
app.get('/*', (_, res) => res.redirect('/'));

const httpServer = http.createServer(app);
const wsServer = new Server(httpServer, {
  cors: {
    origin: ['https://admin.socket.io'],
    credentials: true,
  },
});
instrument(wsServer, {
  auth: false,
});

=> express의 서버에 socket.io를 합친다. 그리고 관리를 위한 admin-ui도 추가한다.

세팅 - Client (HTML)

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")
        title Noom
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    body
        header
            h1 Noom
        main
            div#welcome
                form
                    input(placeholder="room name", required, type="text" id="roomName")
                    input(placeholder="nickname", required, type="text" id="nickname")
                    button Enter Room
         
            div#roomList Room List
                ul

            div#room
                h3
                h2 
                ul
                form#msg
                    input(placeholder="message", required, type="text")
                    button Send
        script(src="/socket.io/socket.io.js") 
        script(src="/public/js/app.js") 

=> express에서 전달한 socket.io.js를 읽는다.

세팅 - Client (JS)

const socket = io();

=> socket.io.js를 읽었기 때문에, io()객체를 만들 수 있다.