Nest 通关秘籍 - zxg_神说要有光

写完注册、登录、添加好友、群聊列表等前后端代码后，我们继续来开发聊天的功能。

创建一个 websocket 模块：


css
复制代码
nest g resource chat --no-spec

安装 websocket 的包：


css
复制代码
npm i --save @nestjs/websockets @nestjs/platform-socket.io socket.io

改下 ChatGateway：


javascript
复制代码
import { MessageBody, SubscribeMessage, WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { ChatService } from './chat.service';
import { Server, Socket } from 'socket.io';

interface JoinRoomPayload {
  chatroomId: number
  userId: number
}

interface SendMessagePayload {
  sendUserId: number;
  chatroomId: number;
  message: {
    type: 'text' | 'image',
    content: string
  }
}

@WebSocketGateway({cors: { origin: '*' }})
export class ChatGateway {
  constructor(private readonly chatService: ChatService) {}

  @WebSocketServer() server: Server;

  @SubscribeMessage('joinRoom')
  joinRoom(client: Socket, payload: JoinRoomPayload): void {
    const roomName = payload.chatroomId.toString();

    client.join(roomName)

    this.server.to(roomName).emit('message', {
      type: 'joinRoom',
      userId: payload.userId
    });
  }

  @SubscribeMessage('sendMessage')
  sendMessage(@MessageBody() payload: SendMessagePayload): void {
    const roomName = payload.chatroomId.toString();

    this.server.to(roomName).emit('message', { 
      type: 'sendMessage',
      userId: payload.sendUserId,
      message: payload.message
    });
  }
}

监听 joinRoom、sendMessage 消息。

joinRoom 把 client socket 加入房间，房间号为直接用聊天室 id。

sendMessage 接收并广播消息到对应房间。

message 的格式为 type、content，type 可以是 text、image，也就是可以发送文字、图片。

注意，这里要开启 cors 跨域，websocket 也是有跨域问题的。

在前端项目里引入下 socket.io


lua
复制代码
npm install socket.io-client

然后改下 src/pages/Chat/index.tsx


javascript
复制代码
import { Input } from "antd";
import { useEffect, useRef, useState } from "react";
import { io, Socket } from "socket.io-client";

interface JoinRoomPayload {
    chatroomId: number
    userId: number
}

interface SendMessagePayload {
    sendUserId: number;
    chatroomId: number;
    message: Message
}

interface Message {
    type: 'text' | 'image'
    content: string
}

type Reply  = {
    type: 'sendMessage'
    userId: number
    message: Message
} | {
    type: 'joinRoom'
    userId: number
}

export function Chat() {

    const [messageList, setMessageList] = useState<Array<Message>>([]);
    const socketRef = useRef<Socket>();

    useEffect(() => {
        const socket = socketRef.current = io('http://localhost:3005');
        socket.on('connect', function() {
    
            const payload: JoinRoomPayload = {
                chatroomId: 1,
                userId: 1
            }
    
            socket.emit('joinRoom', payload);
    
            socket.on('message', (reply: Reply) => {
                if(reply.type === 'joinRoom') {
                    setMessageList(messageList => [...messageList, {
                        type: 'text',
                        content: '用户 ' + reply.userId + '加入聊天室'
                    }])
                } else {
                    setMessageList(messageList => [...messageList, reply.message])    
                }
            });
    
        });
    }, []);

    function sendMessage(value: string) {
        const payload2: SendMessagePayload = {
            sendUserId: 1,
            chatroomId: 1,
            message: {
                type: 'text',
                content: value
            }
        }

        socketRef.current?.emit('sendMessage', payload2);
    }

    return <div>
        <Input onBlur={(e) => {
            sendMessage(e.target.value);
        }}/>
        <div>
            {messageList.map(item => {
                return <div>
                    {item.type === 'image' ? <img src={item.content}/> : item.content }
                </div>
            })}
        </div>
    </div>
}

连接服务端的 ws 服务，发送 joinRoom 消息。

然后监听服务端的 message。

如果传过来的是 joinRoom 的消息，就添加一条用户 xxx 加入聊天室的消息到 messageList。

否则就把传过来 message 加到 messageList。

创建一个 Input，当 blur 的时候发送消息到服务端。

测试下：

现在两个 socket 都在 chatroomId 为 1 的房间里，可以相互发消息。

而用户所在的聊天室会有不同的 chatroomId，不同登录用户会有不同的 userId

把 chatroomId 和 userId 换成真实的，不就能在不同房间聊天了么？

这部分是前端逻辑，我们下节再写。

接下来我们实现下聊天记录的保存，也就是把聊天室里的消息存到数据库表里。

在 prisma 的 schema 添加这个 model


kotlin
复制代码
model ChatHistory {
  id Int @id @default(autoincrement())
  content String @db.VarChar(500)
  //聊天记录类型 text:0、image:1、file:2
  type Int
  chatroomId Int
  senderId Int
  createTime DateTime @default(now())
  updateTime DateTime @updatedAt
}

执行 migrate dev 生成迁移 sql 并更新 client 代码：


css
复制代码
npx prisma migrate dev --name chat-history

没啥问题。

然后创建 chat-history 模块：


css
复制代码
nest g resource chat-history --no-spec

先改下 ChatHistoryService，实现 list、add 方法：


javascript
复制代码
import { Inject, Injectable } from '@nestjs/common';
import { ChatHistory } from '@prisma/client';
import { PrismaService } from 'src/prisma/prisma.service';

export type HistoryDto = Pick<ChatHistory, 'chatroomId' | 'senderId' | 'type' | 'content'>;

@Injectable()
export class ChatHistoryService {
    @Inject(PrismaService)
    private prismaService: PrismaService;

    async list(chatroomId: number) {
        return this.prismaService.chatHistory.findMany({
            where: {
                chatroomId
            }
        });
    }

    async add(chatroomId: number, history: HistoryDto) {
        return this.prismaService.chatHistory.create({
            data: history
        });
    }

}

我们把 ChatHistoryService 暴露出去，让别的模块可以调用：

在 ChatModule 引入下：

发消息的时候就可以保存聊天记录了：


javascript
复制代码
@Inject(ChatHistoryService)
private chatHistoryService: ChatHistoryService

@SubscribeMessage('sendMessage')
async sendMessage(@MessageBody() payload: SendMessagePayload) {
  const roomName = payload.chatroomId.toString();

  await this.chatHistoryService.add(payload.chatroomId, {
    content: payload.message.content,
    type: payload.message.type === 'image' ? 1 : 0,
    chatroomId: payload.chatroomId,
    senderId: payload.sendUserId
  });

  this.server.to(roomName).emit('message', { 
    type: 'sendMessage',
    userId: payload.sendUserId,
    message: payload.message
  });
}

再聊会天：

这时候聊天内容就保存到了数据库里：

我们还要加一个查询聊天记录的接口：


javascript
复制代码
import { Controller, Get, Query } from '@nestjs/common';
import { ChatHistoryService } from './chat-history.service';

@Controller('chat-history')
export class ChatHistoryController {
  constructor(private readonly chatHistoryService: ChatHistoryService) {}

  @Get('list')
  async list(@Query('chatroomId') chatroomId: string) {
    return this.chatHistoryService.list(+chatroomId);
  }
}

postman 里调用下：

我们顺带把 user 信息查出来返回：


javascript
复制代码
async list(chatroomId: number) {
    const history = await this.prismaService.chatHistory.findMany({
        where: {
            chatroomId
        }
    });

    const res = [];
    for(let i = 0; i < history.length; i++) {
        const user = await this.prismaService.user.findUnique({
            where: {
                id: history[i].senderId
            },
            select: {
                id: true,
                username: true,
                nickName: true,
                email: true,
                createTime: true,
                headPic: true
            }
        });
        res.push({
            ...history[i],
            sender: user
        });
    }
    return res;
}