Document

最近做个需求使用到ws，[nest官网ws](https://docs.nestjs.cn/8/websockets)，记录一下遇到。 ## 创建项目 ``` nest new appdemo ``` ## 安装 ``` npm i --save @nestjs/websockets ``` 在 `Nest` 中，网关只是一个用 `@WebSocketGateway()` 装饰器注解的类。从技术上讲，网关与平台无关，这使得它们在创建适配器之后就可以与任何 `WebSockets` 库兼容。有两个开箱即用的WS平台:[socket.io](https://github.com/socketio/socket.io)和[ws](https://github.com/websockets/ws)。你可以选择最适合你需要的 ## 使用 src目录下创建ws.gateway.ts ``` import { ConnectedSocket, MessageBody, SubscribeMessage, WebSocketGateway, WsResponse } from "@nestjs/websockets"; import { Socket } from "dgram"; // 注意ws端口号不能和http端口号一样，否则会冲突 @WebSocketGateway(3002) export class WsStartGateway { // SubscribeMessage里面的字符串代表类型，就是send event的值 @SubscribeMessage('events') handleEvent( @MessageBody() data: string, @ConnectedSocket() client: Socket, ): WsResponse { console.log('ws hello data', data); const event = "events"; return { event, data: { msg: 'ws 收到信息后返回' }, }; } } ``` 需要注意： - ws端口号不能和http端口号一样，否则会冲突。WebSocketGateway(port)写端口号 - SubscribeMessage里面的字符串代表类型，就是send event的值 app.modules.ts中添加到providers ``` import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { WsStartGateway } from './ws.gateway'; @Module({ imports: [], controllers: [AppController], providers: [AppService, WsStartGateway], }) export class AppModule { } ``` main.ts ``` import { NestFactory } from '@nestjs/core'; import { WsAdapter } from '@nestjs/platform-ws'; import { AppModule } from './app.module'; const port = '3000'; async function bootstrap() { const app = await NestFactory.create(AppModule); // 全局配置跨域 app.enableCors({ // 允许的请求源 origin: '*' }); app.useWebSocketAdapter(new WsAdapter(app)); await app.listen(port); console.log(`Application is running on: ${await app.getUrl()}`); } bootstrap(); ``` ## 前端使用 index.html ``` Document ``` 注意： - ws.send() 参数是string,需要JSON.stringify。event的值要和SubscribeMessage值保持一致 ![img1.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9af29663a19b44c380becddc47812d64~tplv-k3u1fbpfcp-watermark.image?) ![img2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e39e919acc54087a6e78d839b484705~tplv-k3u1fbpfcp-watermark.image?)