web

【在线聊天室😻】前端进阶全栈开发🔥

项目效果

登录注册身份认证、私聊、聊天室

即时聊天演示.gif 项目前端React18仓库：github.com/mcmcCat/mmc…
项目后端Nestjs仓库：github.com/mcmcCat/mmc…
语雀上的笔记：http://www.yuque.com/maimaicat/t…

技术栈：
Nestjs企业级Node服务端框架+TypeOrm(Mysql)+JWT+Socket.IO🎉
React18/服务端渲染Nextjs+Redux-toolkit+styled-components🎉

前言

Nestjs 是一个用于构建高效可扩展的一个基于Node js 服务端应用程序开发框架。本文不过多赘述，网上的教程有很多。
（注意：对于聊天中user模块和message模块的接口可参考仓库代码，在这里只分析登录注册的身份认证）

下面可以放张图稍微感受一下，用nest写接口很方便。 @Post('auth/register')使用装饰器的方式，当你请求这个接口时，会自动调用下方函数AuthRegister。另外还可以加一大堆装饰器，用于生成swagger接口文档，做本地验证、jwt验证等等。

import {
Body,
ClassSerializerInterceptor,
Controller,
Get,
Post,
Req,
Res,
UseGuards,
UseInterceptors,

} from '@nestjs/common';
import { AppService } from './app.service';
import { ApiBearerAuth, ApiTags } from '@nestjs/swagger';
import { AuthService } from './auth/auth.service';
import { CreateUserDto } from './user/dto/create-user.dto';
import { LoginDTO } from './auth/dto/login.dto';
import { AuthGuard } from '@nestjs/passport';
// @Controller装饰器来定义控制器,如每一个要成为控制器的类，都需要借助@Controller装饰器的装饰
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}

@ApiTags('JWT注册')
@Post('auth/register')
async AuthRegister(@Body() body: CreateUserDto) {
return await this.appService.authRegister(body);

  }

@UseInterceptors(ClassSerializerInterceptor) //返回的数据中去除实体中被@Exclude()的字段
@UseGuards(AuthGuard('local')) //使用本地策略验证用户名和密码的正确性
@ApiTags('JWT登录')
@Post('auth/login')
async AuthLogin(@Body() body: LoginDTO, @Req() req) {
// 通过了本地策略证明身份验证通过
return await this.appService.authLogin(req.user);

  }

}

Nestjs中如何进行身份认证？

密码加密和生成token

我们可以跟着代码仓库，带有详细的注释，一步步地走
app.service.ts 负责定义注册authRegister和登录authLogin

