00:00
大家好,那这小节呢,我们继续完善我们的聊天室,我们还有一个功能没写,对不对,就是当某一个用户离开聊天室的时候,我们应该通知其他客户端,就是谁离开了聊天室,好吧,好,那我们来写一下啊,那在这个SOIO里面,我们知道SOIO它会自己去监听这个连接的这个方法啊,连接这个事件,当有人连接了,就会自动去触发它,那同样的它对应的还有一个方法就是失去连接啊,就是当客户就是说客户端失去连接的时候,这个SIO也会自动去触发一个啊失去连接的一个事件,那我们来把这个事件写一下来,写到这里面啊。啊,写到这里,嗯,Socket。啊。这个disc啊,Connect这个不加,最后的那个是。Disconnect。然后。这里面是一个啊回答函数,因为失去链接我们就不需要数据了啊,所以就不用给参数了,那这个方法呢,是当这个关闭客户端的时候,当关闭啊链接时。
01:14
数据啊,第一次connect事件。自动触发事件啊,自动触发,然后我们在这个时候呢,啊,通知其他用户啊,用户离开了,有用户离开了。好。那用户离开了,我们是不是要通知其他客户端啊,有用户离开了,那我们来使用这个。IO点啊啊,直接全部广播,广播一个内部事件啊,离开事件。那同时呢,把用户信息给带过去啊,或者说我们在这里,哎处理好就是说哎谁谁谁哎离开了对吧,离开了。
02:02
聊天室,离开聊天室。啊,那么这个用户信息怎么来呢?那用户信息是不是我可以从这个用户列表里面去筛选,对吧?啊,那怎么筛选呢?我们是不是有这个SOID,用这个socker ID去筛选。清楚吧,这也是一开始为什么我们要把这个搜ID存到用户里面,这个ID真的非常有用啊,要不然你这边你就筛选不出来用户,好,我们来筛选一下用户啊,User。等于谁呢?等于这个。U啊,还是使用我们的这个find的方法啊,里面使用soer ID,如果你等等于这个优点ID,那我就给你返回我筛选到的这条数据啊,里面是一个回答函数。那这时候就可以拿到用户的Nina。诶,连上这个离开了聊天室去触发这个利事件,对吧,那接着呢啊,我们在前端去监听一下这个利物事件。
03:08
那放到最上面这里去写吧,啊监听。用户离开socket点二六啊,这不串啊,然后服务器返回来的一个数据,服务在访问数据,我们把那个数据干什么,是不是和谁加入这个聊天室是一样的啊,那我们找到这个加入这里,因为都是要显示一横杠的一个信息,对不对,找到加入形式。嗯,是不是我们调这个方法就可以了。对不对。哎,调这个方法就可以了。找到这里好。哎,这样的话就能显示谁谁离开了啊好,那我们来保存。我看一下啊,这里我们来刷新啊,可以发现断掉了,报错了对吧。啊。那说明我们的这个代码有问题,为什么有问题呢?
04:01
是因为啊。给拉到最后,他会有时候找不到这个U啊,为什么找不到呢?因为这时候假如我们还没连接呢,没连接我们就刷新啊,就是用户信息还没存进来呢,我们就刷新。那时候数字里面还没用户呢啊,因为我们在刷新的过程,就是断开的一个过程,清楚了吧?啊,所以它会找不到这个用户,那这个简单我们做一个判断就可以了,那如果用户你存在啊,就是我筛选到了这个用户,那我才给你进行通知吗?如果我数组里面都没找到你这个用户,那我就不给你进行通知了,是不是来这时候我们再来看。就正常了,对吧,好那个其他的我们也都刷新一下。嗯,这里刷新一下。加入一个一。进来,然后再加入一个二进来。啊。这个我们选图像二进来,好,现在我来进行刷新,因为刷新你也是断开的一个过程啊刷新哎二是不是就走了,那这里呢,就显示二离开了聊天室。对吧,嗯。
05:00
但是二既然离开这个聊天室了,这边怎么还有二呢?我们是不是还有对这个用户这个列表再做一个处理对吧?那我知道我们的用户列表是存储在哪个字段里面呢?存储在这个呃,User这个变量里,对吧?所以我要把离开的这个用户从user这个变里面去删除。啊来啊,这个是广播。用户离开的啊,信息啊。那接着呢啊,将用户将离开的用户。从。啊,优的三叔。删除啊,那我们先删除在广播啊都是可以的,那怎么删呢?啊,那这是操作数组的一些方法,有很多办法去删除这个数组里面的一个元素啊,我们这个就使用那个啊space啊,它可以接收一个索引,然后以及你要删的一个深度啊,那我们就删第一个嘛,那从哪里开始删呢?所以我们要查到那条这数据的索引,对,就是我们要删的这个用户在这个数组里面的索引啊,使查找索引呢,可以使用这个啊find index它里面啊接收一个条件啊,就是一个筛选的一个条件,返回数据所在的一个索引吗?
06:22
嗯,返回这个,我们的查询条件就是U里面的ID等等于。这个socket ID。啊,那意思就是说,呃,它是这个分两步的,我首先最终删除数组里面的数据,我肯定要用这个space对吧,它是从索引啊第一个参数,其实索引从哪个地方开始删啊,删多少个,我删一个,那从哪开始删呢?我要查找这条用户在这个数组的这个索引,那我就可以使用它去查找。对吧,啊,他查找之后呢啊,他接受这个条件,就返回这个匹配的条件,就可以这么去删了啊。
07:01
呃,实际上这两行我们可以进行一下整合,对吧,我们可以先把这个索引查出来,然后用索引去数组里面去用户的信息啊,最后再删除,那这个代码呢,我们等会再优化吧。先把我们的功能给实现啊,接着呢。呃,我们还要干什么去广播这个用户的列表,因为只有广播了这个用户的列表,那前台就是所有的客户端的用户列表才会更新啊。发送。发送嘛,我们写发送最新的用户列表给所有客户端啊,给所有还在连接的客户端啊,使用io.emit啊,有前台有一个监听获取用户列表的啊,是他user list。好,然后我们把这个U给他就可以了啊,因为这个user呢,是已经删除过的啊,是把这个离开的用户已经删除过了,所以它的数据会少,那前台收到这个消息以后啊,因为使用了呃in的HML,所以整个会替换,那用户呢就会是最新的一个用户。
08:03
我们来测试一下。删除。刷新来给个一。这里给个二。好,现在我让一离开。啊,没了是吧,那我们看看二是不是一没了,这里是显示一列开条件式,那这样用户列表以及这个消息我们就都有了啊。啊,那接下来呢,代码呢,如果想精简的话,我们可以精简一下,因为它是一个数组,就是我们查这个用户。通过这个索引也是可以取出用户的,那删除这个用户也需要这个索引,就是我们可以有很多地方用到这个索引啊,所以呢,我们再来定义一个这个user index,哎,就是用户的这个索引啊。等于它啊好,那这个我就不要了啊,那这里呢,我就不判断用户了,就判断用户的索引,如果它不等于这不等等于负一,如果找不到这个索引,它会反复负一嘛,因为宿主的索引从零开始了,对不对,好这时候我就能能得到这个用户信息,那用户信息是谁呢?直接从这个user测里面,然后数组啊,我用这个索引是不是就可以直接取出来对应的这个用户。
09:13
对不对,那同时我再用这个索引去删除这个用户,是不是这样代码经验以后看起来稍微简单一点啊,把这个给大家写一下啊。啊,通过对比这个ID啊找出。在这个用户啊,在这个user里面找出。啊,索引找出这个对象啊,找出索引嘛,找出索引位置。啊,因为只有得到数组的某个索引,我们就可以通过数组的索引去取数据,并且可以通过索引去删除啊,通过索引获取用户信息啊,这里肯定是能拿到的,因为如果呃,这里索引没有找到的话,就是都没有这条数据,这里判断都不通过清楚了吧?啊好,那接下来呢,我们再来测试一遍啊,因为优化了之后,你要确保你的代码可以用啊。
10:13
不要太自信,有时候你可能就哪地方就写错了。先进来一个,再进来一个。啊,那我们现在让还是让这个一一离开吧,好,他走了之后,哎,一一没了是不是啊。那我们的这个聊天室啊,用户离开聊天室功能就写完了,那到此为止,我们整个聊天室基本上功能也就算完了啊,整体给大家测试一遍,首先进来一个用户。呃,这个还没走啊,这个人让他先走啊,这个提示他离开了,那我把他给改成二让二进来啊,有两个用户了,对吧,然后这边给个三让三也进来。这里现在有1233个人啊。然后聊天啊,都是正常的发送啊,他俩都能收到对吧。
11:02
啊,再然后比如说给这个三私聊。啊33333,那么呢,二收不到对不对,只有这个三能收到,哎,是一个私聊的,哎,同时呢,三也能给这个一回复这个私聊功能,那二肯定是没二什么事了,对吧,那一肯定是能收到的啊。这是三回来的一个私聊的信息,好,现在三不想聊了,三要走,诶我走了,或者说直接关闭客户端刷新都是一样的啊,这里都会提示三离开了聊天室,聊天室离开了啊。然后测试一下,我们这个发消息的时候。它也会自己滚动到这个底部啊,但是大家可以看到我们在提示这个谁谁离开的时候,它不会自动滚动到这个底部,你看现在我让他离开。好,这边应该显示谁离开了,但是没有滚动到底部对不对,说明诶我们一检查就发现了一个bug啊,那不用慌,我们这里GS这边呢,封装了一个。滚动到聊天底部的一个方法,所以呢,不管是用户加入聊天室,还是说用户离开聊天室,我们都要用这个方法来让聊天的这个区域滚动到最底部啊,这样才算比较完善,那我们来找到啊,通知这里啊,直接在这个里面给它。
12:11
调用就可以了啊,你不用在那个加入的时候调用一下,离开的时候调用一下,因为都是调着这个函数嘛,那我们在这个函数里面统一去调一下不就可以了吗。是不是这样的,好,那我们再来一个测试啊,再来加入进来一个人。进来一个人啊。这个时候呢,我们这里呢,再来。加入一个人啊呃,至于刚才为什么我加入进来的时候这里没有显示呢,是因为。这个服务端啊,因为我们开启了多的梦嘛,我们改了GS服务端重新去执行了,重新启动了服务端重新启动,原来的数据都没了,就是我们存的这个user都没了啊,这个给大家解释一下啊,为什么我只要一改这个GS的代码啊,这两个聊天室就失效了啊,这是这个原因,因为服务端会重启啊,导致了我们这个变量什么的都都会重新定义,以及这个存储的这个数据啊,包括这个so的ID都没了啊,这个得给大家说一下,好,现在呢,我先把这个呃长度给弄上去啊,好,现在已经非常长了,对吧?好,我把它给拉到最上面,那现在我让这个用户离开,我们来测试一下它能不能回到啊最底部,好让他直接关掉吧。
13:15
哎,可以看到是不是离开量程是回到底部啊,这是我们封装好的一个啊,写好的一个这个函数嘛,让它滚动到这个底部。啊,那经过这样的一个测试之后呢,我们的这个聊天室就没有什么问题了啊呃,大家就可以写完之后拿去聊天了啊,如果你不在局域网中啊,就可以去聊天。好,那这节课我们先。写到这里。
我来说两句