创建socket.io服务，vue3使用vue-3-socket.io进行连接

在ubuntu服务器上创建一个js文件

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.send('<h1>这是一个socket服务</h1>');
});
 
io.on('connection',function(socket) {
  //接收数据
  socket.on('login', function (obj) {                
      console.log(obj.username);
      // 发送数据
      socket.emit('relogin', {
        msg: `你好${obj.username}`,
        code: 200
      });  
  });
});
 
http.listen(8848, function(){
  console.log('listening on *:8848');
});

ubuntu启动服务

node xxx.js

vue安装依赖

npm install vue-3-socket.io --save
npm install socket.io-client --save

vue进行连接，在main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueSocketIO from 'vue-3-socket.io'
import io from 'socket.io-client';
const socketio = new VueSocketIO({
    debug: true,
    connection: io('http://xxxx:8848',{ transports : ['websocket'] }),
	//http:自己的服务：端口
    extraHeaders: {"Access-Control-Allow-Origin": '*'},
});
const app = createApp(App)
app.use(store)
app.use(router)
app.use(socketio)
app.mount('#app')

在vue页面上监听接受的

mounted(){
    this.sockets.subscribe('relogin', (data) => {
      console.log("获取到他发给我的",data)
    })
}

按钮进行发送

send(){
      console.log("我发送消息给服务端");
      //发送信息给服务端
      this.$socket.emit('login',{
        username: 'ajj',
        password: '123456'
      });
 },

最终效果