vue & express 프로젝트 socket io 연동 오류 질문합니다!


  • Level 3

    vue express, socketio를 이용하여 채팅을 할 수 있도록 하려고 합니다.
    많은 검색과 goormedu의 강좌를 참고하여 코드를 작성goormedu의 강좌를 참고하여 코드를 작성하였는데 socket 연결이 안되고, console에 net::ERR_TIMED_OUT와 같이 표시가 됩니다. 처음에는 express 서버를 http로 열고 구름에서 제공하는 주소는 https방식을 이용하여 제한되는줄 알았는데 goormedu에서 제공하는 강좌에서는 잘 나와서 문의드립니다.

    vue의 main.js에서는

    import Vue from 'vue'
    import App from './App.vue'
    import BootstrapVue from 'bootstrap-vue'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    import router from "./router"
    import axios from 'axios'
    import Directives from './plugins/directives'
    
    import io from 'socket.io-client'
    var socket = io('https://goormide 컨테이너에서 만든3000번포트주소.run.goorm.io:3000');
    Vue.prototype.$socket = socket
    
    Vue.config.productionTip = false
    
    Vue.use(Directives);
    
    Vue.use(BootstrapVue)
    
    Vue.prototype.$http = axios
    
    new Vue({
      render: h => h(App),
      router
    }).$mount('#app')
    

    이고,

    express의 app.js는

    var express = require('express');
    var path = require('path');
    var favicon = require('serve-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');
    var cors = require('cors')
    var index = require('./routes/index');
    var users = require('./routes/users');
    
    var app = express();
    var http = require('http').Server(app);
    var io = require('socket.io')(http);
    
    
    var connectMongoDB = require('./schemas');
    connectMongoDB();
    // view engine setup
    
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    
    // uncomment after placing your favicon in /public
    //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
    app.use(cors());
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.use('/', index);
    app.use('/api/users', users);
    
    app.all('/*', function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "*"); next();
    });
    io.on('connection', function (socket) { // 채팅방에 접속했을 때
        console.log('@@@@@@@@@@@@@@@클라이언트 접속@@@@@@@@@@@@@@@@');
    	
        socket.on('chat', function (data) {
            console.log('message from Client: ' + data.message)
            var rtnMessage = {
                message : data.message
            }; // 클라이언트에게 메시지를 전송한다
            socket.broadcast.emit('chat', rtnMessage);
        });
    })
    
    http.listen(3000, function(){ 
    	console.log('@@@@@@@@@@@@@@@@@서버켜짐@@@@@@@@@@@@@@@@@@@');
    });
    
    module.exports = app;
    

    불러오는건

    created () {
        this.$socket.on('chat', (data) => {
          this.textarea += data.message +"\n";
        })
      },
      data () {
        return {
          textarea: '',
          message: '',
        }
      },
      methods: {
        sendMessage () {
          const user_email = sessionStorage.getItem("user_email");
          const message = user_email + ':'+this.message;
          this.$socket.emit('chat', {
            message: message,
          })
          this.textarea += message + '\n'
          this.message = ''
        }
      }
    

    이렇게 불러오고 있었습니다.

    이렇게 했을시에 콘솔에

    polling-xhr.js?d33e:268 GET https://sssssss.run.goorm.io:3000/socket.io/?EIO=3&transport=polling&t=NOnyCHi net::ERR_TIMED_OUT
    

    이라고 뜨면서 연결이 안됩니다. 이외에는 모두 작동합니다. 2일째 잡고있어서 질문드려요 ㅠㅠ

  • Level 3

    코드보면

    app.use('/api/users',users);
    

    와 같이 회원가입 정보나 그런것들을 proxy를 통해 얻고 있었습니다. 그 상태에서 socket io를 동시에 사용하고싶어 app.js에 위와같이 설정했는데 오류가 떠서 질문드립니다.
    제 vue.config.js는

    var path = require("path")
    
    module.exports = {
    	publicPath : '',
    	devServer : {
    		proxy : { // proxyTable 설정
    			'/api' : {
    				target : 'https://구름ide에서 만든 3000번 포트주소.run.goorm.io/api',
    				changeOrigin : true,
    				pathRewrite : {
    					'^/api' : ''
    				},
    				secure:false,
    				logLevel: 'debug'
    			}
    		},
    		disableHostCheck : true,
    	},
    	outputDir : path.resolve(__dirname, "../server/public/"),
    }
    

    로 설정이 되어있었습니다

  • Level 9

    goormedu 강의자는 free유저가 아니어서 프리미엄 기능으로 2개의 포트를 열어두고 사용하고 있을거 같아요,
    free 유저라면 플랜 업그레이드 후 두개의 포트를 등록하여 http 통신을 하시거나,

    다른 방법으로는 proxy 기능을 사용하여 하나의 url에서 path설정을 통해 express와 vue를 하나의 url로 사용하는 방법이 있을거 같아요.
    https://velog.io/@skyepodium/vue-proxy-사용하기