vue3-多人聊天室角色识别（全栈）_vue3聊天室

作者：Monodyee | 2024-04-03 12:30:15

踩

vue3聊天室

文章目录

主要技术栈
目的
实现步骤

主要技术栈

主要技术栈是vue3，springboot，websocket，element-plus

目的

主要目的是复习和梳理

实现步骤

1. 前端发送信息

发送信息，包装信息，转json，用socket发送到后端，使输入栏清空
在这里插入图片描述

2. 后端处理数据

后端解析json，因为是socket接口，所以不能用@requestbody解析json，用以下方式解析json
设置发送时间为当前时间，然后执行mapper数据库插入
广播给所有的正在链接的socket，广播数据是json数据，带着user，和content，以便识别到底哪个客户端发送的信息
在这里插入图片描述

3. 前端渲染数据

在后端执行sendMessage方法后，前端执行回调，onmessage，将后端json转为对象，使用store来进行数据的插入管理，参数分别为content和username

在这里插入图片描述

4. store

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/355544