如何在Nestjs和Vue3中使用socket.io示例详解

# 安装Nest脚手架
$ npm i -g @nestjs/cli
# 创建一个nest后端项目
$ nest new project-name
# 启动项目
$ yarn start:dev

# 服务端初始目录结构:
src
 ├── app.controller.spec.ts
 ├── app.controller.ts
 ├── app.module.ts
 ├── app.service.ts
 └── main.ts

# 安装vite脚手架
$ npm init vite@latest
# 创建一个vue前端端项目
$ npm init vite@latest my-vue-app -- --template vue
# 启动项目
$ yarn dev

# 客户端初始目录结构:
src
 ├── assets
 ├── components
 ├── App.vue
 └── main.ts

# 安装官方提供的socket.io包
$ yarn add @nestjs/websockets @nestjs/platform-socket.io

# 安装官方提供的socket.io包
$ yarn add socket.io-client

# 使用官方cli工具在项目中生成一个websocket模块。
$ nest g res socketTest

src
 ├── socket-test
      ├── dto
      ├── entities
      ├── socket-test.gateway.spec.ts
      ├── socket-test.gateway.ts
      ├── socket-test.module.ts
      ├── socket-test.service.spec.ts
      ├── socket-test.service.ts
 ├── app.controller.spec.ts
 ├── app.controller.ts
 ├── app.module.ts
 ├── app.service.ts
 └── main.ts

import {
  WebSocketGateway,
  SubscribeMessage,
  MessageBody,
} from "@nestjs/websockets";
import { SocketTestService } from "./socket-test.service";
import { CreateSocketTestDto } from "./dto/create-socket-test.dto";
import { UpdateSocketTestDto } from "./dto/update-socket-test.dto";
/** @WebSocketGateway装饰器可传入一些配置选项，如下面的示例：
 *   @WebSocketGateway(80, {
 *     namespace: 'events',
 *     transports: ['websocket']
 *     cors: {
 *        origin: '*'
 *     },
 *     ...
 *   })
 **/
@WebSocketGateway({ cors: true })
export class SocketTestGateway {
  constructor(private readonly socketTestService: SocketTestService) {}
  @SubscribeMessage("createSocketTest")
  create(@MessageBody() createSocketTestDto: CreateSocketTestDto) {
    return this.socketTestService.create(createSocketTestDto);
  }
  @SubscribeMessage("findAllSocketTest")
  findAll() {
    return this.socketTestService.findAll();
  }
  @SubscribeMessage("findOneSocketTest")
  findOne(@MessageBody() id: number) {
    return this.socketTestService.findOne(id);
  }
  @SubscribeMessage("updateSocketTest")
  update(@MessageBody() updateSocketTestDto: UpdateSocketTestDto) {
    return this.socketTestService.update(
      updateSocketTestDto.id,
      updateSocketTestDto
    );
  }
  @SubscribeMessage("removeSocketTest")
  remove(@MessageBody() id: number) {
    return this.socketTestService.remove(id);
  }
}

src
 ├── assets
 ├── components
 ├── plugins
      ├── Socket.io.ts
 ├── App.vue
 └── main.ts

// Socket.io.ts
import { io } from "socket.io-client";
export default {
  install: (app, { connection, options }) => {
    const socket = io(connection, options);
    app.config.globalProperties.$socket = socket;
    app.provide("socket", socket);
  },
};

// main.ts

import { createApp } from "vue";
import App from "./App.vue";

import Socketio from "/@/plugins/Socket.io";

const app = createApp(App);

app.use(Socketio, {
  connection: "/* 这里填写服务端地址，如 http://localhost:3000 */",
  options: {
    autoConnect: false, //关闭自动连接
    // ...其它选项
  },
});

app.mount("#app");

// 服务端 socket-test.gateway.ts
@SubscribeMessage('socketTest')
socketTest(@MessageBody() data: any) {
  Logger.log(data) // {test: '测试数据'}
  return {
    msg1: '测试1',
    msg2: '测试2',
  }
}
----------------------------------
// 客户端 HelloWorld.vue
import { ref, onMounted, inject } from 'vue';
import { Socket } from 'socket.io-client';
const socket = inject('socket') as Socket;
socket.emit('socketTest', {test: '测试数据'}, (data) => {
  console.log(data) // { msg1: '测试1', msg2: '测试2' }
});
onMounted(() => {
  socket.connect(); //连接socket服务器
});

// 服务端 socket-test.gateway.ts
@SubscribeMessage('socketTest')
socketTest(@MessageBody() data: any) {
  return {
    event: 'socketTest2',
    data
  }
}
----------------------------------
// 客户端 HelloWorld.vue
import { ref, onMounted, inject } from 'vue';
import { Socket } from 'socket.io-client';
const socket = inject('socket') as Socket;
socket.emit('socketTest',{ msg1: '测试1', msg2: '测试2' })
socket.on('socketTest2', (data) => {
  console.log(data) // { msg1: '测试1', msg2: '测试2' }
});
onMounted(() => {
  socket.connect(); //连接socket服务器
});

// 服务端 socket-test.gateway.ts
@SubscribeMessage('socketTest')
socketTest(@MessageBody() data: any, @ConnectedSocket() clinet: Socket) {
  clinet.broadcast.emit('socketTest2', data);
}
----------------------------------
// 客户端-1 HelloWorld.vue
import { ref, onMounted, inject } from 'vue';
import { Socket } from 'socket.io-client';
const socket = inject('socket') as Socket;
socket.emit('socketTest',{ msg1: '测试1', msg2: '测试2' })
socket.on('socketTest2', (data) => {
  console.log(data) // { msg1: '测试1', msg2: '测试2' }
});
onMounted(() => {
  socket.connect(); //连接socket服务器
});
----------------------------------
// 客户端-2 Layout.vue
import { ref, onMounted, inject } from 'vue';
import { Socket } from 'socket.io-client';
const socket = inject('socket') as Socket;
socket.on('socketTest2', (data) => {
  console.log(data) // { msg1: '测试1', msg2: '测试2' }
});
onMounted(() => {
  socket.connect(); //连接socket服务器
});