evansy / mallchatweb

mallchat的前端项目，是一个既能购物又能聊天的电商系统。以互联网企业级开发规范的要求来实现它，电商该有的购物车，订单，支付，推荐，搜索，拉新，促活，推送，物流，客服，它都必须有。持续更新ing

MallChat-抹茶

一个既能购物又能即时聊天的电商系统。致力于打造互联网企业级项目的最佳实践。
电商该有的购物车、订单、支付、推荐、搜索、拉新、促活、推送、物流、客服、它都必须有。持续更新 ing～

项目导航

1. 快速体验地址：抹茶聊天首页
2. 后端项目仓库：MallChat
3. 项目视频记录：Bilibili 地址 全程分享项目进度，功能选型的思考，同时征集迭代建议。
4. 项目学习文档：10w+字，保姆级教学路线，环境搭建、核心功能、基建轮子、接口压测、问题记录、一个不落。可点击抹茶项目文档查看（内含 500 人交流大群）
5. 项目交流群：对抹茶感兴趣的，可以加入交流群。你的每一个举动，都会决定项目未来的方向。无论是提意见做产品经理，还是找 bug 做个测试人员，又或者加入开发小模块成为 contributer，都欢迎你的加入。
6. 码云仓库：https://gitee.com/Evansy/MallChatWeb （国内访问速度更快）

项目介绍

抹茶聊天是一个 IM 项目，通过 netty 实现和前端的 websocket 连接。内含微信扫描登录，成员列表，上下线动画，消息列表，消息互动，还有很多实用的小轮子列如 aop 日志，分布式锁注解，频控注解，ip 解析归属地等，持续更新中。。。

项目演示

项目启动及部署

• 环境: node 16.18+, 包管理工具 pnpm (安装完 node 执行 npm i pnpm -g 即可);
• 安装依赖: clone 工程之后，执行 pnpm i
  • npm 安装报错, 命令后加参数 npm i --ignore-scripts 忽略 scripts 相关依赖即可解决
  • 推荐使用 pnpm, 安装依赖不会有 因为网络而失败 的问题
• 启动: 按 F5 即可自动执行 pnpm run dev 并且打开浏览器
• 部署
  • 部署到本地：执行 pnpm build 构建完成后把 dist 文件夹 放到服务器，并配置 nginx 即可
  • 自动 CI/CD：通过 github actions 在代码提交到 GitHub 之后自动构建并部署到服务器, 详细参考可查看 deploy.yml

C 端项目

• 前端项目地址：https://github.com/Evansy/MallChatWeb
• 项目演示地址：https://mallchat.cn (记住 抹茶.cn，下次工作摸鱼可直接打开)

技术选型

前端技术

技术	说明	官网
Vue3	前端流行开发框架	https://cn.vuejs.org
Pinia	vue3 官方推荐状态管理框架	https://pinia.vuejs.org
vue-router	Vue 的官方路由	https://router.vuejs.org
TypeScript	让 JS 具备类型声明	https://www.typescriptlang.org/
Element Plus	缓基于 vue3 的组件库	https://element-plus.gitee.io
Alova	轻量级的请求策略库，用起来负担比 axios 小	https://alova.js.org/
vite	极速的前端打包构建工具	https://cn.vitejs.dev
pnpm	速度快、节省磁盘空间的软件包管理器	https://www.pnpm.cn

后端技术

见 MallChat

后端环境搭建

在项目目录下的application.yml修改自己的启动环境spring.profiles.active = test然后找到同级文件application-test.properties，填写自己的环境配置。星球成员提供一套测试环境配置，可直连

项目文档

保姆级教学路线，环境搭建、核心功能、性能优化、埋点上报、问题记录、项目亮点一个不落。点击 项目文档

更多有趣功能在持续更新中。。。

star 趋势图

贡献

贡献之前请先阅读 行为准则 和 贡献指南。感谢所有为 MallChat 做过贡献的人!

前端:

后端:

优秀贡献者:

类别	用户	贡献模块
前端		图片、语音、文件类型消息收发
		消息互动操作(撤回、点赞、删除)
		虚拟列表
