Socket.io客户端未与服务器连接

时间:2019-01-08 16:12:05

标签: javascript node.js vue.js socket.io

我正在尝试将vuejs客户端与Socket.io服务器连接。 当客户端连接或断开连接时,服务器会记录日志,当客户端与服务器建立连接时,客户端会发出警报。

我的服务器正在记录我有一个connectio,但是我的客户端没有在调用警报。


socket.io文件

app.js

var fs = require('fs');
var express = require('express');
var app = express();
var https = require('https');

var mysql = require('mysql');

var options = {
  key: fs.readFileSync('./file.pem'),
  cert: fs.readFileSync('./file.crt')
};

var serverPort = 2202;

var server = https.createServer(options, app);
var io = require('socket.io')(server);

app.get('/', function (req, res) {
  res.json({ 'error': 'err' });
});

server.listen(serverPort, function(){
  console.log('server up and running at %s port', serverPort);
});


var db = mysql.createConnection({
  host: 'localhost',
  user: 'topsecred',
  password: 'topsecred',
  database: 'database_with_importantstuff',
});

var connectedSockets = 0;

db.connect(function(err){
  if (err){ console.log('Error while trying to make a database connection'); console.log(err);}
});

io.on('connection', function (socket) {

  socket.on('disconnect', function () {
    Disconnected();
  });

  socket.on('UpdateData', function () {
    console.log('Updating data..');
    socket.broadcast.emit('UpdateData', topsecredData);
  });


   ....


}


function Connected(){
  connectedSockets++;
  console.log('Sockets connected,');
  console.log(connectedSockets + ' Socket(s) connected');
  console.log(' ');
}
function Disconnected() {
  connectedSockets--;
  console.log('Socket disconnect,');
  console.log(connectedSockets + ' Socket(s) still connected');
  console.log(' ');
}

vuejs客户端

main.js

import Vue from 'vue';
import App from './App';
import Vuex from 'vuex';
import router from './router';
import VueSocketIO from 'vue-socket.io';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.use(Vuex);

Vue.use(BootstrapVue);
Vue.use(VueSocketIO, 'https://MyWebsite.com:2202');


Vue.config.productionTip = false;

import { store } from './store/index.js';


new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

这是App.vue            一些HTML东西在这里:)     

<script>
export default {
  name: 'App',
  data () {
    return {
        topsecred: 0,
    }
  },


  methods: {
   ....
  },
  sockets: {
    connect() {
      alert('Connection with the server!');
    },
    UpdateData(data) {
      alert('Got that topsecred stuff: '+ data);
    },  
    // Some more functions that also are not getting results
  },
}
</script>
<style>
  /* Some styling */
</style>

可以预期的是,当我运行页面时,会收到一条警报,告诉我我与服务器连接。 在我的终端上有一条消息,表明客户端已连接。

我确实在终端中收到了消息,但没有收到警报。


希望有人可以帮助我。 预先感谢

0 个答案:

没有答案