EDU LEVEL DEVTH IDE FORUM
  3. vue & express 프로젝트 socket io 연동 오류 질문합니다!

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


  • 1
    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일째 잡고있어서 질문드려요 ㅠㅠ


  • 0
    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/"),
}

    로 설정이 되어있었습니다


  • 0
    Level 9

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

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

Log in to reply