socket.io ํด๋ผ์ด์–ธํŠธ, ์„œ๋ฒ„ ์—ฐ๊ฒฐ ์˜ค๋ฅ˜๋ฅผ ์žก์•„๋ผ

/socket.io/?EIO-3&trnasport ์–ด์ฉŒ๊ณ  ํ•˜๋Š” 404 ์˜ค๋ฅ˜๊ฐ€ ๋œฌ๋‹ค. ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ณด๋‚ธ socket์„ ์„œ๋ฒ„์—์„œ ์žก์ง€ ๋ชปํ•ด์„œ ์ผ์–ด๋‚˜๋Š” ์˜ค๋ฅ˜๋ผ๊ณ  ํ•˜๋Š”๊ฑฐ ๊ฐ™์€๋ฐ ์–ด๋””์—์„œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค.

์ถ”์ธก

app.listen, app = express(), init.js์—์„œ app์„ import ํ•˜๊ณ  ํ•˜๋Š” ๊ณผ์ •์—์„œ ์ผ์–ด๋‚˜๋Š” ์˜ค๋ฅ˜์ธ๊ฑฐ ๊ฐ™๋‹ค.

const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    socket.emit('news', {hello : 'world'};
});

๊ฐ๊ฐ์˜ ์—ญํ• ์€ ๋ญ๊ณ  ๋„๋Œ€์ฒด ์–ด๋””์„œ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜๋Š” ๊ฑธ๊นŒ ?
๋ฅผ ํ•œ๋‹ฌ๋™์•ˆ ์ˆ˜์‹ญ๋ฒˆ์˜ ๊ฐ™์€ ์˜ค๋ฅ˜๋ฅผ ๋‚ด๋ฉด์„œ ๊ณ ๋ฏผํ–ˆ๋‹ค. ์ŠคํŠธ๋ ˆ์Šค + ๊ฑฐ์˜ ํฌ๊ธฐ ์ง์ „์˜ ์ƒํ™ฉ์ด์˜€๋Š”๋ฐ ์ด๋ ‡๊ฒŒ ํฌ๊ธฐํ•˜๋ฉด ์–ด์งœํ”ผ ๋ชจ๋ฅด๊ณ  ๋๋‚˜๋ฒ„๋ฆฌ๋‹ˆ๊นŒ ๋‚˜๋งŒ ์†ํ•ด์ธ๊ฑฐ ๊ฐ™์•„์„œ ๋‹ค์‹œ ๋งˆ์Œ์„ ๊ณ ์ณ๋จน์—ˆ๋‹ค.
์ง€ํ‘ธ๋ผ๊ธฐ๋ผ๋„ ์žก๋Š” ์‹ฌ์ •์œผ๋กœ ์™œ ์ด๊ฒŒ ์•ˆ๋˜๊ณ  ์žˆ๊ณ , ์–ด๋–ค ๋ฌธ์ œ๊ฐ€ ์™œ ๋ฐœ์ƒํ•˜๋Š”์ง€ ์ตœ๋Œ€ํ•œ ์ž์„ธํ•˜๊ฒŒ ์ •๋ฆฌํ•ด๋ณด๊ณ  ์‹ถ์–ด ๊ธ€์„ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

์ด ๋ฌธ์ œ๋ฅผ ํ•œ๋‹ฌ ๋™์•ˆ ๋™๋™ ์•“๊ณ  ์žˆ๊ฒŒ ๋œ ์ด์œ ๋Š” ์–ด ์ด๊ฒŒ ๋ฌธ์ œ์ธ๊ฑฐ ๊ฐ™๋„ค' ๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ณ  ๊ณ ์น˜๋ฉด -> ์–ด ๋˜๋„ค -> ๋‹ค๋ฅธ ๋ฐฉ๋ฒ• ์ ์šฉ -> ์ด๊ฑด ์•ˆ๋˜๋„ค -> ์•ฝ๊ฐ„ ๊ณ ์น˜๋ฉด -> ์‘ ์•ˆ๋Œ ๋ฅผ ๋ฐ˜๋ณตํ•˜๋‹ค๋ณด๋‹ˆ ๋‚ด๊ฐ€ ์–ด๋–ค๊ฑธ ๊ณ ์น˜๋ฉด ๋˜๊ณ  ์–ด๋–ค๊ฑธ ๊ณ ์น˜๋ฉด ์•ˆ๋˜๋Š”์ง€ ์ ์  ๋ชจํ˜ธํ•ด์กŒ๋‹ค.
๊ทธ๋ž˜์„œ ๋‚˜๋„ ๋ชจ๋ฅด๊ฒŒ ์ „์— ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์งœ์„œ ์—๋Ÿฌ๊ฐ€ ๋‚ฌ๋Š”๋ฐ๋„ ๋‚˜์ค‘์— ๋˜ ๊ทธ ์ฝ”๋“œ๋ฅผ ์งœ์„œ ์—๋Ÿฌ๋ฅผ ๋งŒ๋“ค๊ณ  ์žˆ์—ˆ๋‹ค.
์–ด๋–ค ํŒŒ์ผ๋“ค์ด ์žˆ๊ณ , ์–ด๋–ค ๊ธฐ๋Šฅ์„ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ๋ถ€ํ„ฐ, ์‹œ๋„ํ•ด๋ณธ ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•๊นŒ์ง€ ์ž์„ธํžˆ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค. ๋‚˜๋ฅผ ์œ„ํ•ด!!

