主要技术栈
主要技术栈是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
文章来源:https://www.toymoban.com/news/detail-515044.html
4. store
文章来源地址https://www.toymoban.com/news/detail-515044.html
到了这里,关于vue3-多人聊天室角色识别(全栈)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!