00:00
大家好,在上节课我们完成了加入聊天室的功能啊,好,我们把这个注释写一下,这个是。啊,显示啊,谁谁加入聊天室啊,并显示聊天页面啊。然后把这个登录页啊,叫这个加入这个页面给关闭,然后把这个聊天页给显示。那接下来这节课我们来处理一个什么事情呢?就是处理一下左边的这个成员列表。那我们知道。在服务端,我们通过这个数组存储了所有的这个用户信息啊,那所以呢,每来多来一个用户,那这里呢,这个用户信息就会多一个,对吧?啊,那我们。怎么样把这个用户的数据发送给啊我们的客户端呢,哎,那也得通过这个事件监听的一个方法啊,那我们来。在这里在登录之后啊。
01:00
这里是。哎,通知啊,人行广播。加入聊天室。然后啊广播啊,用户列表就是上面这个是把这个谁谁谁加入聊天室,我们进行了啊群体的一个广播,那接下来因为这个用户列表这个数据啊,有了一个新的用户加入,对吧,那我们要把这个用户的数据也给哎广播出去啊好,我们在这里使用IO点。来触发一个什么事件呢?啊user list,好把这个用户数据给传给这个事件,那既然服务端啊要触发啊,要去触发这个user list,那是不是我们在客户端得去监听这个user list的这个事件,对吧?好,那接下来呢,我们在客户端来写一个啊监听监听一下这个用户列表这个事件啊。来在客户端我们来写一下啊,那这个监听呢,我们写在外面就可以了啊。
02:03
好,我们写到这里就可以啊,使用so点二来监听user。啊。然后可以收到服务器反过来的一个服务器传过来一个数据,那我们只需要便利这个数据,诶把它显示到左侧的这个列表就可以啊,好把注释也写一下啊,监听。用户列表啊,变化啊。呃,Date啊,我们先来打印一下,看它是不是一个用户的一个数组。啊,来刷新啊,重新加入聊天室AA。加入啊,设一个数组现在只有一个用户对不对,那如果我这边再来一个用户的话,刷新AA啊,这个来个BB选第二个,哎,是不是变成两个用户了啊,那同时这边它是不是也变成两个用户都能收到对不对,哎,因为我们是用的这个啊广播的嘛,广播给这个所有连接的客户端,好,那既然能收到这个数字了,诶后面大家会做了吧,那你就。
03:09
循环呗,对吧,循环把它显示到这里不就完了吗?好,我们来写一下代码啊,那先在这个里面找到用户列表是谁啊,用户列表是这里啊这里,那我们只要一个就够了啊,要一个,然后循环它,然后把名字和头像给替换掉就可以了,是不是好嗯,把它删掉,那我们循环好内容之后,是不是要插入到这个UR里面,所以我们给它一个ID,哎,方便我们去啊插入啊,User list。方便我们获取元素,嗯,那这里我拿到这个date之后啊,那我先啊定义一个str啊,等于这个空,然后贝点map,我来便利这个date啊,那每一个啊,它的这个回调函数是一个一个迭代的项,对吧?那我在这里呢,去连接这个str让它加等于哎,我用模板字符串把我们这个Li放这,那放这之后呢,只需要把谁呢,把这个昵称还有这个名字给替换掉就可以了啊名字是。
04:10
Item里面的叫Nina对吧,那item就是一个一个的用户嘛,对吧,那头像就是。把这个也给替换掉啊,Item里面的啊啊。好,最后呃,连接好这个字符串之后啊,连接好这个字符串之后,我们要把这个字符串给放到哪里呢?放到这里面来获取一下这个元素。Get by ID,然后使用这个in atime就可以了啊,In atime让它等于这个SR就可以了啊,这里呢,因为我们可以整个对这个内容进行啊一个覆盖,所以我们用intime就可以了,因为下面的这个这个这个提示消息,这里是我们要追加啊,要追加消息要往这个聊天的这个去域追加,所以用的是openend openend呢我们就在提前去创建节点啊,这是一点区别,大家需要注意。那接下来我们来测试一下啊,来看这个首先刷新一下啊,输入我们的昵称啊,选个头像,输入昵称DD,然后加入聊天式,诶是不是有一个用户好,而且是这里填示弟弟加入天室,那这里呢,我们来刷新一下啊好。
05:13
然后写个CC,那选这个图像,哎,加入聊天室CC加入聊天室,并且这里是不是也有,那我们看另外一个客户端,这里是不是也有。对吧,因为我们这个用户信息也是广播过来的啊好,那我们把这个cons给删掉就完成了,那我们的用户列表就处理完了。在这一小节的最后呢,啊给大家啊说一下为什么我们这个监听就可以写到外面,而我们这个加入流程式的这个监听就必须得写到这个里面,好,那注意看一下这个里面有一关有一行非常关键的代码是什么呢?是。让这个聊天页面啊,就是说显示让聊天页面显示,让登录页面隐藏,如果我们把它给放到外面的话,那就是说只要用户呃一进来就说一一刷,一加载我们的页面,这个代码就已经执行了,就已经在监听了,那如果有其他用户加入进来的话,也会直接让别的客户端。
06:09
就是说关闭了这个加入和这个,然后显示这个聊天,明白了吧,所以呢,我们让这个代码在什么时候执行呢?让只有你登录过,你加入过聊天之后再执行,好那我给大家演示一下,大家知道什么问题了啊,我先把它放到外面好吧,来保存。下面啊,这里我刷新啊,这里我刷新好,因为我这个代码是放在外面的,所以。这个代码执行了是吧,就是我这边一刷新就执行了,所以已经在开启监听了,对不对,那这里也是我页面,呃,只要一刷新,那这个代码是不是就执行了,也在监听了对吧?好,接下来大家就看一个问题就知道了,我在这里输入CCC,然后哎,随便选一个加入聊天室,好,我这个进入聊天室没有问题,但是你看这个。他怎么也进来了?它应该还在那个登录页面才对呀,这个就是因为我们放在外面的话,放在外面的话,因为一开始它就执行了这个代码,所以呢,我们不能把它放到这里,应该放到这个啊加入聊天室里面,只有你加入聊天室成功以后,我再开始执行这个监听啊,在进入代码,这样的话就不会对其他还在等待输入的这个还在等待选择头像的客户端产生影响,明白了吧?好,我们再来看一下正常的正确的一个情况啊,刷新啊刷新好,因为这个代码是在哪里面放着呢,是在这个加入聊天室这个里面放着呢,所以说我现在刷新页面啊,刷新页面相当于这个代码还没有执行呢,对不对,我并没有点击这个按钮,对吧,相当于这个代码没有执行呢,是不是也就是说这个监听相当于是不存在的?
07:35
对吧,所以说这时候我让这个人去加入这个聊天室,只有我点了加入聊天室这个监听才存在,哎,所以呢,我进入聊天室正常,而这个客户端还没有这个代码的,所以他还在这里面。清楚了吧,那这是给大家解释一下,为什么我这里必须得放到啊驾照天使这个里面进行监听,而像这个用户列表我们就放到外面就可以了。明白了吧?好,那这小题就先到这里。
我来说两句