How to connect to socket.io from Vue.js component?

Question

I'm using the Vue-cli webpack template to generate my project about a chatroom with socket.io.

I have tested it with a simple instance when I click the button, the client-side will emit the params to the server-side. But the server-side haven't got anything when I clicked the button.

Could anyone tell me what's the matter with my coding? How can I do to solve that?

Thank you very much!

Here is the client-side

<template>
 <div id="app">
 <input type='button' value='button' @click='clickButton()'>
</div>
</template>

<script>
  import Vue from 'vue'
  import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://localhost:8070/');

  export default {
    name: 'app',
    data() {
      return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  sockets: {
    connect: function() {
     console.log('socket connected')
  },
  customEmit: function(val) {
     console.log('this method was fired by the socket server. eg: 
     io.emit("customEmit", data)')
    }
  },
  methods: {
     clickButton: function(val) {
     // $socket is socket.io-client instance
     this.$socket.emit('a', 12, 5);
  }
  }
  }
  </script>

Here is the server

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io');

server.listen(8070);

const ws = io.listen(server);

ws.on('connection',(sock)=>{
  sock.on('a',(num1,num2)=>{
    console.log(`${num1},${num2}`)
  })
})

Jacob Goh · Accepted Answer · 2018-05-03 07:19:55Z

4

  import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://localhost:8070/');

This should be done only once before creating Vue instance. Not in component.

Since you're using Vue-cli webpack, it should be done in main.js before new Vue({})

answered May 3, 2018 at 7:19

Jacob Goh

20.9k5 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jacob Goh Over a year ago

@Sylvia only the import and Vue.use. after that you can just use this.$socket in any component

Sylvia Over a year ago

Sorry, I am tried to write 'import' and 'Vue.use' in main.js and wrote sendMsg(){this.$socket.emit('a',12,5)} in App.vue, but it still console.log nothing...@Jacob Goh

Jacob Goh Over a year ago

@Sylvia i am not sure what's the exact code like on ur side. I tested out your code. it works. it's in github.com/jacobgoh101/SO-50148977-client. See github.com/jacobgoh101/SO-50148977-client/blob/master/src/… and github.com/jacobgoh101/SO-50148977-client/blob/master/src/… . I am able to get 12,5 in server console using ur exact server code.

JCraine Over a year ago

I can't thank you enough @JacobGoh for taking the time to set this up. I was stuck on this for a while before I used your repo example.

Emmanuel Ajako · Accepted Answer · 2018-08-11 16:59:32Z

0

import socketio from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
export const SocketInstance = socketio('http://localhost:8081');
 Vue.use(VueSocketIO, SocketInstance)

answered Aug 11, 2018 at 16:59

Emmanuel Ajako

11 bronze badge

2 Comments

L_J Over a year ago

While this code may answer the question, providing information on how and why it solves the problem improves its long-term value.

chharvey Over a year ago

While this code may answer the question, it is better to include the essential parts of the answer here and provide further explanation. Code-only answers can become invalid if the API changes.

jarisky · Accepted Answer · 2019-01-01 19:27:22Z

0

After importing the vue-socket.io package in main.js you may have to instantiate it as a new class

import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({ 
  connection: io('localhost') 
}))

per the docs https://www.npmjs.com/package/vue-socket.io

answered Jan 1, 2019 at 19:27

jarisky

1912 silver badges9 bronze badges

1 Comment

Krishnadas PC Over a year ago

It is initiating the connection on page reload only. If you navigate from one component to another it is not initiating the connection.

Collectives™ on Stack Overflow

How to connect to socket.io from Vue.js component?

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related