socket 数据连接

1、首先安装npm 包  （个人习惯用4.4.1版本的，用其他版本可能会导致emit发送不成功）

npm install [email protected]

2、在想发送的vue文件中（onMounted定义soctet）

import Socket from "../utils/socket.js";


//socket 回调函数
const socketBack = (res) => {
    console.log(res, "socket1111111111111");
};

//给后台发请求
const startSocket = () => {
    let project = store.state.project;
    console.log(project, "project");
    $socket.socketStart(project.id);
};


let $socket = null;
onMounted(() => {
    // 链接socket
    $socket = new Socket(socketBack);
});

3、创建soctet文件  socket.js  (emit用于发送，on用于接收)

import io from "socket.io-client";
import { ElMessage } from "element-plus";
export default class Socket {
  constructor(callback) {
    this.callback = callback;
    
    this.url = 'http://192.168.1.2:8200';
    this.socket = this.socketLink();
    console.log( this.url," this.url");

  }
  // 建立链接
  socketLink() {
    let socket = io(this.url, {
      query: {},
      transports: ["websocket", "polling"],
    });
    socket.connected = true; // 开启链接
     socket.on("hello", (res) => {
      console.log(res,"res12131");
      ElMessage({
        message: "链接成功！",
        type: "success",
      });
    });

    // 接受后台返回信息
    socket.on("projIoMsg", (res) => {
      this.callback({
        type: "projIoMsg",
        data: JSON.parse(res),
      });
    });
    return socket;
  }
    socketStart(id) {
     this.socket.emit("projReady", {
       projId: id,
     }); 
  }
}