一、技术栈

在建立隐蔽聊天室时你是否担心安全问题？我们的技术栈可以给你答案：vue3 + Pina + Typescript + webSocket + Nest + Mysql + Redis + prisma + socket.io

说到体验地址。摸鱼聊天室

至于源码，黄同学的个人站点

• 为了避免聊天被发现，可以通过 Esc 键来实现内容的切换。从效果如下来看，

二、效果图

三、前端功能点

主题色修改

你是否厌倦了千篇一律的主题色？我们的聊天室支持自定义主题色，让你的聊天体验更加个性化。

import { Color } from 'tvision-color';type ModeType = 'dark' | 'light';type TColorToken = Record;export const useSettingStore = defineStore('setting',{ 说到state，: State => { mode的观点是。'light',colorList: {} },getters: { displayMode: : ModeType => { return this.mode;} },changeBrandTheme { // ... } })

暗黑模式切换

你是否喜欢在暗黑模式下聊天？我们的聊天室支持暗黑模式切换，让你的聊天体验更加舒适。

随机头像

你是否想要一个独一无二的头像？我们的聊天室支持随机头像，让你的聊天体验更加有趣。

webSocket 使用

你是否担心聊天室的安全性？我们的聊天室使用 webSocket 技术，让你的聊天体验更安全。

import { io } from 'socket.io-client';// 启动 websocket startSocket { if { this.socket = io;this.socket.on => { this.socket.emit;// ... })，} }

四、后端功能点

redis 使用

你是否担心验证码的安全性？我们的聊天室使用 redis 技术，让你的验证码更安全。

// redis.module.ts import { Global,Module } from '@nestjs/common';import { RedisService } from './redis.service';import { createClient } from 'redis';老实说，@Global @Module({ providers:。exports: }) export class RedisModule {}

prisma 使用

你是否担心数据库的安全性？我们的聊天室使用 prisma 技术，让你的数据库更安全。

// prisma.module.ts import { Global,Module } from '@nestjs/common';import { PrismaService } from './prisma.service';@Global @Module({ providers:,exports:。}) export class PrismaModule {}

权限校验

你是否担心使用者权限的安全性？我们的聊天室使用权限校验技术，让你的使用者权限更安全。

// auth.guard.ts import { CanActivate。ExecutionContext,Inject,Injectable,UnauthorizedException } from '@nestjs/common';老实说，import { Reflector } from '@nestjs/core';import { JwtService } from '@nestjs/jwt';// ... @Injectable export class AuthGuard implements CanActivate { // ... }

发送邮件

你是否想要在好友申请时收到邮件通知？我们的聊天室支持发送邮件，让你的好友申请更加及时。

// email.service.ts import { Injectable } from '@nestjs/common';import { createTransport,Transporter } from 'nodemailer';@Injectable export class EmailService { transporter: Transporter;constructor { this.transporter = createTransport({ 说到host，'smtp.qq.com'。port: 587,secure: false,auth: { 至于user，'',// 发送者的邮箱地址 从pass来看，'',// 发送者的 token },});} async sendMail { await this.transporter.sendMail({ 说到from。{ 从name来看，'',// 主题 address: '',// 发送者的邮箱地址 },to,subject,html,});怎么说呢，} }

socket 使用

你是否想要实时接收消息？我们的聊天室使用 socket 技术，让你的消息更加实时。

// chat.gateway.ts import { MessageBody。SubscribeMessage,WebSocketGateway,WebSocketServer } from '@nestjs/websockets';按理说，import { ChatService } from './chat.service';import { Server,Socket } from 'socket.io';// ... @WebSocketGateway export class ChatGateway { // ... }