vue+nodejs使用socket通信问题

socket基本语法都会使用，但是不知道如何将vue前端使用socket.io-client与node(使用express创建的node后端)联系起来，如果可以的话，想顺便看一下你们在vue中封装的以及在node中封装的socket

要将Vue前端使用Socket.IO客户端与Node.js后端联系起来，您需要遵循以下步骤：

在Vue项目中安装Socket.IO客户端：可以使用npm包管理器，在Vue项目中安装Socket.IO客户端依赖项，例如：npm install socket.io-client
在Vue项目中创建Socket.IO客户端：在Vue组件中创建Socket.IO客户端实例，并连接到Node.js服务器，例如：

import io from 'socket.io-client';
const socket = io('http://localhost:3000'); // 连接Node.js服务器

在Node.js后端中安装并使用Socket.IO：可以使用npm包管理器，在Node.js项目中安装Socket.IO依赖项，例如：npm install socket.io。然后，在Node.js项目中创建Socket.IO服务器并监听连接事件，例如：

const server = require('http').createServer();
const io = require('socket.io')(server);
io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});
server.listen(3000);

在Vue项目中使用Socket.IO客户端发送和接收消息：在Vue组件中，使用Socket.IO客户端实例发送和接收消息，例如：

// 发送消息
socket.emit('message', 'hello world');

// 接收消息
socket.on('message', (data) => {
  console.log(data);
});

在Vue中封装Socket.IO客户端可以通过创建Vue插件来实现，例如：

import io from 'socket.io-client';

const SocketPlugin = {
  install(Vue, options) {
    const socket = io(options.url);
    Vue.prototype.$socket = socket;
  },
};

export default SocketPlugin;

然后，在Vue项目中使用该插件：

import Vue from 'vue';
import SocketPlugin from './socket-plugin';

Vue.use(SocketPlugin, { url: 'http://localhost:3000' });

在Node.js中封装Socket.IO服务器可以通过创建模块来实现，例如：

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

module.exports = {
  start: (port) => {
    io.on('connection', (socket) => {
      console.log('a user connected');
      socket.on('disconnect', () => {
        console.log('user disconnected');
      });
    });
    server.listen(port, () => {
      console.log(`Socket.IO server is running on port ${port}`);
    });
  },
};

然后，在Node.js项目中使用该模块：

const socketIO = require('./socket-io-server');
socketIO.start(3000);

请看👉 ：用node搭建简易服务器vue和socket.io完成一对多聊天功能
除此之外, 这篇博客: vue+nodejs+express使用socket.io并解决跨域问题中的 前端vue 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

main.js中：

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(
  new VueSocketIO({
    debug: true,
    connection: SocketIO('http://127.0.0.1:3000'),//服务端地址
    extraHeaders: {
      'Access-Control-Allow-Credentials': true
    },
    allowEIO3: true,
    vuex: {}
  })
)

使用的vue文件中：

export default {
  mounted() {
    // 发送信息给服务端
    this.$socket.emit('login', {
      username: 'ljl',
      password: '123'
    })
    // 接收服务端的信息
    this.sockets.subscribe('relogin', data => {
      console.log(data)
    })
  }
}