통합구현 #8 - 실시간 채팅

REST = 호출하면 결과가 온다
1. vue에서 호출
2. 결과 반환
만약. REST로 채팅을 만들면
1번 사용자가 메세지를 쓰면
2번 사용자가 메세지가 있는지 물어봐야 한다. (요청해야한다.)

socket.io = 순서 상관없음
1. 가만히 있어도 데이터가 온다. = push

1. routes 등록

• D:\exp_20220311\app.js

1. chat.js 등록
2. rest api가 아님, url 필요없음
   require('./routes/chat')

2. /routes/chat.js

• D:\exp_20220311\routes\chat.js

var express = require('express');
var router = express.Router();

const app = express();
const http = require('http');
const httpServer = http.createServer(app);

const {Server} = require('socket.io');
// 같음 = const Server = require('socket.io').Server;
const io = new Server(httpServer);

httpServer.listen(3001, () => {
    console.log('3001 socket.io 서버시작');
});

io.on('connection', (socket) => {
    console.log('socket ===> ',socket);
});

module.exports = router;

3. main.js - socket 사용 설정

• D:\vue_20220314\src\main.js

// npm i --save socket.io ==> 백엔드
// npm i --save socket.io-client@4.4.1 ==> 프론트
import io from 'socket.io-client';
// 소켓 설정
const socket = io("/", {transports:['websocket']});

const app = createApp(App);

// 컴포넌트에서 사용가능하도록 설정
app.config.globalProperties.$socket = socket;