The first step is to install dependencies

npm install vue-socket.io --save
Copy the code

The second step is introduced in main.js

import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
    debug: true,
    connection: 'http://metinseylan.com:1992',
    vuex: {
        store,
        actionPrefix: 'SOCKET_', // Set two prefixes for vuex mutationPrefix:'SOCKET_'
    },
    options: { path: "/my-app/" } //Optional options
}))
Copy the code

Step 3: Use push messages to the background in the component, connect to the socket,

Sockets: {// Check whether the socket was successfully renderedconnect() {
      console.log("Link successful");
    },
    disconnect(){
      console.log("Disconnect"); },// Detect socket disconnectionreconnect(){
      console.log("Relink"); }, // The client receives the message(data) {this.$notify({
        title: 'New news',
        message: data,
        type: 'warning',
        duration:10000
      });
      console.log("data", data); // Received message}},Copy the code

The client sends messages to the server

this.$socket.emit("register"."The client needs help." );
Copy the code

The use of vuex

	state: {
	  message:' '}, mutations: { SOCKET_message:(state, data)=>{ state.message = data; }}Copy the code

Github github.com/MetinSeylan…