后端		DFA敏感词检测
		OpenAI聊天机器人
		Ac自动机敏感词检测
		限流编程式
		握手认证

公众号

微信搜索 阿斌 Java 之路 关注我的原创公众号，后台回复「抹茶」即可加入抹茶交流群，一些做过公司万人群聊，高并发的小伙伴都在里面讨论方案。公众号也会经常更新项目相关的文档，等你来撩~~

mallchatweb's Issues

[Bug]: @指定人后不输入内容后回车，会不显示对应@人的名称

BUG 描述
@指定人后不输入内容后回车，会不显示对应@人的名称

预期效果
@指定人后可强制要求输入内容，否则不进行发送，或者显示指定人的名称

• 系统: [e.g. iOS]
• 系统版本: [e.g. iOS 16.3]
• 浏览器: [e.g. chrome 62]

feature: input 输入框输入@ 能快速@在线成员

feature ::
input 输入框输入@ 能快速@在线成员

[Bug]: 上传了一个mp3文件，实际被解析为一段语音，预期效果是一个文件。

BUG 描述
上传了一个mp3文件，实际被解析为一段语音，

预期效果
预期效果是一个可下载的mp3文件

信息

• 系统: [iOS]
• 系统版本: [macOS Monterey 12.1]
• 浏览器: [chrome 114.0.5735.198（正式版本） (arm64)]

[Bug]: 换行需要按两次快捷键，才能起到一次换行的作用

BUG 描述
在当前行的最后面通过 shift + enter 快捷键换行时，需要按两次换行键，才能起到换行的作用，当光标在文字的中间或者当前行为空时，没有这个问题，按一次换行即可生成一个新行

预期效果
按一次 shift + enter ，文字即可换行

信息

• 系统: [e.g. iOS] macos
• 系统版本: [e.g. iOS 16.3] 12.5.1
• 浏览器: [e.g. chrome 62] chrome 115

[Bug]: 聊天列表徽章文字显示到了聊天窗口外

BUG 描述
在聊天窗口下鼠标移动到徽章上的时候，滑动鼠标轮，会发现徽章文字顺着滑动移动到了窗口外。

预期效果
当徽章滑出窗口时，徽章文字隐藏。

信息

• 系统: [e.g. win]
• 系统版本: [e.g. win 10]
• 浏览器: [e.g. chrome 114.0.5735.199]

后期是否考虑支持，图文混排？

[Bug]: 链接类消息导致XSS问题

BUG 描述
当消息里存在url的情况下服务器会解析url标题并返回前段渲染

前端在渲染的时候使用了v-html并未过滤会导致XSS

MallChatWeb/src/components/RenderMsg.tsx

Lines 11 to 23 in 422af43

	const clean = DOMPurify.sanitize(props.text, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
	// 再替换标签，保证用户输入的内容是干净的
	let result = clean
	for (const [url, title] of Object.entries(props.urlMap)) {
	result = result?.replace(
	url,
	`<a rel="noopener noreferrer nofollow" target="_blank" class="msg-content-link" style="color: ${
	props.isMe ? '#fff' : 'var(--color-primary)'
	};" href="${url.includes('http') ? url : `//${url}`}">${title}</a>`,
	)
	}
	return <div v-html={result} />

处理逻辑先过滤了原始消息内容，然后进行链接的render，但url标题是可控的

临时修复方案

import { defineComponent } from 'vue'
import DOMPurify from 'dompurify'

const sanitize = (text: string) => DOMPurify.sanitize(text, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })

export default defineComponent({
  props: ['urlMap', 'text', 'isMe'],
  setup(props) {
    return () => {
      if (!props.urlMap || Object.keys(props.urlMap).length === 0) return props.text

      // 先过滤所有标签
      let result = sanitize(props.text)

      // 再替换标签，保证用户输入的内容是干净的
      for (const [url, title] of Object.entries(props.urlMap)) {
        result = result?.replace(
          url,
          `<a rel="noopener noreferrer nofollow" target="_blank" class="msg-content-link" style="color: ${
            props.isMe ? '#fff' : 'var(--color-primary)'
          };" href="${url.includes('http') ? url : `//${url}`}">${sanitize(title)}</a>`,
        )
      }
      return <div v-html={result} />
    }
  },
})

