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