웹소켓과 devServer 설정 (Vue 3 기준)

웹소켓과 devServer 설정 (Vue 3 기준)

웹소켓 (WebSocket)

웹소켓은 클라이언트와 서버 간의 전이중 통신 채널을 제공하는 프로토콜입니다. HTTP와 달리, 웹소켓 연결은 초기 요청 후에 연결을 유지하며, 양방향 데이터 전송을 가능하게 합니다. 이는 실시간 애플리케이션(예: 채팅, 실시간 피드 업데이트 등)에 유용합니다.

웹소켓 설정 예시 (Vue 3 + Socket.IO)

클라이언트 측 (Vue 3 + Socket.IO)

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './routes';
import { io } from 'socket.io-client';
import SocketIO from 'vue-3-socket.io';

const socketConnection = io('wss://example.com'); // 보안된 WebSocket 연결

const app = createApp(App);

app.use(router);

app.use(new SocketIO({
  debug: true,
  connection: socketConnection,
}));

app.mount('#app');

 

서버 측 (Node.js + Socket.IO)

const http = require('http');
const socketIo = require('socket.io');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('WebSocket server');
});

const io = socketIo(server, {
  cors: {
    origin: "http://example.com",
    methods: ["GET", "POST"]
  }
});

io.on('connection', (socket) => {
  console.log('a user connected');
  
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  socket.on('message', (msg) => {
    console.log('message: ' + msg);
    io.emit('message', msg);
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

 

 

devServer 설정

devServer는 주로 개발 환경에서 사용되는 로컬 서버로, 웹팩(webpack) 프로젝트를 위한 개발 서버를 설정하는 데 사용됩니다. devServer를 통해 HMR(Hot Module Replacement), 프록시 설정, 특정 포트 지정 등 여러 가지 개발 편의 기능을 설정할 수 있습니다.

 

devServer 설정 예시

vue.config.js에서의 설정 (Vue CLI)

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: 'all', // 모든 호스트를 허용합니다.
                 	 // 개발 중 다양한 도메인을 허용하기 위해 사용됩니다.
    port: 8080, // 개발 서버가 실행될 포트를 지정합니다. 기본값은 8080입니다.
    proxy: { // API 요청 및 웹소켓을 위한 프록시 설정입니다.
             // 예를 들어, /api로 시작하는 요청을 http://localhost:3000으로 프록시합니다.
      '/api': {
        target: 'http://localhost:3000', // 프록시할 서버의 주소입니다.
        changeOrigin: true, // 요청 헤더의 원본(origin)을 대상(target) 주소로 변경합니다.
      },
      '/socket.io': {
        target: 'http://localhost:3000',
        ws: true, // WebSocket을 위한 설정
                  // 웹소켓 프록시를 활성화합니다.
        changeOrigin: true,
      },
    },
  },
});