在注册时，拿到用户输入的密码，使用**bcryptjs.hash()**将其转换为 hash加密字符串，并存入数据库
在（身份认证的）登录时，先进行校验用户登录信息是否正确在这里我们使用的是[passport-local](http://nestjs.inode.club/recipes/passport#%E5%AE%9E%E7%8E%B0-passport-%E6%9C%AC%E5%9C%B0%E7%AD%96%E7%95%A5)本地策略来验证，@UseGuards(AuthGuard('local'))这个装饰器会在此处的post请求@Post('auth/login')后进行拦截，去local.strategy.ts中进行validate检索出该用户的信息，然后我们使用**bcryptjs.compareSync()**将 **用户输入的密码 **与数据库中用 **hash加密过的密码 **进行解析对比，若登录信息正确则接着调用AuthLogin，进而调用（认证成功的）登录接口authService.login()，即向客户端发送登录成功信息并且是携带有**token**的，

async login(user: any) {
// 准备jwt需要的负载
const payload = { username: user.username, sub: user.id };
return {
code: '200',
// 配合存储着用户信息的负载 payload 来生成一个包含签名的JWT令牌(access_token)。。
access_token: this.jwtService.sign(payload), 
msg: '登录成功',

    };

  }

校验token合法性

那么这个token我们在哪里去拦截它进行校验呢？

那就要提到我们 nest 的guard（守卫）这个概念。其实就好比我们在vue项目中，封装路由前置守卫拦截路由跳转，去获取存储在localStorage的token一样。

在 nest 守卫中我们可以去获取到请求体req,从而获取到请求头中的Authorization字段，查看是否携带token，然后去校验token合法性，authService.verifyToken()中调用jwtService.verify()进行token的令牌格式校验、签名验证、过期时间校验，确保令牌的完整性、真实性和有效性

import {
ExecutionContext,
Injectable,
UnauthorizedException,

} from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { AuthGuard } from '@nestjs/passport';
import { NestExpressApplication } from '@nestjs/platform-express';
import { AppModule } from 'src/app.module';
import { AuthService } from './auth.service';
import { UserService } from 'src/user/user.service';

@Injectable()
export class JwtAuthGuard extends AuthGuard('jwt') {
constructor() {
super();


  }
async canActivate(context: ExecutionContext): Promise<any> {
const req = context.switchToHttp().getRequest();

// 如果是请求路由是白名单中的，则直接放行
if (this.hasUrl(this.whiteList, req.url)) return true;
try {
const accessToken = req.get('Authorization');

if (!accessToken) throw new UnauthorizedException('请先登录');

const app = await NestFactory.create<NestExpressApplication>(AppModule);
const authService = app.get(AuthService);
const userService = app.get(UserService);

const tokenUserInfo = await authService.verifyToken(accessToken);
const resData = await userService.findOne(tokenUserInfo.username);

if (resData[0].id) return true;

    } catch (e) {
console.log('1h 的 token 过期啦！请重新登录');
return false;

    }

  }
// 白名单数组
private whiteList: string[] = ['/auth/register','/auth/login'];

// 验证该次请求是否为白名单内的路由
private hasUrl(whiteList: string[], url: string): boolean {
let flag = false;
if (whiteList.indexOf(url) !== -1) {

      flag = true;

    }
return flag;

  }

}

在guard中，当我们return true时，好比路由前置守卫的next()，就是认证通过了放行的意思

当然，别忘了注册守卫，我们这里可以采用全局守卫的形式注册，在main.ts中app.useGlobalGuards(new JwtAuthGuard());

Socket.IO如何实现即时聊天？

Nest中WebSocket网关的作用

使用 @WebSocketGateway 装饰器配置 WebSocket 网关在 Nest.js 应用中具有以下作用：

提供 WebSocket 的入口点：WebSocket 网关允许客户端通过 WebSocket 协议与后端建立实时的双向通信。通过配置网关，你可以定义用于处理 WebSocket 连接、消息传递和事件的逻辑。
处理跨域请求：在 WebSocket 中，默认存在跨域限制，即只能与同源的 WebSocket 服务进行通信。通过设置 origin 选项，WebSocket 网关可以解决跨域请求问题，允许来自指定源的请求进行跨域访问。

关于Socket.IO是怎么通讯的可以看看官网给出的图

socketIO是通过事件监听的形式，我们可以很清晰的区分出消息的类型，方便对不同类型的消息进行处理，客户端和服务端双方事先约定好不同的事件，事件由谁监听，由谁触发，就可以把各种消息进行有序管理了

下面是一个简单的通讯事件示例：

import {
WebSocketGateway,
SubscribeMessage,
WebSocketServer,
MessageBody,
ConnectedSocket,

} 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 'socket.io';

const roomList = {};
let roomId = null;
let user = '';
@WebSocketGateway(3001, {
allowEIO3: true, // 开启后要求前后端使用的 Socket.io 版本要保持一致
//后端解决跨域
cors: {
// 允许具体源的请求进行跨域访问
origin: 'http://localhost:8080', //这里不要写*，要写 true 或者具体的前端请求时所在的域，否则会出现跨域问题
// 允许在跨域请求中发送凭据
credentials: true,

  },

})
export class SocketGateway {
constructor(private readonly socketService: SocketService) {}

@SubscribeMessage('ToClient')
ToClient(@MessageBody() data: any) {
// 转发信息
const forwardMsg: string = '服务端=>客户端';
return {
//通过return返回客户端转发事件
event: 'forward',
data: forwardMsg, //data后面跟携带数据

    };

  }

//接收并处理来自客户端的消息
@SubscribeMessage('toServer')
handleServerMessage(client: Socket, data: string) {
console.log(data + ' （让我服务端来进行一下处理）');

    client.emit('ToClient', data + '（处理完成给客户端）');

  }

}

私聊模块中的 socket 事件

通过使用client.broadcast.emit('showMessage') 和 client.emit('showMessage')，你可以实现多人实时聊天的功能。
当一个客户端发送一条消息时，通过 client.broadcast.emit('showMessage') 将该消息广播给其他客户端，让其他客户端可以接收到这条消息并进行相应的处理，从而实现多人实时聊天的效果。
同时，使用 client.emit('showMessage') 可以将消息发送给当前连接的客户端，这样当前客户端也会收到自己发送的消息，以便在界面上显示自己发送的内容。

@SubscribeMessage('sendMessage')
sendMessage(client: Socket) {
// 将该消息广播给其他客户端
client.broadcast.emit('showMessage');
// 将消息发送给当前连接的客户端
client.emit('showMessage');
return;

}

前端中会在UserList.tsx监听该事件showMessage，并触发更新信息逻辑

useEffect(() => {

    socket.on('showMessage', getCurentMessages)
return () => {

        socket.off('showMessage')

    }

})

房间模块中的 socket 事件

@SubscribeMessage('sendRoomMessage')
sendRoomMessage(client: Socket, data) {
console.log('服务端接收到了');

// // 将消息发送给指定房间内的所有客户端
this.socketIO.to(roomId).emit('sendRoomMessage', data);
return;

}

在需要发送消息给指定房间时，即我们需要在全局中找到指定房间，所以我们需要整个 WebSocket 服务器的实例

@WebSocketServer()
socketIO: Socket; //它表示整个 WebSocket 服务器的实例。它可以用于执行全局操作，如向所有连接的客户端广播消息或将客户端连接到特定的房间。

加入和退出房间的 socket API

// 加入房间
client.join(roomId);
// 退出房间
client.leave(roomId);

注意这个socket API的作用只是会被用于this.socketIO.to(roomId).emit('sendRoomMessage', data)时的指定to房间去发送信息，而对于房间人员的变动情况得自己准备一个对象来记录，如roomList

踩坑

socket实例的创建写在了函数组件内，useState中的变量的频繁改变，导致的组件不断重新渲染，socket实例也被不断创建，形成过多的连接，让websocket服务崩溃！！！

解决：
把socket实例的创建拿出来放在单独的文件中，这样在各个函数组件中若使用的话只用引用这一共同的socket实例，仅与websocket服务器形成一个连接

socket事件的监听没有及时的停止，导致对同一事件的监听不断叠加（如sys事件），当触发一次这一事件时，会同时触发到之前叠加的所有监听函数！！！
项目中的效果就是不断重新进入房间时，提示信息的渲染次数会递增的增加，而不是只提示一次

解决：
在离开房间后要socket.off('sys');要停止事件监听，另外最好是在组件销毁时停止所有事件的监听（此处为Next/React18，即项目前端的代码）

/* client */
useEffect(() => {
console.log('chat组件挂载');
// 连接自动触发

  socket.on('connect', () => {

    socket.emit('connection');
// 其他客户端事件和逻辑

  });
return () => {
console.log('chat组件卸载');

    socket.off();// 停止所有事件的监听 ！！！

  };

}, []);

/* server */
@SubscribeMessage('connection')
connection(client: Socket, data) {
console.log('有一个客户端连接成功', client.id);
// 断连自动触发

  client.on('disconnect', () => {
console.log('有一个客户端断开连接', client.id);
// 处理断开连接的额外逻辑

  });
return;

}

作者：麦麦猫
来源：juejin.cn/post/7295681529606832138

0

2024-08-27

0 个评论

要回复文章请先登录或注册