๐Ÿคฏ router, socket.io ์—๋Ÿฌ ์ตœ๋Œ€ํ•œ ์ž์„ธํžˆ ์ž‘์„ฑํ•ด๋ณด๊ธฐ

GET /socket.io/?EIO=3&transport=polling&t=Mctq2Fg 404 0.218 ms - 149

์ง€๊ธˆ ์œ„์˜ ์—๋Ÿฌ๊ฐ€ ๊ฑฐ์˜ ํ•œ๋‹ฌ ๋™์•ˆ ๋‚˜๋ฅผ ๊ดด๋กญํžˆ๊ณ  ์žˆ๋‹ค. ํ•œ๋‹ฌ ๋™์•ˆ ์ง„์งœ ๋ญํ–ˆ์ง€ใ…  ํ•˜.. ์ด์ œ๋Š” ์ด ์—๋Ÿฌ๋งŒ ๋ด๋„ ํ† ํ• ๊ฑฐ๊ฐ™์Œ
์ง„์งœ ํฌ๊ธฐํ•˜๊ธฐ ์ง์ „์ธ๋ฐ, ์ตœ๋Œ€ํ•œ ์ž์„ธํžˆ ์ ์–ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

ํŒŒ์ผ ๊ตฌ์กฐ

init.js -- app์„ ๋ถˆ๋Ÿฌ์™€์„œ ์‹คํ–‰ ์‹œํ‚ค๋Š” ๊ณณ

import app from './app';

const PORT = process.env.PORT || 8080;
app.listen(PORT, handleListening);

app.listen(PORT, )๋Š” ํŠน์ • ํ˜ธ์ŠคํŠธ์™€ ํฌํŠธ์˜ ์—ฐ๊ฒฐ์„ ์œ ์ง€ํ•˜๋Š” ์—ญํ• ์„ ํ•จ

app.js -- express ํ”„๋ ˆ์ž„์›Œํฌ์˜ ์ธ์Šคํ„ด์Šค์ธ app์— ์„ค์ •์„ ํ•˜๋Š” ๊ณณ. router๋ฅผ ์—ฐ๊ฒฐํ•ด์ฃผ๊ณ  helmet์ด๋‚˜ cookieParser ๋“ฑ์˜ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์—ฐ๊ฒฐ ์‹œ์ผœ ์ค€๋‹ค.

const app = express();
// view ์„ค์ •
app.use('view engine', 'pug'); 
app.use('views', path.join(__dirname, 'views')); // views ํด๋” ์•ˆ์— pug ๋ ˆ์ด์•„์›ƒ
app.use('static', express.static(path.join(__dirname, 'static'))) // js๋‚˜ css ํŒŒ์ผ

app.use(localMiddleware);

// router ์„ค์ •
app.use(routes.users, userRouter);
app.use(routes.home, globalRouter); 

routers/globalRouter.js -- express.Router๋กœ ํŠน์ • url๋กœ ๋“ค์–ด์˜จ ์š”์ฒญ(post, get)์„ controller์™€ ์—ฐ๊ฒฐ ์‹œ์ผœ์คŒ

const globalRouter = express.Router();
globalRouter.get('/', home);

gloabalRouter.post('/join', postJoin);
gloabalRouter.get('/join', getJoin);

controllers/chatController.js -- '/' ๋กœ ๋“ค์–ด์˜จ ์š”์ฒญ๋“ค์„ ์ฒ˜๋ฆฌํ•˜๋Š” controller๋“ค์„ ์ •์˜

