Web聊天室消息[已读未读]的实现

聊天室快速访问
继上次完成聊天室的历史记录功能后，我又想着实现聊天记录的已读未读功能。（轻喷。。）

开始之前

首先我看了抖音和钉钉这两款应用的消息已读未读功能的呈现效果。首先是抖音，在聊天界面，给好友发送完消息后，消息界面的最右下角有一个“已发送”标记，这时候是属于对方未读，如果对方上线并别点开了和你的聊天界面，你和他的聊天界面上，那个“已发送”就变成了“已读”，所以抖音并不会每一条消息上面都显示“已读”或者“未读”。而钉钉，由于其专注于办公，这个已读未读功能就“变态”多了，每一条发出去的消息都会显示对方是已读还是未读。

学谁？

当然了，我只能通过抖音或者钉钉在功能上呈现出来的效果来结合自己掌握的知识来推断他们大概的实现过程，真正的实现可比想的复杂多了，所以我也是照葫芦画瓢，做一个能用的精简版已读未读功能。既然是照葫芦画瓢，那就学钉钉吧，做一个“变态版”，每一条消息都显示“已读”或者“未读”。

思考

A和B聊天，如果A发送一条消息给B，怎么知道B已读呢？当然是B收到消息后，发送一个“已读回执”，A接收到已读回执后，更新自己的UI，把“未读”改为“已读”。

啊！挺简单啊。。。

可，，可是，如果B不在线，或者B在线，但是没有打开和A的聊天界面，那B不也是