How to make my vue component connect to my node server

Question

Hey guys am building a SPA(Single Page Application) chat app using Vuejs for front and Laravel 5.4 for my backend API. To achieve realtime communication experience i build a basic node server with express and installed vue-socket.io on my vue frontend project but the vue project seem not to be connected to node server. Please what i'm i missing here? This is what i have done:

server.js

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

var server = require('http').Server(app);

var io = require('socket.io')(server);

var redis = require('redis');

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

function logData(message) {
    var d = new Date();
    var time = '[' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + '] '
    console.log(time + message);
}

function logMultipleData(message, channel, data) {
    var d = new Date();
    var time = '[' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + '] '
    console.log(time + message + channel + data);
}

server.listen(3000, function() {
    logData('Chat server booted on *:3000');
});

io.on('connection', function(socket) {
    console.log('new client connected');
    var redisClient = redis.createClient();
    redisClient.subscribe('message');
    redisClient.on('message', function (channel, message) {
        logMultipleData('New Message In Queune', channel, message);
    })
});

Main.js (this file is in vue frontend project)

import Vue from 'vue'
import App from './App.vue'
import Router from './routes.js'

import VueResource from 'vue-resource'

import VueSocketIO from 'vue-socket.io'; 

Vue.use(VueResource)
Vue.use(VueSocketIO, 'http://localhost.com:8890');

new Vue({
  el: '#app',
  render: h => h(App),
  router: Router
})

Test.vue(my test component)

<template>
<!--Mask-->
<div class="view">
  <img class="background" src="/src/assets/images/background.jpg" alt="">
  <!--Intro content-->
  <div class="full-bg-img flex-center">
    <div class="container">
      <div class="row">

        <div class="col-lg-4 offset-4">
          <!--Form with header-->
          <div class="card section">

            <div class="progress">
              <div class="indeterminate" style="width: 70%"></div>
            </div>

            <div class="card-block">


              <!--Header-->
              <!-- <div class="form-header  purple darken-4">
                <h3><i class="fa fa-lock"></i> Register:</h3>
              </div> -->

              <!--Body-->
              <button @click="clickButton">Ping Server</button>
              <blockquote class="blockquote bq-primary">
                <!-- <p class="bq-title">User Name</p> -->
                please enter a username or take one of the suggestions below.
              </blockquote>

               <form v-on:submit.prevent="handleLoginFormSubmit()">
                <div class="md-form">
                  <!-- <i class="fa fa-envelope-o prefix"></i> -->
                  <input type="text" placeholder="Email / Username" id="email" v-model="login.email" class="form-control validate" required autofocus>
                  <div class="error-log"></div>
                </div>

                <div class="text-center">
                  <button id="load-btn" class="btn btn-deep-purple" disabled><set-loader></set-loader></button>
                  <button id="login-btn" class="btn btn-deep-purple">Login</button>
                </div>
              </form>


            </div>

            <!--Footer-->
            <div class="modal-footer">
              <!-- Stepers Wrapper -->
              <ul class="stepper stepper-horizontal">

                <!-- First Step -->
                <li class="active">
                  <a href="#!">
                                                    <span class="circle">1</span>
                                            </a>
                </li>

                <!-- Second Step -->
                <li class="">
                  <a href="#!">
                                                    <span class="circle">2</span>
                                            </a>
                </li>

                <!-- Third Step -->
                <li class="">
                  <a href="#!" disabled>
                                                    <span class="circle">3</span>
                                            </a>
                </li>

                <!-- Fourth Step -->
                <li class="">
                  <a href="#!" disabled>
                                                    <span class="circle">4</span>
                                            </a>
                </li>
              </ul>
            </div>
          </div>
          <!--/Form with header-->
        </div>
      </div>
    </div>
  </div>
  <!--/Intro content-->
</div>
<!--/.Mask-->
</template>

<script>
import Vue from 'vue'
import VueSocketIO from 'vue-socket.io';
import Chip from './helper/chipNoavatar.vue'
import Loader from './helper/loaders/multicolors/small.vue'
Vue.use(VueSocketIO, 'http://localhost.com:3000');
export default {
  components: {
    'set-chip': Chip,
    'set-loader': Loader
  },
  data() {
    return {
      login: {
        email: '',
      }
    }
  },
  created() {

  },
  sockets:{
    connect: function(){
      console.log('socket connected')
    },
    disconnect: function(){
      console.log('socket disconnected')
    },
    customEmit: function(val){
      console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
    }
  },
  mounted() {
    //do something after mounting vue instance
    // Data Picker Initialization
    // $('.datepicker').pickadate({
    //   min: new Date(1910, 0, 0),
    //   max: new Date(2012, 0, 0)
    // });
  },
  methods: {
    handleLoginFormSubmit() {
        // $("#login-btn").hide()
        // $("#load-btn").show()

        var postData = {
          client_id: 2,
          client_secret: this.$afrobukConfig.client_secret,
          grant_type: 'password',
          username: this.login.email,
          remember: true
        }

        this.$http.post("api/test", postData)
          .then(response => {

            console.log(response.body)
          })
          .catch(function(error) {
            console.log(error);
          });
    },

    clickButton: function(val){
        // $socket is socket.io-client instance
        this.$socket.emit('emit_method', val);
    }
  }
}
</script>

<style>
</style>

Please can anyone help me with this? Thanks

Answer 1

A few things. First I am going to assume that you are using the vue-cli webpack starter since you have a main.js and a .vue file.

You only need to use the socket.io middleware on the front end in your main.js. This will add a $socket property to all components that allows you to interact with the socket. You should remove the Vue.use(SocketIO) from Test.vue

Second, in main.js you have the connection set up as

Vue.use(VueSocketIO, 'http://localhost.com:8890');

when it should be

Vue.use(VueSocketIO, 'http://localhost:3000');

localhost.com is not your socket server. if your socket server is in dns or your host file it would be something like myserver.domain.com but since you are running the socket server and vue frontend on the same machine you can just use localhost or 127.0.0.1 (in most cases) as the server address

If you want to use port 8890, then you will need to change

server.listen(3000, function() {

to

server.listen(8890, function() {

in your server code.