export const home = async (req, res) => {
    try{
        const chats = await Chat.find({});
        res.render('home', { pageTitle : 'home', chats});
    }catch(error){
        res.render('home', { pageTitle : 'home', chats:[]});
    }
}

views/layouts, views/home.pug ๋“ฑ -- ํ…œํ”Œ๋ฆฟ ๋ ˆ์ด์•„์›ƒ

## main.pug
doctype html
html
    head
        link(rel="stylesheet", href="/static/styles.css")
        title | #{siteName}
    body 
        include ../partials/header
        main
            block content  ## ํŽ˜์ด์ง€๋งˆ๋‹ค ๋ฐ”๋€Œ๋Š” ๋ถ€๋ถ„
        include ../partials/footer
        script(src="/static/main.js")

static/main.js , static/style.css -- ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง์‹œ ํ•„์š”ํ•œ static files ๋“ค

// main.js 
import '../style.scss';
import './chat.js'; 

// chat.js -- socket.io ํ†ต์‹ ์—์„œ ํด๋ผ์ด์–ธํŠธ ๋ถ€๋ถ„
import io from 'socket.io-client';
const socket = io('http://localhost:8080');

socket.on('news', data => {
    console.log(data);
})

์•ž์—์„œ ๋งํ–ˆ๋“ฏ์ด ์ด๋ ‡๊ฒŒ static/chat.js ์—์„œ socket.io์„ ์‹คํ–‰์‹œ์ผฐ๋Š”๋ฐ ์œ„์™€ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋œฌ๋‹ค.
socket.io๊ฐ€ ์š”์ฒญํ•ด์„œ ์‘๋‹ตํ•ด์ค„ ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•˜๋‹ค.
socket.io๋Š” ๋ธŒ๋ผ์šฐ์ €์™€ ์„œ๋ฒ„ ์‚ฌ์ด์—์„œ ์–‘๋ฐฉํ–ฅ์„ฑ, ์ด๋ฒคํŠธ driven ํ†ต์‹ ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•œ๋‹ค.

  • ์ฒซ๋ฒˆ์งธ ๊ถ๊ธˆ์ฆ
    ๊ทธ๋ ‡๋‹ค๋ฉด chat.js์— ์—ฐ๊ฒฐํ•ด ์ฃผ์—ˆ๋˜ socket์€ ์–ด๋–ค url๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๊ฑธ๊นŒ ?
    =>
    const socket = io('http://localhost:8080'); ๋กœ ์ ์—ˆ์œผ๋‹ˆ 8080/ ๋กœ ๋ณด๋‚ธ๋‹ค ?

