温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准
00:00
大家好,在上一节课呢,给大家介绍了web socket的一个基本概念,那对这个webcket长链接有了一个基本的了解之后,那这节课我们就开始使用web socket来写一个聊天室的一个功能啊,那这个是我写好的一个案例,先给大家做一个演示,首先啊,一进来这个页面之后呢,要求我们输入这个昵称和这个头像,那我们来输入一个Tom,选择第一个头像加入聊天室,然后这里会通知谁加入了聊天室,然后左侧会显示已经在聊天室的一个成员列表啊那接下来为了演示这个聊天功能呢,我再来复制一下,再来开一个啊客户端,那这个呢,我们就统称为是客户端啊呃,再来一个用户登录进来,哎,叫丽丽,选第二个头像加入聊天室,哎,可以看到左侧就变成了两个人,那这边呢,显示丽丽加入聊天室,同时在另一个客户端也会通知这个谁加入短天室,并且这个左侧的这个呃,用户列表是啊,直接也会改变对吧,大家可以看到我之前在这里我加入进来的时候。
01:00
哦,这里我没有去刷新页面对不对,是不是服务端主动向客户端去发,发送了这个消息啊,发送了用户列表,以及发送了这个通知,谁进入了这个聊天室对吧?好,那接下来呢,我来尝试聊天啊,现在呢,我是在第一个啊,就是汤姆这个客户端,哎,发送这个消息啊,我说这个啊,你好,然后来发送啊,这个是我的这个聊天啊,我就发出去了,那我们来看看Li丽能不能收到呢?啊可以看到Lily是可以收到的,对吧?你看Tom发的你好,包括我这个头像都是对的啊,然后这里呢,我们做这个丽丽也可以回复啊,你好呀,那这边呢,他也能收到这个聊天,对吧,大家都可以看到,我没有刷新任何页面对不对啊,那这个就是数据的一个双向通讯,我们既然客户端能向服务器去推送这个数据,调这个数据,那服务器呢,也能向我们去啊传递这个数据对吧?好,那还有什么功能呢?还有一个私聊的功能,那为了演示私聊呢,我就再来开一个客户端啊。来一个Bob啊,选择啊这个头像,好,这时候这边就变成三个人了啊,Bob加02:30,同时其他的所有的客户端,这个用户的这个列表以及啊这个通知都会能同步收到,看到了吧,现在我们已经有了三个客户端对吧?那我来演示一下私聊的功能,现在我是第一个啊,第一个用户是汤姆啊,那我给谁私聊呢?给这个新来的这个爆裹私聊啊,然后我点击它的时候,这边诶会显示一个私聊包,然后这里我来发送这个消息啊。
02:28
你来了啊,包裹回撤也可以发送啊发送,那接下来我来看一下第三个是包裹的这个是不是收到这个私聊的信息,你来了,但是我来看第二个莉丽的,他就收不到这个私聊信息,那这是私聊的一个功能啊,那为什么我们在讲这个长链接的时候,会喜欢拿这个聊天室来做案例呢?因为他特别的适合来讲这个,哎,长链街这一块啊,他涉及到这个消息的这个广播,以及消息的这个啊,一对一的一个私聊等等,那如果我们把这个聊天室这个案例给写熟了,我们在写其他的一些场链接的一些场景应用的话,就比较简单了啊好,那这个呢,是我们这个项目的一个啊,展示在接下来的啊课程中呢,我们将一一的来实现这些功能,我们先从最简单的做起啊,那关于页面这一块呢,已经提前给大家写好了啊,这个静态样,那到时候我们写到的时候,直接把这个页面拿到我们的项目中就可以了啊,这是一个啊准备好的一个静态页啊好,那这小节先到这里。
我来说两句