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

更新時(shí)間：2023年08月08日 10:36:25 作者：余以為

這篇文章主要為大家介紹了如何在Nestjs和Vue3中使用socket.io示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

簡(jiǎn)介

本文服務(wù)端以 Nest 官方模板，客戶端以 Vue3 + Vite 官方模板為例，簡(jiǎn)單介紹如何在 Nest 項(xiàng)目中使用 socket.io 與 Vue3 的客戶端進(jìn)行即時(shí)通訊。

初始化項(xiàng)目

服務(wù)端

# 安裝Nest腳手架
$ npm i -g @nestjs/cli
# 創(chuàng)建一個(gè)nest后端項(xiàng)目
$ nest new project-name
# 啟動(dòng)項(xiàng)目
$ yarn start:dev

創(chuàng)建完畢后：

# 服務(wù)端初始目錄結(jié)構(gòu):
src
 ├── app.controller.spec.ts
 ├── app.controller.ts
 ├── app.module.ts
 ├── app.service.ts
 └── main.ts

客戶端

# 安裝vite腳手架
$ npm init vite@latest
# 創(chuàng)建一個(gè)vue前端端項(xiàng)目
$ npm init vite@latest my-vue-app -- --template vue
# 啟動(dòng)項(xiàng)目
$ yarn dev

創(chuàng)建完畢后：

# 客戶端初始目錄結(jié)構(gòu):
src
 ├── assets
 ├── components
 ├── App.vue
 └── main.ts

安裝所需依賴

服務(wù)端

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

客戶端

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

注意：

Nest v7及以下版本依賴于socket.io v2，Nest v8依賴于socket.io v4，請(qǐng)注意查看版本的兼容性。
服務(wù)端和客戶端socket.io依賴包版本必須保持一致，否則將有可能無(wú)法連接或者報(bào)跨域等錯(cuò)誤。

配置 websocket

服務(wù)端

# 使用官方cli工具在項(xiàng)目中生成一個(gè)websocket模塊。
$ nest g res socketTest

自動(dòng)生成模塊之后，項(xiàng)目目錄是這樣的：

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

打開(kāi)socket-test.gateway.ts文件，內(nèi)容如下：

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裝飾器可傳入一些配置選項(xiàng)，如下面的示例：
 *   @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 目錄下創(chuàng)建 plugins 文件夾，于其中新建一個(gè) Socket.io.ts 插件，

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

在 Socket.io.ts 文件中寫(xiě)入下面的內(nèi)容，

// 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 文件中引入進(jìn)來(lái)，掛載到 app 上，

// 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: "/* 這里填寫(xiě)服務(wù)端地址，如 http://localhost:3000 */",
  options: {
    autoConnect: false, //關(guān)閉自動(dòng)連接
    // ...其它選項(xiàng)
  },
});

app.mount("#app");

然后在需要的時(shí)候使用socket.connect()手動(dòng)連接 socket。

實(shí)際運(yùn)用

Nest 在使用@SubscribeMessage裝飾的方法中，會(huì)return一個(gè)確認(rèn)信息，我們可以直接返回 JSON 格式或是字符串格式數(shù)據(jù)，比如我們添加一個(gè)測(cè)試事件：

// 服務(wù)端 socket-test.gateway.ts
@SubscribeMessage('socketTest')
socketTest(@MessageBody() data: any) {
  Logger.log(data) // {test: '測(cè)試數(shù)據(jù)'}
  return {
    msg1: '測(cè)試1',
    msg2: '測(cè)試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: '測(cè)試數(shù)據(jù)'}, (data) => {
  console.log(data) // { msg1: '測(cè)試1', msg2: '測(cè)試2' }
});
onMounted(() => {
  socket.connect(); //連接socket服務(wù)器
});

有時(shí)候可能需要在客戶端發(fā)送消息后，讓服務(wù)端把消息再轉(zhuǎn)發(fā)給客戶端的另一個(gè)事件中，我們可以在 return 的時(shí)候增加一個(gè)指定事件 event，然后在客戶端進(jìn)行監(jiān)聽(tīng)，比如：

// 服務(wù)端 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: '測(cè)試1', msg2: '測(cè)試2' })
socket.on('socketTest2', (data) => {
  console.log(data) // { msg1: '測(cè)試1', msg2: '測(cè)試2' }
});
onMounted(() => {
  socket.connect(); //連接socket服務(wù)器
});

上面雖然解決了客戶端與服務(wù)端相互通信的問(wèn)題，但實(shí)際上我們的項(xiàng)目可能不會(huì)這么簡(jiǎn)單，有可能是socket.id不同的多個(gè)客戶端，這種情況下我們就需要使用@nestjs/websockets包導(dǎo)出的@ConnectedSocket()裝飾器，獲取到 socket.io 的實(shí)例，使用官方提供的一些 Api 來(lái)定義事件，以廣播事件為例：

// 服務(wù)端 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: '測(cè)試1', msg2: '測(cè)試2' })
socket.on('socketTest2', (data) => {
  console.log(data) // { msg1: '測(cè)試1', msg2: '測(cè)試2' }
});
onMounted(() => {
  socket.connect(); //連接socket服務(wù)器
});
----------------------------------
// 客戶端-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: '測(cè)試1', msg2: '測(cè)試2' }
});
onMounted(() => {
  socket.connect(); //連接socket服務(wù)器
});

以上就是如何在Nestjs和Vue3中使用socket.io示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Nestjs Vue3使用socket.io的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: