socket. IO cross domain stepping pit

One 、koa combination socket.io

Back end code ：

//  Introduce dependencies 
const koa = require("koa");
//  initialization koa
const app = new koa();
//  Turn on  http
var server = require("http").createServer(app.callback());
//  initialization  socket
const io = require("socket.io")(server, {
     cors: true });
//  monitor 
io.on("connection", (socket) => {
    
    console.log(" Someone linked ");
    // receive data 
    socket.on('send', function (data) {
    
        console.log(data);
        //  send data 
        socket.emit('resend', {
    
            msg: ` Hello ${
      data.msg}`,
            code: 200
        });
    });
});
server.listen(3000);

The front-end code ：

<template>
  <div class="hello">
    <input type="text" v-model="msg">
    <button @click="sendMsg"> send out </button>
  </div>
</template>

<script>
import io from 'socket.io-client'
export default {
    
  name: 'HelloWorld',
  data () {
    
    return {
    
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    
    const socket = io('ws://localhost:3000')
    this.socket = socket
    window.socket = socket
    socket.on('connect', function () {
    
      console.log(' The connection was established ！')
    })
    socket.on('disconnect', function () {
    
      console.log(' Disconnected ')
    })
    socket.on('resend', function (data) {
    
      console.log(data)
    })
  },
  methods: {
    
    sendMsg () {
    
      //  Send information to the server 
      this.socket.emit('send', {
    
        msg: this.msg
      })
    }
  }
}
</script>
<style scoped>

</style>

Two 、express combination socket.io

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http, {
     cors: true });

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

io.on('connection',function(socket) {
    
    console.log(" Someone linked ");
    // receive data 
    socket.on('send', function (data) {
    
        console.log(data);
        //  send data 
        socket.emit('resend', {
    
            msg: ` Hello ${
      data.msg}`,
            code: 200
        });
    });
});

http.listen(3000, function(){
    
    console.log('listening on *:3000');
});

The front-end code ：

<template>
  <div class="hello">
    <input type="text" v-model="msg">
    <button @click="sendMsg"> send out </button>
  </div>
</template>

<script>
import io from 'socket.io-client'
export default {
    
  name: 'HelloWorld',
  data () {
    
    return {
    
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    
    const socket = io('ws://localhost:3000')
    this.socket = socket
    window.socket = socket
    socket.on('connect', function () {
    
      console.log(' The connection was established ！')
    })
    socket.on('disconnect', function () {
    
      console.log(' Disconnected ')
    })
    socket.on('resend', function (data) {
    
      console.log(data)
    })
  },
  methods: {
    
    sendMsg () {
    
      //  Send information to the server 
      this.socket.emit('send', {
    
        msg: this.msg
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Be careful ：
If cross domain error is reported , You can refer to the following solutions ：

1. reinstall socket.io-client

npm i socket.io-client --save

2. stay vue Use in