这是用户在 2024-9-10 21:34 为 https://juejin.cn/book/7226988578700525605/section/7398173829560074274?enter_from=course_center&utm_... 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?
课程
1
开篇词
已学完
学习时长: 1分58秒
2
给你 5 个学习 Nest 的理由,你会心动么
已学完
学习时长: 7分27秒
3
Nest 基础概念扫盲
已学完
学习时长: 11分42秒
4
快速掌握 Nest CLI
已学完
学习时长: 13分43秒
5
5 种 HTTP 数据传输方式
已学完
学习时长: 37分50秒
6
IoC 解决了什么痛点问题?
已学完
学习时长: 14分12秒
7
如何调试 Nest 项目
已学完
学习时长: 13分56秒
8
使用多种 Provider,灵活注入对象
已学完
学习时长: 18分42秒
9
全局模块和生命周期
已学完
学习时长: 15分37秒
10
AOP 架构有什么好处?
已学完
学习时长: 47分26秒
11
一网打尽 Nest 全部装饰器
已学完
学习时长: 24分16秒
12
Nest 如何自定义装饰器
已学完
学习时长: 15分52秒
13
Metadata 和 Reflector
已学完
学习时长: 23分27秒
14
ExecutionContext:切换不同上下文
学习时长: 21分48秒
15
Module 和 Provider 的循环依赖怎么处理?
已学完
学习时长: 11分11秒
16
如何创建动态模块
学习时长: 19分37秒
17
Nest 和 Express 的关系,如何切到 fastify
已学完
学习时长: 12分45秒
18
Nest 的 Middleware
已学完
学习时长: 18分42秒
19
RxJS 和 Interceptor
已学完
学习时长: 31分33秒
20
内置 Pipe 和自定义 Pipe
已学完
学习时长: 13分51秒
21
如何使用 ValidationPipe 验证 post 请求参数
学习时长: 17分55秒
22
如何自定义 Exception Filter
学习时长: 39分23秒
23
图解串一串 Nest 核心概念
已学完
学习时长: 3分55秒
24
接口如何实现多版本共存
学习时长: 20分22秒
25
Express 如何使用 multer 实现文件上传
已学完
学习时长: 32分59秒
26
Nest 如何使用 multer 实现文件上传
已学完
学习时长: 36分27秒
27
图书管理系统:需求分析和原型图
已学完
学习时长: 3分38秒
28
图书管理系统:用户模块后端开发
学习时长: 31分16秒
29
图书管理系统:图书模块后端开发
学习时长: 37分7秒
30
图书管理系统:用户模块前端开发
学习时长: 39分3秒
31
图书管理系统:图书模块前端开发--图书搜索
学习时长: 49分44秒
32
图书管理系统:图书模块前端开发--图书增删改
学习时长: 51分2秒
33
图书管理系统:项目总结
学习时长: 3分40秒
34
大文件分片上传
学习时长: 33分58秒
35
最完美的 OSS 上传方案
已学完
学习时长: 34分51秒
36
Nest 里如何打印日志?
学习时长: 21分50秒
37
为什么 Node 里要用 Winston 打印日志?
已学完
学习时长: 35分11秒
38
Nest 集成日志框架 Winston
学习时长: 31分32秒
39
通过 Desktop 学 Docker 也太简单了
已学完
学习时长: 13分13秒
40
你的第一个 Dockerfile
学习时长: 8分57秒
41
Nest 项目如何编写 Dockerfile
已学完
学习时长: 11分40秒
42
提升 Dockerfile 水平的 5 个技巧
已学完
学习时长: 24分53秒
43
Docker 是怎么实现的?
已学完
学习时长: 5分54秒
44
为什么 Node 应用要用 PM2 来跑?
已学完
学习时长: 13分31秒
45
快速入门 MySQL
学习时长: 24分13秒
46
SQL 查询语句的所有语法和函数
学习时长: 37分24秒
47
一对一、join 查询、级联方式
学习时长: 23分28秒
48
一对多、多对多关系的表设计
学习时长: 24分57秒
49
子查询和 EXISTS
学习时长: 17分33秒
50
SQL 综合练习
学习时长: 34分41秒
51
MySQL 的事务和隔离级别
学习时长: 10分13秒
52
MySQL 的视图、存储过程和函数
已学完
学习时长: 11分18秒
53
使用 Node 操作 MySQL 的两种方式
学习时长: 22分7秒
54
快速掌握 TypeORM
学习时长: 57分
55
TypeORM 一对一的映射和关联 CRUD
学习时长: 28分36秒
56
TypeORM 一对多的映射和关联 CRUD
学习时长: 25分55秒
57
TypeORM 多对多的映射和关联 CRUD
学习时长: 25分53秒
58
在 Nest 里集成 TypeORM
学习时长: 27分3秒
59
TypeORM 如何保存任意层级的关系?
学习时长: 34分53秒
60
为什么生产环境要用 TypeORM 的 migration 迁移功能?
学习时长: 28分7秒
61
Nest 项目里如何使用 TypeORM 迁移
学习时长: 34分9秒
62
如何动态读取不同环境的配置?
已学完
学习时长: 26分20秒
63
快速入门 Redis
已学完
学习时长: 18分25秒
64
在 Nest 里操作 Redis
学习时长: 13分59秒
65
为什么不用 cache-manager 操作 Redis?
已学完
学习时长: 29分15秒
66
两种登录状态保存方式:JWT、Session
学习时长: 8分13秒
67
Nest 里实现 Session 和 JWT
学习时长: 15分57秒
68
MySQL + TypeORM + JWT 实现登录注册
学习时长: 44分36秒
69
基于 ACL 实现权限控制
已学完
学习时长: 1小时43分
70
基于 RBAC 实现权限控制
已学完
学习时长: 1小时17分
71
基于 access_token 和 refresh_token 实现登录状态无感刷新
学习时长: 59分12秒
72
单 token 无限续期,实现登录状态无感刷新
已学完
学习时长: 40分17秒
73
使用 passport 做身份认证
已学完
学习时长: 38分18秒
74
passport 实现 GitHub 三方账号登录
已学完
学习时长: 17分13秒
75
passport 实现 Google 三方账号登录
已学完
学习时长: 36分22秒
76
为什么要使用 Docker Compose ?
学习时长: 26分46秒
77
Docker 容器通信的最简单方式:桥接网络
学习时长: 13分23秒
78
Docker 支持重启策略,是否还需要 PM2
已学完
学习时长: 10分31秒
79
快速掌握 Nginx 的 2 大核心用法
已学完
学习时长: 28分50秒
80
基于 Nginx 实现灰度系统
已学完
学习时长: 11分2秒
81
基于 Redis 实现分布式 session
已学完
学习时长: 24分58秒
82
Redis + 高德地图,实现附近的充电宝
已学完
学习时长: 1小时30分
83
用 Swagger 自动生成 api 文档
已学完
学习时长: 37分19秒
84
如何灵活创建 DTO
学习时长: 28分42秒
85
class- validator 的内置装饰器,如何自定义装饰器
学习时长: 31分2秒
86
序列化 Entity,你不需要 VO 对象
学习时长: 37分36秒
87
手写序列化 Entity 的拦截器
学习时长: 32分14秒
88
使用 compodoc 生成文档
已学完
学习时长: 10分53秒
89
Node 如何发邮件?
学习时长: 33分8秒
90
实现基于邮箱验证码的登录
已学完
学习时长: 1小时46分
91
定时任务 + Redis 实现阅读量计数
已学完
学习时长: 1小时18分
92
Nest 的 3 种定时任务
已学完
学习时长: 31分41秒
93
Nest 里如何实现事件通信?
学习时长: 22分26秒
94
HttpModule + pinyin 实现天气预报查询服务
学习时长: 16分36秒
95
如何记录请求日志
已学完
学习时长: 34分25秒
96
短链服务?自己写一个
已学完
学习时长: 48分30秒
97
Nest 实现 Server Sent Event 数据推送
学习时长: 20分13秒
98
用 minio 自己搭一个 OSS 服务
已学完
学习时长: 20分54秒
99
前端如何直传文件到 Minio
学习时长: 31分33秒
100
基于 sharp 实现 gif 压缩工具
学习时长: 35分40秒
101
大文件如何实现流式下载?
学习时长: 18分30秒
102
Puppeteer 实现爬虫,爬取 BOSS 直聘全部前端岗位
学习时长: 48分25秒
103
实现扫二维码登录
已学完
学习时长: 1小时16分
104
Nest 的 REPL 模式
已学完
学习时长: 13分38秒
105
实现 Excel 导入导出
学习时长: 44分43秒
106
如何用代码动态生成 PPT
学习时长: 35分26秒
107
如何拿到服务器 CPU、内存、磁盘状态
已学完
学习时长: 39分8秒
108
Nest 如何实现国际化?
学习时长: 31分30秒
109
会议室预订系统:需求分析和原型图
学习时长: 7分1秒
110
会议室预订系统:技术方案和数据库设计
已学完
学习时长: 11分1秒
111
会议室预订系统:用户管理模块--用户注册
学习时长: 56分42秒
112
会议室预订系统:用户管理模块--配置抽离、登录认证鉴权
学习时长: 1小时17分
113
会议室预订系统:用户管理模块-- interceptor、修改信息接口
学习时长: 48分9秒
114
会议室预订系统:用户管理模块--用户列表和分页查询
学习时长: 38分53秒
115
会议室预订系统:用户管理模块-- swagger 接口文档
学习时长: 37分14秒
116
会议室预订系统:用户管理模块-- 用户端登录注册页面
学习时长: 1小时10分
117
会议室预订系统:用户管理模块-- 用户端信息修改页面
学习时长: 1小时20分
118
会议室预订系统:用户管理模块-- 头像上传
学习时长: 25分22秒
119
会议室预订系统:用户管理模块-- 管理端用户列表页面
学习时长: 2小时4分
120
会议室预订系统:用户管理模块-- 管理端信息修改页面
学习时长: 1小时47分
121
会议室预订系统:会议室管理模块-后端开发
学习时长: 50分21秒
122
会议室预订系统:会议室管理模块-管理端前端开发
学习时长: 1小时8分
123
会议室预订系统:会议室管理模块-用户端前端开发
学习时长: 55分40秒
124
会议室预订系统:预定管理模块-后端开发
学习时长: 1小时44分
125
会议室预订系统:预定管理模块-管理端前端开发
学习时长: 1小时20分
126
会议室预订系统:预定管理模块-用户端前端开发
学习时长: 1小时34分
127
会议室预订系统:统计管理模块-后端开发
学习时长: 23分58秒
128
会议室预订系统:统计管理模块-前端开发
学习时长: 1小时4分
129
会议室预订系统:后端项目部署到阿里云
学习时长: 21分41秒
130
会议室预订系统:前端项目部署到阿里云
学习时长: 26分
131
会议室预定系统:用 migration 初始化表和数据
学习时长: 35分36秒
132
会议室预定系统:文件上传 OSS
已学完
学习时长: 34分17秒
133
会议室预定系统:Google 账号登录后端开发
学习时长: 52分11秒
134
会议室预定系统:Google 账号登录前端开发
学习时长: 8分13秒
135
会议室预定系统:后端代码优化
学习时长: 31分5秒
136
会议室预定系统:集成日志框架 winston
学习时长: 22分2秒
137
会议室预定系统:前端代码优化
学习时长: 21分51秒
138
会议室预定系统:全部功能测试
学习时长: 11分59秒
139
会议室预定系统:项目总结
学习时长: 12分54秒
140
Nest 如何创建微服务?
学习时长: 22分2秒
141
Nest 的 Monorepo 和 Library
学习时长: 18分48秒
142
用 Etcd 实现微服务配置中心和注册中心
学习时长: 37分30秒
143
Nest 集成 Etcd 做注册中心、配置中心
学习时长: 41分21秒
144
用 Nacos 实现微服务配置中心和注册中心
有更新
学习时长: 22分28秒
145
基于 gRPC 实现跨语言的微服务通信
学习时长: 24分52秒
146
快速入门 ORM 框架 Prisma
学习时长: 20分57秒
147
Prisma 的全部命令
学习时长: 27分4秒
148
Prisma 的全部 schema 语法
学习时长: 23分51秒
149
Primsa Client 单表 CRUD 的全部 api
学习时长: 58分25秒
150
Prisma Client 多表 CRUD 的全部 api
学习时长: 33分57秒
151
在 Nest 里集成 Prisma
已学完
学习时长: 21分8秒
152
为什么前端监控系统要用 RabbitMQ?
学习时长: 49分
153
基于 Redis 实现关注关系
学习时长: 53分33秒
154
基于 Redis 实现各种排行榜(周榜、月榜、年榜)
学习时长: 43分25秒
155
考试系统:需求分析
有更新
学习时长: 5分39秒
156
考试系统:技术方案和数据库设计
学习时长: 6分33秒
157
考试系统:微服务、Lib 拆分
有更新
学习时长: 27分4秒
158
考试系统;用户注册
有更新
学习时长: 47分
159
考试系统:用户登录、修改密码
有更新
学习时长: 53分16秒
160
考试系统:考试微服务
有更新
学习时长: 28分13秒
161
考试系统:登录、注册页面
有更新
学习时长: 1小时56分
162
考试系统:修改密码、试卷列表页面
有更新
学习时长: 52分29秒
163
考试系统:新增试卷、回收站
有更新
学习时长: 38分21秒
164
考试系统:试卷编辑器
有更新
学习时长: 58分38秒
165
考试系统:试卷回显、预览、保存
有更新
学习时长: 22分4秒
166
考试系统:答卷微服务
有更新
学习时长: 41分43秒
167
考试系统:答题页面
有更新
学习时长: 39分32秒
168
考试系统:自动判卷
有更新
学习时长: 30分4秒
169
考试系统:分析微服务、排行榜页面
有更新
学习时长: 32分54秒
170
考试系统:整体测试
有更新
学习时长: 9分28秒
171
考试系统:项目总结
已学完
学习时长: 12分44秒
172
用 Node.js 手写 WebSocket 协议
已学完
学习时长: 56分29秒
173
Nest 开发 WebSocket 服务
已学完
学习时长: 23分7秒
174
基于 Socket.io 的 room 实现群聊
学习时长: 33分6秒
175
聊天室:需求分析和原型图
已学完
学习时长: 5分18秒
176
聊天室:技术选型和数据库设计
学习时长: 8分43秒
177
聊天室:用户注册
学习时长: 52分32秒
178
聊天室:用户登录
学习时长: 37分7秒
179
聊天室:修改密码、修改信息
学习时长: 30分35秒
180
聊天室:好友列表、发送好友申请
已学完
学习时长: 39分16秒
181
聊天室:创建聊天室、加入群聊
已学完
学习时长: 41分31秒
182
聊天室:登录、注册页面开发
学习时长: 1小时29分
183
聊天室:修改密码、信息页面开发
学习时长: 1小时2分
184
聊天室:头像上传
已学完
学习时长: 32分13秒
185
聊天室:好友/群聊列表页面
学习时长: 50分18秒
186
聊天室:添加好友弹窗、通知页面
学习时长: 1小时53分
187
聊天室:聊天功能后端开发
已学完
学习时长: 34分10秒
188
聊天室:聊天功能前端开发
学习时长: 1小时56分
189
聊天室:一对一聊天
学习时长: 20分31秒
190
聊天室:创建群聊、进入群聊
学习时长: 1小时30分
191
聊天室:发送表情、图片、文件
已学完
学习时长: 1小时8分
192
聊天室:收藏
学习时长: 32分46秒
193
聊天室:全部功能测试
已学完
学习时长: 10分20秒
194
聊天室:项目总结
学习时长: 14分58秒
195
MongoDB 快速入门
学习时长: 28分59秒
196
使用 mongoose 操作 MongoDB 数据库
学习时长: 32分16秒
197
GraphQL 快速入门
学习时长: 29分27秒
198
Nest 开发 GraphQL 服务:实现 CRUD
学习时长: 39分19秒
199
GraphQL + Primsa + React 实现 TodoList
学习时长: 1小时50分
200
如何调试 Nest 源码?
已学完
学习时长: 18分3秒
201
小册总结
写作中...
juejin_logo copyCreated with Sketch.

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

    创建一个 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; }

    测试下:

    这样,点击切换不同聊天室的时候,就可以把聊天历史记录查出来展示了:

    前端代码

    后端代码

    总结

    这节我们基于 socket.io 实现了 websocket 服务的前后端。

    发送 joinRoom 消息的时候把 client socket 加入房间,房间名为 chatroomId

    发送 sendMessage 消息的时候把 message 发送给房间的所有用户。

    前端通过 socket.io-client 来实现。

    我们还做了聊天记录的保存,每个房间聊天的时候都会把聊天内容存到数据库里。

    这样,聊天功能的后端部分就完成了。

    留言
    评论 6
    avatar
    0 / 1000
    TS全栈 @dy:2070348584
    没有保存聊天室
    点赞
    3
    我看看
    点赞
    回复
    这个项目后面从头重写遍,还是得用外键
    点赞
    回复
    查看全部 3 条回复
    咋感觉没有保存chatroom?
    点赞
    1
    有啊,一对一和群聊都有
    点赞
    回复