此方法也是可以被bypass的，完全安全需要修改render方式，不使用v-html

[Bug]: 艾特功能，无法自动弹出用户列表

BUG 描述
手动在输入框内输入 "@" 字符后，能自动弹出用户列表，但是点击表情右边的"@"按钮时，无法自动弹出用户列表

预期效果
能自动弹出用户列表

信息

• 系统: [e.g. Windows 11]
• 系统版本: [e.g. 11]
• 浏览器: [e.g. chrome 114.0.5735.199]

[Bug]: 加载更多消息后，虚拟列表定位到加载时的那条消息位置有误差。

BUG 描述
加载更多消息后，定位到加载时的那条消息位置有误差。

预期效果
加载更多消息完成后，消息准确定位到加载时的那条消息

信息

• 系统: [iOS]
• 系统版本: [iOS 12.1]
• 浏览器: [chrome 114.0.5735.106（正式版本） (arm64)]

bug视频
https://github.com/Evansy/MallChatWeb/assets/23380976/8deff4f1-e0bb-4494-af7b-3c2c9c2df548

问题初步分析：

MallChatWeb/src/views/Home/components/ChatList/index.vue

Lines 31 to 39 in 29b8c26

	// 到顶部时触发函数 记录旧的滚动高度，加载更多消息后滚动回加载时那条消息的位置
	const onTotop = throttle(async () => {
	const oldScrollTop = virtualListRef.value.getScrollSize()
	await chatStore.loadMore()
	nextTick(() => {
	const newScrollTop = virtualListRef.value.getScrollSize() - oldScrollTop
	virtualListRef.value.scrollToOffset(newScrollTop)
	})
	}, 1600)

当触顶事件onToTop事件内计算得出的newScrollTop都没有问题，但是

virtualListRef.value.scrollToOffset(newScrollTop)

会导致虚拟列表scrollHeight改变，从而使定位出现误差。

以下是验证代码

