00:00
大家好,在聊天室的页面准备好之后,那这个开始呢,我们先来完成加入聊天室的功能啊,那就是这个功能,在我们输入完昵称之后,以及选择完头像之后,我们应该把我们输入的昵称以及选择的头像啊传递给服务器,这样的话服务器就能记录我们这个用户相关的一个信息,那为什么要记录用户相关信息呢?因为服务服务器啊,就是我们的web,他在把这个消息广播给其他客户端的时候,需要把我们的昵称和头像一块广播出去,这样的话,别人的客户端才能显示我们的昵称和头像。清楚吧,好,那我们一步步来实现,那首先。这个H。暂时就没有什么用了啊,我们就把它给关掉啊,那一定要注意隐藏的状态是在第二个这个聊天室的界面,因为我们一进来的时候应该先让登录啊,这个去显示啊。好,那把这个就关掉了,那GS呢,这个留着啊,这个来写我们客户端的GS,这个来写我们服务端的GS,那在写服务端的建设之前,我们先把之前做练习的这些都给注释掉啊。
01:05
包括我们监听的这个,呃,事件也给注释掉啊,那这个是我们做就是说学习的时候啊。写的一个代码,那首先我们来一点一点的这个完成啊,按照我们写代码的一个逻辑,那首先我是不是要先获取到我输的这个昵称以及头像,在这个加入聊天室这个方法,那我们来找一找哪个函数啊,哪个方法是加入聊天室,哎,是这里对吧?那在这里呢?啊给这个按钮绑了一个点击事件,点击完之后我们,呃,如果是为空的,还会有提醒消息,然后。呃,没有,就是说验证通过的话呢,会让这个聊天室。这个这个加入这个页面给隐藏,让聊天室给显示对吧,那这个我们先注释掉,哎。我们必须得等谁呢?等这个服务端啊,确定我们已经加入聊天室了,我们再让他隐藏对不对?好,那在此之前我们先要获取到。
02:00
用户的。输入的这个昵称和这个头像啊,我们来定义一个啊,User等于什么呢?啊,首先看它的昵称,昵称在这里已经拿到了,就输入框的这个值对不对啊,那这个头像在哪呢?头像呢?啊,为了简单的处理啊,我在这里定义了一个全局的一个变量啊,当我们点击这个头像的时候呢,就会呃这个给这个全局变量去附上这个值啊,那这是比较简单的一种处理方法,好。那所以呢,头像我们可以直接啊,拿这个就可以得到这个头像,这样的话,用户数据啊,用户登录他提交的这些数据我们就拿到了,那我们先打印一下,看一下user色点log保存,然后打开我们的。这个。把这个放小一点啊。好。接下来刷新一下,在这里输入线昵称,选择一个头像,诶这样的话就可以拿到我们这个昵称和头像,对吧?然后我们把这个用户信息给提交到啊这个服务端啊就可以了,那我们知道我们提交呢,不在使用这个APP,我们使用web socket提交对吧?那所以呢,在我们使用这个呃web socket之前,我们是不是必须得先加入这个啊。
03:12
就是加入这个。Web对不对,现在加入这个服务里面对吧,那还记得上节我们在讲练习的时候怎么加入吗?是不是使用这个。呃,在这个。A里面我们引入。啊。SOBP加IO,引入这个socket io.gs啊。哎,引入这个GS之后,我们就可以得到一个呃,IO的一个函数,我们执行的IO函数就可以得到一个so这个对象对吧?那我们就可以使用这个啊呃,这时候它就就是连接到了这个服务端嘛,啊,而且我们还可以使用得到的骚客对象去呃监听一些事件,以及向服务端去发送一些消息,对吧?好,那我们先把它引入,那为了确保已经引入了我们在这里啊,来work检查一下,看一下啊。
04:04
把这个哦点开,哎,可以看到。啊so.io既然是引入过来的啊,那说明引的没有问题啊。嗯,这个是网站的icon图标,你不用管啊。把这里啊还放到哎,Consolo这方面,我们看错啊,这个icon图标我们就先暂时不管它。呃,那接下来这个已经引入之后,我们要在哪呢?要在啊最上面。来定义一个啊so对象啊,它是由C得来的呢,是IO这个函数执行带来的,好,一旦我们执行这个之后,就会加入这个聊天室,那现在打开我们的控制台啊好,接下来呢,我们这里只是加了一个这个啊,只是执行了一下这个函数,那接下来呢,我们去刷新一下这个页面,好刷新一下这个页面之后,我们来控制台看可以看到啊,有一个客户已经连接到了soet,对吧,所以呢,想要让客户端连接到我们sok特别简单,只需要执行啊这个客户端的这个函数就可以了啊,那这个函数呢,是由SIO。
05:06
就是er.l.GS提供的啊。好,那接下来继续完成我们的代码,那点击这里我们加入聊天室已经能拿到用户信息了,我们是不是要把这个。这个是登录的这个用户信息啊,用户信息,那我们在拿到这个用户信息之后,是不是要把用户信息啊发送给服务器对不对。好,我们来写一下啊,把用户信息发送给服务器啊,那怎么发送呢?那我们这上面既然已经建立了socket链接,是不是可以通过socket发送对不对,那我们在上面就讲了,我们如果想要向服务器去发送这个数据,是不是得去触发服务器监听的某些事件,对吧?所以我们要使用这个socket啊,点it。来触发服务器的某个事件,并且把这个用户信息给带过去,对吧?好,那我们触发什么事件呢?哎,我们就来定义一个loging事件,那触发服务器log事件,那是不是我们在服务端就要去啊建立一个log事件。
06:13
啊,那我们在哪写代码呢,就在这个写代码呢,上面是我们所有的学习的这个代码,那我们在这里来写啊,啊监听。Locking啊,事件啊,监听用户的这个登录时间。啊,使用这个socket点啊监听啊啊,那它可以收到一个啊参数啊,它第二个参数是一个回调函数,回调函数其实是有两个参数的啊,那第一个参数呢,就是这个啊这个date就是客户端发来的这个数据,对吧?啊第二个这个参数呢,它是一个啊回调函数啊,就是我们要啊发送的一个回调函数,那我们一般的话只用一个这个参数就可以了,就是。
07:00
接收服务端啊,客户端来的这个数据就可以了啊,那我们呢,来打印一下这个data,看有没有收到服务,就是说客户端啊传过来的这个数据,那这个camera没用了,我们先关掉。好,这里当我们。前端这里啊,当我们点击加入实验室,才去发送这个数据。来,接下来我们来。保存啊。刷新一下我们的这个页面,下面我来输入一啊来接着去选一个头像,点击加入城市啊,已经点完了,我们看看这个空台是不是耐克一啊,头像是这个啊,这里就执行了,对吧。但是我们想一下,我们要写的功能是什么,是加入聊天室的功能对不对,那所以呢,我们得在这里执行之后,我们来处理一些我们的逻辑,而不是简单的一个输出,那简单的输出那是没有任何用的,对不对啊,那我们要是什么逻辑呢?我们来想一想,你来分析一下我们的这个聊天室的页面啊,那。我们在这个GS这里先把啊这个注释掉啊,先把这个打开。
08:05
先来看一下,按照我们的逻辑来说的话,如果我们这里加入聊天室之后,是不是会进入到这个页面对吧,那这个页面是不是有用户的这个列表,以及这个谁进入这个聊天室对不对,所以说呢,我们在加入聊天室之后啊,那还是先把这个给注释掉。把这个给打开,那我们在加入聊天室之后,那是不是要存储这个用户信息,对吧?好存储用户信息啊,因为你不存储用户信息,你怎么来展示左边那个列表呢。对不对啊,那我们怎么来存储呢?啊,有很多方式,所以呢,呃,我们简单的用比较简单的方式啊,我们在这里使用一个变量来存储用户信息。定义一个啊,Let users啊,等于一个数组。再后啊,那每来一个用户,就是说每加入进来一个用户,我只需要对这个user进行push啊,把这个用户给放进去就可以了,对吧,把这个。
09:05
啊,Date给放进去就可以,是不是这样的啊。我们再来想一下,是不是还少点什么,那这个date呢,就是简简单单的啊用户名和头像对吧?没有用户的这个ID,好,那我们把这个用户的这个ID也给他加进来,那为什么要把用户的ID加进来呢?因为这个ID啊,呃,它会有一些作用啊,比如说哎,比如说一个用户离开了,我们可以通过这个ID把这个用户删除啊,当然你说也可以通过这个昵称对不对,但是昵称它有可能会重复清楚吧,所以我们会加入一个唯一的一个ID这个字段,那这个ID怎么来呢?当然我们在讲这个so的时候给大家说过,每一个这个链接都会有一个啊,唯一的一个就是每个客户端都会有一个唯一的ID,就是sock.id对不对,所以呢,我们把这个。作为用户的这个ID就可以了,那所以呢,在这里我们来新加新写一个对象,然后把这个哎date进行展开,同时再给他增加一个I属性ID属性就是哎这个s.ID这样的话我们的用户信息就存储进来了,好那这个注释我们就删掉了啊。
10:07
那在存储完用户信息之后,我们应该还做什么呢?是不是要通知哎这些用户啊,通知这些客户端谁谁谁进入聊天室对吧?看我这个界面是谁谁谁进入聊天室,我们是要进行一个通知对不对?那现在涉及到这个通知是怎么回事,是不是服务端要向客户端去发送消息,那服务端要向客户端去发送消息,是不是服务端使用这个啊emit来发送,而客户端使用on来监听。清楚吗?啊,那我们使用哪一种发送消息的方式呢?来看一下我们这几种,一个是向所有客户端广播,一个是指向该建立连接的,一个是向其他客户端啊,因为是通知这个谁谁进入了聊天室,所以呢,我们向所有的这个客户端广播就可以,所以我们用IO点啊。来这个通知一个什么消息呢?呃,通知一个这个啊交易啊,就是用户加入的这个聊天室,好,那我们把什么数据发传递给客户端呢,把这个昵称啊传给后端就可以了,因为这里它是不是只要一个昵称。
11:08
啊,对不对,谁谁进入天使好,那里昵称怎么来呢?是不是date里面的啊,Niname就是我们的这个昵称。啊,我们把它给传过来,那如果呃,我们不想在这个前台去处理拼装额外的消息的话,那我们这把消息在后台拼装好啊,在服务端拼装好,就是加个空格,这是前面是名字对吧,然后后面写上加入了聊天室。加入,然后片子。好啊,那这里我们诶服务端要去触发客户端监听的交易时间,那我们在客户端是不是要开启一个监听,对不对?好,那这个监听在哪监听呢?一定要是在这个加入聊天室以后开始去监听。明白吧,啊,你如果放在外面去监听的话,那么会有问题,就是其他的客户端也会触发这个事件。清楚了吧,啊好。嗯,我们放在这里面来写一个监听啊,Socket点二监听一个交引这个事件,那date呢,就是服务端传给我们的这个数据,那拿到这个数据之后。
12:11
我们先来打印一下啊,一步一步来,不要慌。刷新页面啊,那我先输入一个ddd,然后选择一个这个头像,然后点击可以看到是不是服务端给我们发的消息来了,那我们既然能拿到这个消息,那是不是只需要让它显示到啊这个地方就可以了,打开我们的AMA,是不是我们只需要呃让这个。在哪呢啊这一块对不对,这一块把它给追加到这个它的后面就可以了,是不是这样的。对不对,你看这样的话,每一个每来一个人进入聊天室,他就会,诶谁谁进入聊天室,谁进聊天室,是不是就这样的一个效果,对吧,好那。这个呢,我们就他原来是在在前面写着呢,这是我写的例子前面写的,那现在我把它剪切掉,剪切掉干什么呢。
13:02
接下来。放到这个JS里面,我们来处理一下这个数据啊,提示加入聊天室。好,怎么提示呢?哎,实际上就是啊,把这个啊,刚才我们剪切的这个文本给处理一下,然后再追加到这个啊查意的这个后面就可以了,清楚吗?好,那我们来呃,定一个啊let一个str等于来使用。哎,模板字符串,然后把这个给放过来,哎,这样写吧。之后呢,把谁给替换掉就可以了,不是把他给替换掉就可以了。好,我们来把它给替换一下啊,那这个文字啊,哦,不是替换那个名字,是整个替换掉就行了,因为这个后台啊,就是服务端,我们已经把这个文字都处理好了,所以呢,哎,这里只需要把这个date给放到这里就可以了,是不是啊,那接下来我们怎么把这个节点给放到啊,追加到这个后面呢?那如果使用j query就比较简单,那如果使用原声的话就比较复杂,那我们还要对这个进行一下改造,原声的话我们得先来呃创建一个。
14:17
啊,Div啊,等于。Document create element创建一个div,然后让div的class name等于谁?等于这个啊,等于这个。好。战后。那我们让这个DIA的al等于谁呢?等于这个啊。这个三面就是这三行代码等同于是下面这个,呃,效果是一样的,那为什么这么写呢?因为只有这样写,我们得到了是一个节点啊,就是道的一个节点,那这个节点呢,我们就可以把它给。
15:00
诶,追加到。这个后面啊好。来,我们先拿一下document.get w BYD先拿一下获取到这一个char list的这个节点。然后使用它的这个openend进行追加,注意你看这个openend它提醒的是什么,它要一个这个。啊,Node的一个节点啊。你如果给的是一个啊字符串,它是不会给渲和atime的,所以我们啊,只能是在先创建一个节点,然后把这个内容放到这个节点里面,最后我们把这个节点给叠加进来就可以了。啊,那用用的原生的键S比较麻烦,你用接块的话,直接用那个JA块的喷就可以直接追加进去啊可以好那。这里这个我们就先注释掉。加入热天式,然后这里呢,也能正常显示的,那接下来是不是诶让他们两个来显示一下。就可以了。对不对。好,我们来保存一下,看一下。
16:00
刷新一下页面啊,然后输入我们的这个啊昵称,选择头像来加入聊天室,可以看到是不是可以显示谁谁加入聊天室,注意这个数据是服务端啊返回给我们的,我们并没有写吧,你看并没有写任何文字吧,是不是直接从服务端啊,我们在这里监听的这个交易事件嘛,啊服务端呢,使用啊it啊来触发了我们的一个。啊,加入聊天室的事件啊,就是他使用这个io.mg光播,这样所有的这个客户端都会收到我们加入聊天室这个事件,就这吧,好,那我们来做一个验证啊,下面呢,我来多开一个客户端,在这里呢,再来开一个客户端。那现在在这里呢,我再来输入一个ddd来选择一个图像,注意啊,看这里现在是只有一个1231加入函数对不对,那这里呢,我再输入DD,诶可以看到这边显示DD加入千式,然后这里是不是也显示DD加入这个加入2000式对不对?这个就是因为我服务端用的是谁用的是io.e米,它会向所有的客户端进行广播。看到了吧,向所有的客户端去发送这个消息啊,啊,只要是你客户端啊,监听了我这个交易事件啊,在这里监听这个交易事件啊,他触发的这个交易事件。
17:09
好,那这样当用户加入聊天室的时候呢,啊,其他的客户端就会收到谁加入聊天室这么一个通知,对吧。好,那接下来我们把代码稍微优化一下啊,那我们把代码呢,都给放到这个里面呢,很显然是不太合适的啊,那我们来拆分一下,怎么拆分呢?首先看一下这个是主要是做什么用的,是做这个提示消息用的,就是谁谁加入人是做提示消息的,对不对,那我们把它给提成一个函数,为什么要提成一个函数呢?因为如果我们在用户离开的时候,我们还要提示一个消息,说谁谁离开了这天使对吧?所以这个方法呢,是可以复用的,那对于可以复用的这个方法呢,我们就把它给呃提取出来啊,创建一个方形。啊,这个方形我们来取个名字叫什么呢?啊,就叫这个。
18:03
叫这个啊,OK吧。啊,来接受一个message。把这个删了啊,提示消息。好,那就是这一段代码啊,这段代码。啊,只不过这个啊,那我们直接写成data吧,这样这个就都不用改了,哎,只不过是在这里我们来调用啊,调用这个方法,并且把。服务器服务端返给我们的啊,这个信息传给这个方法,这样的话效果是一样的啊。把这个删掉啊,那这样我们。这个逻辑就处理完了,对吧,首先是只要我们提交了这个登录,就把用户啊信息啊发送给服务器,那服务器呢,诶在处理好这个用户信息之后呢,啊,将这个谁来入了这个谁加入聊天室广播给所有的客户端啊。
19:04
好,那这节课我们就先到这里完成了,加入流程式的一个功能。
我来说两句