美文网首页
无忧聊天室(二)

无忧聊天室(二)

作者: 谭少康__家族三期 | 来源:发表于2021-09-05 17:16 被阅读0次

这周实现了聊天室的登录、注册、群聊、以及私聊功能, 并将user信息,聊天记录存储到了本地数据库,以供判断和查询。

无忧聊天室聊天主界面

捋一下大致思路:

1. 注册功能

每一个用户在前端进行注册信息的时候,前端会通过websocket将注册的表单信息传输到后端,然后后端会经过一个判断,查询数据库中是否存在该名称的用户:

如果存在,后端也会通过websocket将错误代号传输给前端,然后前端收到之后会弹出一个警示框,然后清空用户所填的表单信息;

如果后端查询数据库之后不存在,则在数据库中添加一行新的用户信息,然后返回成功的代号,前端收到成功代号之后,给用户返回成功的信息提示。

2. 登录功能

和注册差不多,每一个用户在前端进行登录的时候,前端会通过websocket将登录的表单信息传输到后端,然后后端会经过一个判断,查询数据库中是否存在该名称的用户:

如果用户存在,则再判断输入的密码是否和数据库中存储的密码相同,如果相同,则再判断该用户是否已经在客户端登录,如果没有,则登录成功,如果已经登录,则给用户返回相应的提示信息,如果密码都不一致,则返回给用户相应的提示信息只有,清空密码,让用户重新输入。

如果用户不存在,则给用户提示信息,请注册之后再来吧~

3. 群聊功能

用户登录之后,后端会保存该用户的连接(conn)到后端的map中,一个userName对应一个user结构体,每一个user里面含有conn,这是群发消息的关键;

1. 然后用户从前端页面的输入框中输入聊天消息,点击发送

2. 后端会通过websocket接收到,然后返回后端处理过的消息给前端(这里就是在消息后面多了一个爱心❤,简单模拟了一下功能)

3. 最后后端通过遍历每一个map中的user.conn来给每一个用户发送信息。

4. 私聊功能

如果自己写的聊天室群聊和私聊都在一个界面处理的话,那么会简单很多很多,直接就是群聊功能里的遍历每一个用户变为单一 一个用户就行了,如果想给每一个私聊用户都添加一个界面,像PC端QQ那样,那就得考验一下前端的功底了。

群聊完成的比较快, 一到私聊这, 为了将用户体验感提升到最大,让我冥思苦想、边想边写了整整两天,最后我把群聊和私聊分开写了,群聊消息和私聊消息存在数据库中的位置也不一样

具体思路就是:当我打开一个新页面,点击发送的时候,我给后、端发送了一个状态,其实无论是登录,注册,群发,私发,我都会向后端发送一个状态(type),以表达我想做什么事情,当是私聊的事情时,前端返回的有以下内容(对方的名称,我输入的信息,私聊状态,我的名称),然后后端接收到之后,会做一些处理,然后给前端返回(我的名称,对方的名称,处理过的信息),以对方用户知晓,然后怎么在前端的不同界面显示不同的消息呢,这个时候得需要一个多维数组来存储各个页面的信息了,使用两个v-for,注意:不要使用两个一维数组进行嵌套v-for,否则每一个界面的内容都是一样的!显示信息的时候要遍历这个多维数组,如果姓名相互对应,则在相应的界面添加数组内容,进而就可以显示了。

添加新页面我是用的elementUI里面的组件,然后修改了一下里面的部分代码,

现在私聊方面我还没有完成的是,当我和张三这个页面删除之后,我在打开一下张三的私聊页面,会是一个空页面,没有之前的消息记录,当然这只是课外内容,不是阶段要求的,时间够的话还是可以试试的,毕竟QQ能做到的一些简单功能,给我们一些时间,我们一样可以做出来。

剩余的功能和需要优化的地方(下周完成)

1. 私发自动提醒

2. 数据库的设计优化

3. 用户上线提醒

4. 历史聊天记录的显示

撸起袖子加油干,必须得有一股子钻劲,才能将技术给吃透。


埋头向下赶路的同时,也要抬头看看前面的方向。

相关文章

  • 无忧聊天室(二)

    这周实现了聊天室的登录、注册、群聊、以及私聊功能, 并将user信息,聊天记录存储到了本地数据库,以供判断和查询。...

  • 无忧聊天室(一)

    欢迎来到无忧聊天室!!! 一个通过Vue来写的简单登录注册页面就完成啦,聊天室主页面下一周再来。 先说一下本周完成...

  • XMPP(二)创建群聊

    1.创建一个聊天室1.1 聊天室的创建。1.2 聊天室的保存1.3 代理方法2.加入聊天室2.1 成功加入聊天室2...

  • 网络编程基础(二)

    网络编程基础(二) 四、简易聊天室的实现 在下面我们以一个简易的聊天室Demo进行socket的深入理解。 (一)...

  • 练手项目:BullShit聊天室(第二天)

    2018年10月17日 4:00:00 BullShit聊天室开发的第二天昨天已经完成了聊天室的基本雏形,包括(显...

  • 无忧宫里话无忧(二)

    文/摄影 风之舞 无忧宫为波茨坦最著名的霍亨索伦家族宫殿。1745年,根据普鲁士国王腓特烈二世的草图,设计洛可可式...

  • iOS - 融云RTC功能梳理

    一. 功能介绍 一个文字聊天室(如图下半部分) 一个语音聊天室(语音房)(上半部分) 五个麦位 可上麦下麦 二. ...

  • 无忧剑(二)

    进入客栈后,映入眼帘的是一桌丰盛的酒席。此时座位上已有三人,骑士、黑衣人和一名身穿道袍、容貌清癯的中年男子。中...

  • 网易云多人音视频加聊天室的创建流程

    第一步,创建一个聊天室,聊天室可以提供一个基础的文字聊天环境,请求自己的APP服务器 第二步,创建多人会话房间,调...

  • WebRTC在线聊天室

    前言 之前写过关于websocket的文章《基于WebSocket的在线聊天室(一)(二)》,这次换成WebRTC...

网友评论

      本文标题:无忧聊天室(二)

      本文链接:https://www.haomeiwen.com/subject/rrvjwltx.html