const onTotop = throttle(async () => {
  const oldScrollTop = virtualListRef.value.getScrollSize()
  await chatStore.loadMore()
  nextTick(() => {
    const scrollHeight1 = virtualListRef.value.getScrollSize()
    console.log(scrollHeight1)
    const newScrollTop = virtualListRef.value.getScrollSize() - oldScrollTop
    virtualListRef.value.scrollToOffset(newScrollTop)
  }).then(() => {
    nextTick(() => {
      setTimeout(() => {
        const scrollHeight2 = virtualListRef.value.getScrollSize()
        console.log(scrollHeight2)
      }, 1000)
    })
  })
}, 1600)```

结果发现 scrollHeight1 和 scrollHeight2 并不相等。

[功能建议] 点击二维码调用微信授权

在手机端点击二维码调用微信授权

消息撤销

[Feature]: 当消息行数过大时，提供按钮交互，用户可选择展开和收起

想法内容
简洁而清晰的描述 您想改进的地方.

[Perf]: xgplayer依赖体积优化

包体积中西瓜视频过大、需改造为按需载入

[Feature]: 以后有考虑做electron的客户端么

想法内容
简洁而清晰的描述 您想改进的地方.

feature: 滚动条在无hover和不滚动时进行隐藏

pc端在组件无hover时隐藏，移动端在不滚动时隐藏

[Bug]: 引用消息 字数多了 , 图标直接没了. 如图

BUG 描述

[Question]: 是否规范化仓库项目管理

Discussions

• 项目缺少 husky
• commit时没有执行代码检查、eslint自动化，提交PR时由于格式化配置不同导致变动代码变化很多
• 无conventional-changelog 标准。没有遵循语义化版本，没有生成changlog的Action

当消息列表过多造成内存占用问题

当msg-item越来越多，内存占用也会越来越多，如何解决这一问题

1、当消息只有20条时内存情况

2、当消息有1700条的内存情况

🎈具有高渲染性能和高效的大数据列表
🎈希望这个库可以帮助到你vue3-virtual-scroll-list

[Topic]: 快来参与领任务吧~，如果你想提 Issue 参与开源 PR，请先点我

如果您想参与 PR，或者想提 issue

请先务必看看这里 https://github.com/users/Evansy/projects/1，
看看 Todo 面板中，是否有人已经领取了相关任务并且在做了;

如果你有新的想法🤔
可以在下面留言，可以根据大家的点赞或者内部讨论流入 Todo;

如何参与
如果 Project 里面的 Bug/Feature 你也想参与进来改动，可以在下方留言，我给你添加 Project 权限，你就可以领任务啦~

---

非常感谢大家的关注和参与~

[Feature]: unplugin-auto-import包的使用疑问🤔️

看到项目使用unplugin-auto-import，这个可以帮助开发者API自动导入～

见到已配置好ElementPlus 但是并没有对Vue全家桶进行一个配置 配置好就不需要在手动导入vue一系列api，多处文件还是手动形式导入

// 配置前
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

// 配置后
const count = ref(0)
const doubled = computed(() => count.value * 2)

还是说有其他想法作考虑

[Bug]: H5模式下点击头像没有适应H5模式

BUG 描述
H5模式下点击头像没有适应H5模式。

预期效果
H5模式下点击头像能够适应H5模式，看到弹框所有内容。

信息

• 浏览器: [e.g. chrome 62]
  

使用 only-allow 限定包管理工具为 pnpm

[Feature]: icon统一封装

[Bug]: 当我谷歌浏览器下方有下载的内容的时候,聊天记录不能向上滚动

BUG 描述

发现一个bug ,当我谷歌浏览器下方有下载的内容的时候,聊天记录不能向上滚动,翻看以往聊天消息

QQ20230625-140752-HD.mp4

预期效果
简洁而清晰的描述你预期的效果.

信息

• 系统: [e.g. mac os]
• 系统版本: [e.g. 12.5.1 (21G83)]
• 浏览器: [版本 114.0.5735.133（正式版本） (x86_64)]

[Feature]: 支持移动端

想法内容
简洁而清晰的描述 您想改进的地方.
如果能支持移动端的话，就更好了。现在移动端浏览器打开这个网站，样式乱了

头像和名称没有对齐

用户列表中头像和名称没有对齐

[Feature]: qq登录

想法内容
简洁而清晰的描述 您想改进的地方.

[Bug]: url点击无法跳转

BUG 描述
如果url没有携带http或者https的协议，前端能够识别url，但是无法匹配。

预期效果
对于没有协议的url，前端可以根据判断是否含有http，没有默认加上http://前缀，这样即可跳转

信息

• 系统: [e.g. iOS]
• 系统版本: [e.g. iOS 16.3]
• 浏览器: [e.g. chrome 62]

[Bug]: 聊天记录滚动bug

BUG 描述
打开页面后有几率聊天记录往上滚动不了，页面会自动往下滚动，抢手动滚动的操作.但是一旦按F12后就恢复正常了
bug录屏:20230608135159.webm

预期效果
解决页面自动抢“往下滚动的操作”.

信息

• 系统: [MacOS]
• 系统版本: [MacOs 13.4]
• 浏览器: [Chrome 113.0.5672.126（正式版本） (arm64)]

[Feature]: 建议把 消息操作 改为 菜单形式

想法内容

效果如图

鼠标悬浮到 消息上 (移动端是点击消息体), 显示 菜单图标按钮
点击后, 展开菜单

[Bug]: “@”功能有些问题

BUG 描述
“@”功能有些问题，具体表现已经录屏了。

信息

• 系统: [e.g. iOS]
• 系统版本: [e.g. iOS 16.3]
• 浏览器: [e.g. chrome 62]
• Microsoft​ Edge 2024-05-30

MallChat.-.-.Microsoft.Edge.2024-05-30.mp4

[Feature]: 修改 MallChat 的整体布局以及UI风格

想法内容
简洁而清晰的描述 您想改进的地方.

是否考虑采用另类的布局风格，以及将整体UI风格迁移至 FlatUI (Material + Fluent)

[Feature]: 建议把 "点赞" 与 "点踩" 大于0 的时候 , 数量给显示出来

想法内容

比如图片中的这样