๊ทผ๋ฐ ์ง€๊ธˆ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋ณด๋‹ˆ๊นŒ ๊ทธ๋ƒฅ const socket = io('http://localhost)๋กœ ์ ์–ด๋†จ๋„ค, ํ•˜์ง€๋งŒ ์ง€๊ธˆ ๋ฌธ์ œ๋Š” ํด๋ผ์ด์–ธํŠธ๋Š” socket์„ ์ž˜ ๋ณด๋‚ด๋Š”๋ฐ server๊ฐ€ ๋ฌธ์ œ์ธ ๊ฑฐ ๊ฐ™๋‹ค.

๋‘๋ฒˆ์งธ ์‹œ๋„

const io = require('socket.io')(http, {path:'/socket.io'};

์„ธ๋ฒˆ์งธ ์‹œ๋„

ํด๋ผ์ด์–ธํŠธ์—์„œ 8080 ํฌํŠธ ์—†์• ๊ณ  ์š”์ฒญ
localhost/socket.io ๋กœ ์š”์ฒญ๋˜์–ด์„œ ๋‹ค๋ฅธ ์˜ค๋ฅ˜ ๋งŒ๋“ฌ

๋„ค๋ฒˆ์งธ

ํด๋ผ์ด์–ธํŠธ๋„ cdn.js๋กœ ๋ณ€๊ฒฝํ•ด๋ณด๊ธฐ
์ง€๊ธˆ ์›นํŒฉ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Œ, assest/js ์— ์ •์˜ํ•œ js ํŒŒ์ผ๋“ค์„ webpack ์œผ๋กœ ๋ฒˆ๋“คํ•˜์—ฌ static/main.js ๋กœ ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค๊ณ  ์ด๋ฅผ main.pug ์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.
script ํƒœ๊ทธ์—์„œ socket.io.js ์‚ฌ์šฉํ•˜๊ณ , assets/js ์—์„œ socket์„ ์‚ฌ์šฉ

์•ˆ๋จ, ์—ฌ์ „ํžˆ ๊ฐ™์€ ์˜ค๋ฅ˜ ๋งŒ๋“ฆ

๋‹ค์„ฏ๋ฒˆ ์งธ

์ด์ œ ์„œ๋ฒ„ ์ชฝ์„ ๋ฐ”๊ฟ”๋ณด์ž.
init.js , app.js ๋กœ ๋‚˜๋ˆ ์ ธ ์žˆ๋‹ค. app์€ app ์— ํ•„์š”ํ•œ ๋ฏธ๋“ค์›จ์–ด, ๋ผ์šฐํŒ… ์„ค์ •์„ ํ•ด๋†จ๊ณ  ํ˜„์žฌ socket.io๊ฐ€ io๋กœ ์žˆ๋Š”๊ณณ์ด ์—ฌ๊ธฐ๋‹ค.
app.listen(8080)
const io = require('socket.io').server;
const http = require('http');

์ผ๋‹จ ์—ฌ๊ธฐ ๋ถ€๋ถ„์ด ๊ฐ๊ฐ ์ •ํ™•ํžˆ ์–ด๋–ค ์ผ์„ ํ•˜๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ๊ณ , app.listen์ด ๊ผญ ๊ฐ™์€ ํŒŒ์ผ์— ์žˆ์–ด์•ผํ•˜๋Š”์ง€ ์•„๋‹ˆ๋ฉด ๋‚˜๋ˆ ์ ธ๋„ ์ƒ๊ด€์—†๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค.

์ผ๋‹จ ์ด ๋ถ€๋ถ„์„ 1. ํ•ฉ์ณ๋ณด์ž.

const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server, { path : '/socket.io'});

const serverHandler = (req, res) => {
    console.log('connected');
}
server.listen('8080', serverHandler);
io.on('connection', function(socket){
    console.log(socket);
});

๋“œ๋””์–ด io๊ฐ€ ์‚ด์•„๋‚ฌ๋‹ค. ์ด์ „ ์ฝ”๋“œ๋ž‘ ๋ณ€ํ•œ๊ฑฐ๋ผ๊ณค server.listen์„ app.js๋กœ ๊ฐ€์ ธ์˜ค๊ณ  ์‹คํ–‰ํ•œ ๊ฒƒ ๋ฐ–์— ์—†๋Š”๋ฐ ์ด๊ฒŒ ์ค‘์š”ํ•œ ๊ฑด๊ฐ€ ?
url์— ๋Œ€ํ•œ ์‘๋‹ต์„ ์•ˆํ•ด์ค˜์„œ 404 ์—๋Ÿฌ๊ฐ€ ๋‚˜๊ณ  ์žˆ๋‹ค.

  • import express from 'express' -- ExpressJS๋Š” Nodejs ๋ชจ๋“ˆ์ด๋‹ค. express ๋Š” ์ด ๋ชจ๋“ˆ์˜ ์ด๋ฆ„์ด๊ณ  import๋กœ ๋ชจ๋“ˆ์„ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋‹ค.
  • const app = express(); -- express ํ•จ์ˆ˜๋ฅผ express()๋กœ ํ˜ธ์ถœํ•˜๊ณ  app ๋ณ€์ˆ˜์— ์ƒˆ๋กœ์šด Express ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋„ฃ๋Š”๋‹ค. ํด๋ž˜์Šค์—์„œ ์ƒˆ๋กœ์šด ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๊ณผ ๊ฐ™๋‹ค. ์—ฌ๊ธฐ์„œ app์€ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์ง„ express ์˜ค๋ธŒ์ ํŠธ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.์ฐธ๊ณ 
  • const server = require('http').createServer(app) -- HTTP ์„œ๋ฒ„๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์—ˆ๋‹ค. ์ด ๊ฒฝ์šฐ HTTP ์„œ๋ฒ„๋ฅผ ์žฌ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์—์„œ ํŽธํ•˜๋‹ค. app.listen(8080) ์—์„œ๋Š” ์ž๋™์œผ๋กœ Express app์ด HTTP ์„œ๋ฒ„๋ฅผ ๋ฆฌํ„ด๋œ๋‹ค. ์ฆ‰ socket.io์™€ ๊ฐ™์€ HTTP ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.
  • const io = require('socket.io')(server); -- ๋งŒ๋“  HTTP ์„œ๋ฒ„์™€ socket.io๋ฅผ ๋ฐ”์ธ๋”ฉ
  • server.listen(8080); -- ํ•ด๋‹น HTTP ์„œ๋ฒ„์™€ 8080 ํฌํŠธ๋ฅผ ์—ฐ๊ฒฐ ์‹œํ‚ด
  • ์ง€๊ธˆ /์— ๋Œ€ํ•œ ์‘๋‹ต์„ ์•ˆํ•ด์คฌ๊ณ  server-side์—์„œ io๊ฐ€ ์‚ด์•„์žˆ๋Š” ์ƒํƒœ์ด๋‹ค.
  • socket.io.js ๊ฐ€ ์žˆ๋Š” views/main์„ ์ „๋‹ฌํ•ด์ฃผ์ž.
    app.get('/', function(req, res){
      res.render('home', { pageTitle : 'home', chats:[]});
    })
    main > home ๋ ˆ์ด์•„์›ƒ์— chat.js ๊ฐ€ ์žˆ์Œ socket ์—ฐ๊ฒฐ ๋Œ€๊ธฐ์ค‘์ด๋‹ค.
  • pug header ๋ ˆ์ด์•„์›ƒ์— ์„ค์ •ํ•ด ๋†“์€ routes.home์„ ์ฐพ์ง€ ๋ชปํ•ด์„œ ์—๋Ÿฌ๊ฐ€ ๋‚ฌ๋‹ค. ์Œ ์–ด๋–ค routes.home์ด์ง€..
    แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-03-27 แ„‹แ…ฉแ„’แ…ฎ 4.36.35.png
  • ์ด๊ฑด ์ •ํ™•ํžˆ ์–ด๋–ค ๋ฌธ์ œ์ผ๊นŒ ?
  • routes.home์„ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค๊ณ  ๋‚˜์˜ค๋Š”๋ฐ middleware.js์— ๋กœ์ปฌ ๋ณ€์ˆ˜๋กœ res.locals.routes = routes๋ฅผ ์„ค์ •ํ•ด ์ฃผ์–ด์„œ ๋ฌธ์ œ ์—†์„ ๊ฒƒ ๊ฐ™์€๋ฐ.
  • home๋งŒ ์ƒ๊ธฐ๋Š” ๊ฑด์ง€, ์•„๋‹ˆ๋ฉด ๋ชจ๋“  routes.๋ณ€์ˆ˜์—์„œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ๋Š” ๊ฑด์ง€ ์ผ๋‹จ home๋งŒ '/'๋กœ ๋ฐ”๊ฟ”์„œ ๋™์ž‘์‹œ์ผœ๋ณด์•„์•ผ๊ฒ ๋‹ค.
  • '/'์€ ๋ฌธ์ œ ์—†์ด ๋„˜์–ด๊ฐ€๋‚˜ if !user.isAuthenticated์—์„œ ๋‹ค์‹œ ์—๋Ÿฌ๊ฐ€ ์ƒ๊ฒผ๋‹ค.
  • routes์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹Œ๊ฑฐ ๊ฐ™์•„์„œ middleware๊ฐ€ ์ž˜ ์ ์šฉ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ–ˆ๋Š”๋ฐ ์ฃผ์„ ์ฒ˜๋ฆฌ๊ฐ€ ๋˜์–ด์žˆ์—ˆ๋‹ค.
  • middleware์˜ ์ฃผ์„์ฒ˜๋ฆฌ๋ฅผ ์‚ญ์ œํ–ˆ๋Š”๋ฐ๋„ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. ๋ฌด์Šจ ๋ฌธ์ œ์ธ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹น.
  • ์•„ ๊ฐ๊ฒฉ!
  • ๋ฌธ์ œ๋Š” pug ํ…œํ”Œ๋ฆฟ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ณ€์ˆ˜๋ฅผ middleware.js์— res.locals.user๋กœ ์ €์žฅํ•ด๋‘์—ˆ๋Š”๋ฐ ์•„๋ž˜์™€ ๊ฐ™์ด '/' get ์š”์ฒญ์— ๋Œ€ํ•ด์„œ ๋จผ์ € ์‘๋‹ตํ•˜๊ณ , ๊ทธ ๋‹ค์Œ app.use(localsMiddleware)๋ฅผ ์ฐธ์กฐํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— '/' get ์‘๋‹ต์—์„œ๋Š” local ๋ณ€์ˆ˜๊ฐ€ ์ ์šฉ๋˜์ง€ ๋ชปํ–ˆ๋‹ค.
  • app.use์˜ ์œ„์น˜๋ฅผ app.get('/') ๋ณด๋‹ค ์œ„์— ์จ์ฃผ๋‹ˆ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค.
app.get('/', function(req, res){
    res.render('home', { pageTitle : 'home', chats:[]});
})

app.use(localsMiddleware);
  • ๊ทธ๋ฆฌ๊ณ ...ํ•œ๋‹ฌ๋งŒ์— socket.io๊ฐ€ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ€ ์—ฐ๊ฒฐ์ด ๋˜์—ˆ๋‹ค. ๊ธฐ์˜๊ธฐ๋„ ํ•˜๊ณ  ์ด๊ฑธ ํ•œ๋‹ฌ์”ฉ์ด๋‚˜ ๊ฑธ๋ ธ๋‹ค๋Š”๊ฒŒ ์งœ์ฆ๋‚˜๊ธฐ๋„ ํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์˜ค๋Š˜์€ ๋ฌธ์ œ ํ•ด๊ฒฐ์˜ ๊ธฐ์จ์„ ๋งŒ๋ฝํ•ด์•ผ์ง€.
  • ๋‘๊ฐ€์ง€๊ฐ€ ์ด ์—ฐ๊ฒฐ์—์„œ ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค.

์ฒซ๋ฒˆ์งธ๋Š” io์™€ server์˜ ์—ฐ๊ฒฐ, server.listen

const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server, { path: '/socket.io' });

