简介

本案例服务端以Nest官方模板，客户端以简单的Vue3+VueCli构建的（未详细说明如何构建，若有不会的可以自行查询网络资源），主要使用socket.io实现前后端简单通信。

一、Nest.js基本安装与使用

1.下载Nest.js脚手架

这里使用的是pnpm包管理工具

css 复制代码

$ pnpm i -g @nestjs/cli

2. 新建项目文件

project-name 设置成自己的项目名字

arduino 复制代码

$ nest new project-name

3.生成控制器、模块、微服务（逻辑层），这里以user为例

sql 复制代码

$ nest g module user
$ nest g controller user --no-spec
$ nest g service user --no-spec

4.代码规范配置

在根目录中找到并打开.prettierr文件写入如下：

js 复制代码

{
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "never",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": false
}

二、安装依赖项

1.在服务端中安装依赖项

安装socket.io至少需要 Node.js 10

ruby 复制代码

$ pnpm i @nestjs/websockets @nestjs/platform-socket.io

注：@nestjs/platform-socket.io（^10.2.4）中集成了socket.io 4.x

2.在客户端中安装依赖项

ruby 复制代码

 $ pnpm i [email protected]
 $ pnpm i [email protected]

注意：不同版本可能会有差异，具体查看官网的版本适配表这里附上客户端安装 | Socket.IO

三、socket.io的配置

1.服务端

使用官方cli工具在项目中生成一个socket模块

perl 复制代码

$ nest g res socket --no-spec

选择第四个websockets

是否生成增删改查的模块，我这里选择的是生成

自此就生成了如图的目录结构

以下是服务端具体代码

socket.gateway.ts 复制代码

import {
  WebSocketGateway,
  SubscribeMessage,
  MessageBody,
} from '@nestjs/websockets';
import { SocketService } from './socket.service';
import { CreateSocketDto } from './dto/create-socket.dto';
import { UpdateSocketDto } from './dto/update-socket.dto';
import { Socket } from 'dgram';
@WebSocketGateway(3001, {
  allowEIO3: true,//协议前后端版本要一致
  //后端解决跨域
  cors: {
    origin: 'http://localhost:8082',//这里不要写*，要写具体，否则会出现跨域问题
    credentials: true,
  },
})
export class SocketGateway {
  constructor(private readonly socketService: SocketService) {}
  msgList: string[] = [];
  @SubscribeMessage('socketTest')
  socketTest(@MessageBody() data: any) {
    // 转发信息
    let forwardMsg: String = '服务端=>客户端';
    return {
      //通过return返回客户端转发事件
      event: 'forward',
      data: forwardMsg, //data后面跟携带数据
    };
  }
  //接收并处理来自客户端的消息
  @SubscribeMessage('toServer')
  toServer(client: Socket, data: string) {
    console.log(data);
    client.emit('toServer', '这是一条发送给客户端的消息');
  }
 //以下代码本文不会介绍
 @SubscribeMessage('createSocket')
  create(@MessageBody() createSocketDto: CreateSocketDto) {
    return this.socketService.create(createSocketDto);
  }

  @SubscribeMessage('findAllSocket')
  findAll() {
    return this.socketService.findAll();
  }

  @SubscribeMessage('findOneSocket')
  findOne(@MessageBody() id: number) {
    return this.socketService.findOne(id);
  }

  @SubscribeMessage('updateSocket')
  update(@MessageBody() updateSocketDto: UpdateSocketDto) {
    return this.socketService.update(updateSocketDto.id, updateSocketDto);
  }

  @SubscribeMessage('removeSocket')
  remove(@MessageBody() id: number) {
    return this.socketService.remove(id);
  }
}

2.客户端

客户端配置代码如下

vue.config.js 复制代码

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//关闭语法检查
  //文件名哈希
  filenameHashing: true,
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  devServer: {
    port: 8082,
    open: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
    ,
    //设置代理，前端解决跨域
    proxy: {
      '/api': {
        target: 'http://localhost:8080/',//这里填入你要请求的接口的前缀
        ws: true,//代理websocked
        changeOrigin: true,//虚拟的站点需要更管origin
        secure: false,//是否https接口
        pathRewrite: {
          '^/api': ''//重写路径
        }
      }

    }
  },
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }]),
      config.output.globalObject('this')
  },
})