Navigation

    EDU LEVEL DEVTH IDE FORUM
    USERNAME
    내 정보 수정 쿠폰 관리
  • 로그아웃
    • Search
    • Categories
    • Recent
    • Popular
    • Tags
    1. Home
    2. 배성준
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    배성준

    @배성준

    3
    Level
    1
    Reputation
    3
    Posts
    74
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    배성준 Follow

    Posts made by 배성준

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

      코드보면

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

      로 설정이 되어있었습니다

      posted in 구름IDE 관련
      배성준
    • vue & express 프로젝트 socket io 연동 오류 질문합니다!

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

      posted in 구름IDE 관련
      배성준
    • 1 / 1
    goorm
    상호 : (주)구름    대표 : 류성태    개인정보보호책임자 : 김현화
    경기 성남시 분당구 판교로 242 PDC A동 902호
    사업자등록번호 : 124-87-39200
    통신판매업신고번호 : 제2019-성남분당B-0224호
    TEL : 031-600-8586    Email : contact@goorm.io
    • 구름EDU
    • 구름LEVEL
    • 구름DEVTH
    • 구름IDE
    • 구름FORUM
    ⓒ goorm Inc. All Rights Reserved.
    채용 이용약관 개인정보처리방침 도움말 powered by nodeBB