server.listen('8080', function(req, res){
    console.log('โœ… connected');
})

๋‘๋ฒˆ์งธ๋Š” ๋ผ์šฐํ„ฐ ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™๋‹ค.

//app.js
app.use(routes.users, userRouter);
app.use(routes.home, globalRouter);

app.get('/', function(req, res){
    res.render('home', { pageTitle : 'home', chats:[]});
})
io.on('connection', function(socket){
    console.log(socket);
});
  • ํ˜„์žฌ ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„์— '/' url๋กœ socket์„ ๋ณด๋‚ธ๋‹ค.
  • globalRouter์— '/' ๋กœ ๋“ค์–ด์˜ค๋Š” get, post ์š”์ฒญ๋“ค์„ ์ฒ˜๋ฆฌํ•ด์ฃผ๊ธฐ ์œ„ํ•ด controller๋ฅผ ์—ฐ๊ฒฐํ•ด์ฃผ์—ˆ๋‹ค.
  • ์›๋ž˜ globalRouter์—๋„
    globalRouter.get(routes.home, home);
    ์œ„์™€ ๊ฐ™์ด home, '/' ์— ๋Œ€ํ•ด์„œ home ์ปจํŠธ๋กค๋Ÿฌ ํ•จ์ˆ˜๋ฅผ ์—ฐ๊ฒฐ์‹œ์ผœ ์ฃผ์—ˆ๋Š”๋ฐ, ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์•„์˜ˆ ํ™”๋ฉด ๋กœ๋”ฉ์ด ๋˜์ง€ ์•Š๋Š”๋‹ค.
  • ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , io ๋ฅผ server์™€ ์—ฐ๊ฒฐ์™€์˜ ํ•ด๋‹น ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ํŽ˜์ด์ง€๋ฅผ ๊ฐ™์€ ์Šค์ฝ”ํ”„? ์ƒ์— ๋‘์–ด์•ผ์ง€๋งŒ ์ž‘๋™ ๋œ๋‹ค.
  • ์™œ ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋˜๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค.

๋ฏธ๋“ค์›จ์–ด ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

๊ทธ๋ž˜๋„ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, ๋ฏธ๋“ค์›จ์–ด์—์„œ socket.io ๋ณ€์ˆ˜๋ฅผ ๋„ฃ์–ด๋ณผ ์˜ˆ์ •์ด๋‹ค. ๋ชจ๋“  req, res ์‚ฌ์ด์— socket.io๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋„๋ก - ์ฐธ๊ณ : middleware ์‚ฌ์šฉํ•˜๊ธฐ

  • app.use์™€ app.get ์€ ๊ฐ™์ด ์“ธ ์ˆ˜ ์žˆ๋‹ค. ๋Œ€์‹  ๊ฐ™์€ url method๋ฅผ ์ฒ˜๋ฆฌํ•ด์ฃผ๋Š”๊ฑฐ๋Š” ํ•˜๋‚˜๋งŒ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.