0
点赞
收藏
分享

微信扫一扫

vue3-多人聊天室角色识别(全栈)

伊人幽梦 2023-06-29 阅读 82

文章目录


在这里插入图片描述

主要技术栈

主要技术栈是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

在这里插入图片描述

举报

相关推荐

0 条评论