00:01
来啊,我们接着上午来讲啊。我们先简单说一下上午我们做到哪一步了,上午其实我们主要做了两个事,第一个呢,是。写了这个静态组件是吧,第二个能够去发送消息和接收消息啊,其实在这个之前,我们把那个后台也给他写好了,只是我们没有亲自一点一点的写。啊,后台接入。那下面我们要去做一件事情,也就是说现在我们的数据库里面是不是应该有聊天记录的数据了,对吧?那既然有了数据,我们可以干什么?是不是毒了呀?这能能不能懂,我们刚才啊发消息都是谁发谁来发的,我们基本上都是通过这个账号发的,就是这个当前这个账号,哪个账号呢?大家看一下那个用户是谁,大神一。是吧?
01:00
那比如说我现在就想去后台去查。大神一所相关的所有的消息都给他查出来。我们后台接口实际上已经写好了,开始写好的时候我们没测,没测的原因其实非常简单,就是因为那时候没数据,那现在既然有数据了,那我们就来测一测。测的话,首先呢,你需要去用户登录。用谁呢?用大神一来登。能登吗?可以吧,一旦登录以后,我的浏览器端是不是存了那个大神一的优质ID的cookie。啊,那下一步我们要做的事情啊,我已经把这个保存了,大家看一下啊,就是这样一个接口啊,盖的请求需要啊,这里面注意我不需要传任何的参数。它自动会把我当前用户的UID给它带过去,现在我去查,哎,得到的就是这样一些数据,这一个返回数据,其实就跟我们的那个接口文档描述的结构。
02:09
是一样的,大家看一下。能看出来也就整个啊,里面包含users,这是所有啊用户一些信息的一个对象啊。接着是一个messages啊,里面呢,包含了几个他发的消息,一共四条消息。啊,你看这里面啊,大家看这里面这个代表这三条是什么。这个呢已读,诶有人说是怎么插进就已读了,因为刚才我测了一下,我又我不还有另外一个接口吗。对吧,我刚才测了一下,把它的词啊改为了to啊,这样也能看得出来啊,有的已经读了,有的还没读啊没关系啊,另外一接口呢啊也是可以测的。只是说呢,我需要去指定是谁,刚好这个from就跟第四条。
03:05
The form是一致的啊,我就刚刚选了它,那最终呢,它就被为为true了,好。那下面我们要去啊,想办法去做这样的事情,干什么呢?来看一下。叫获取啊消息列表是吗?显示后台已经写好了吧,那下面我们写前台,写前台从哪开始写啊。是不是我们的这个API啊,对吧,Index。那也就是说,现在我需要根据我当前的接口文档的说明。当前接口文的说明,来去写对应的请求函数,这个其实非常简单啊,非常简单,一个是来把这个西西拿过来注释一下行不行,Export IQ是吧?
04:12
我们是不是要获取的是假设叫message list可以吧?好,等于。等于什么啊,等一个进函数啊,对吧,来这个地方就要传一些参数啊,这个第一个是路径。后面需要传对象吗?不需要,因为没有任何参数是吧,那既然没有参数,这里面是不是也不用传啊。啊,什么类型的请求看一下get够了吧,就这么简单。没问题吧,好,没有问题,那继续往下,下面还一个也给他写得了啊,虽然我们现在不需要,但也把它定义好。
05:04
好,这个呢是修改指定消息为已读。来export EQ。嗯,就叫瑞的message得了,好吧,就叫瑞吧。好。先把这个结构摆好。地址是多少,看一下。问题吧,好接着啊,接着我们这个地方请求请求参数有没有有一个什么from,那也就是说我这里面应该去写一个from from从哪来呢。传过来。是吧,接着我们的请求方式是什么的,所以我这个地方需要传一个什么。
06:06
是这样的吧,嗯,那也就是说到此为止,我们的接口请求函数就这么定义好了。啊,定义好之后啊,我们下面需要去写的另外一个是最复杂的一个部分,就是re部分啊,从始至终最复杂的肯定都是redux啊,因为他要写的是好几个组成部分。对吧,这里面是一个新的数据,我们现在先去想一下,我们要去写一个。新的东西了。因为我们现在跟前面的数据一样啊,大家想想看,我们现在还是user吗?不是啦,对吧,也不是什么user历史的,我们现在需要去定义一个新的reducer。这个我取的概念就叫什么呢洽聊天。
07:01
好,这个呢是产生啊聊天。状态的reducer啊,这个聊天的状态,它的那个state来等于那我应该写个什么,而这个in里面有什么数据了啊,这个很关键,比较特别。啊,首先来说我们目标是要获取一个消息的列表啊。按道理来说,我们这个面积应该是个数组。但是。我不知道前面有没有看过,我们刚才看到结果了。我们去获取消息列表的时候,仅仅是一个数组吗?不是,是不是还有users。这个数据也得管理起来,所以我是一个什么类型呢对象,我这个对象里面有什么呢。
08:01
有users,哎,他什么类型对象,接着还有一个什么check message是对吧,记住就这个名字吧。就这个。他是什么类型数组?好在这个里面还有一个非常重要的数据,大家知道我们会显示一个未读数量的一个问题。这个能不能懂啊,这个里面我还有一个数据叫啊,我写个名字啊,大家看一下,看看能不能懂。处值为零,这是一个总的。啊,未读数量。记住啊,是总的位置数量,它是不是会在我底部的底部的A啊,我把这个数据给干,这个数据干一下啊。
09:04
一来一去。到时候我来处理一下啊,把它来登录一下。说一下我们在这个又在这个下面,是不是有可能要显示一个未读数量,而这个未读数量是什么?总的未读数量。这个没弄。啊,只是现在没有啊,啊先不用管了。来我们继续的往下看啊,继续往下看这一个是什么,当前用户所有相关啊message的什么呢?数组。明白是吧,好,这一个里面存了什么呢?所有包含啊,就是所有哦用户。信息的对象啊。
10:07
那这个地方就是一个什么意思啊,就整个里面包含的是每一个都是一个这个属性,这对象里面不属性嘛。这么说一个补充一下,因为这个呢是不太好看的啊,属性名是什么。书记明是什么?有者ID对不对?属性值是什么?是一个什么样的对象,对不对,这个地方我们其实就包含两个信息,不知道还记不记得啊,一个是user类,一个什么hand。这一说,别人才清楚你里面是个什么结构啊。这个不懂。啊,这个好说,这个一说大家知道,每个里面都是一个message。
11:00
好,来,那我们继续啊,下面这里需要去写一个啊action是吧,里面的写法呢,非常的固定啊,稍微来写一写叫什么呢?啊,Switch,接着action点。Tab。对吧,接着里面是不是写case,最后有一个什么default啊,Default里面return的是谁。那现在我没有写case,因为我还没有设计出来type值,对吧,Type还没设计,所以我等会再设计啊,来把这一个给了什么。是不是下面注册一下啊,这个结构就会有区别了,多了一下它什么类型。整体是个对象。能不懂,那下一步我们去做什么,下一步我们要做的就是在整个redux里面的这一个,以它为中心,现在我们要去设计action type啊,设计这个。
12:12
这里面啊,至少会有这么一个,比如说来我写一个,看看懂不懂啊,写了再说。大家看呢?啊,我写一个什么呢,我写一个啊。叫啥啊,就叫receive message list。什么意思?是不是接收一个消息的列表,我们不要一上来要请求一个消息列表,显示这个列表吗?这个能不懂,接收一个消息列表啊,接收消息列表这一个啊,说一下是所有相关消息。不仅是我跟当前这个聊天的用户呢,是我跟我这个当前用户,所以相关的先全部取出来。
13:04
啊,所有获取所有相关消息啊的数组或者列表吧。好,还有一个,还有一个啊,看我写一下大家能懂啊,叫receive message。什么意思?我是不是收到了一个新的消息?这有可能吗?一个收到消息列表,一个收到什么一条消息。嗯,接收一条消息,美女吧,好。先写这两个,其实还有一个现在不用想啊,先把这两个搞定啊,先把这两个搞定啊好。来,那也就是说如果有了它,我这边就应该会多两个什么。
14:04
是不是多两个kiss?对吧,这很正常,这不就是一个常规操作吗?啊,Receive。List。没什么好,接着来看这里啊,我这里面就可以写什么。Case啊,Receive message list,我应该一个什么东西,对不对是吗?啊,接下来一个什么case啊,Receive message,我应该return一个什么东西?既至于看什么,等会再想啊。我们先把这个下。这个没问题,没问题是吧,那没问题之后下面啊,下面我们要去针对。这个啊去写来,我们前面去说过一个事情,我们这个地方。
15:04
我们在应用里面大家想啊。也就是说我现在去打开一个它啊,譬如说我去我诶。是不是有问题啊,怎么怎么打开不动呢。啊,总是来看一下他啊,又掉了是123。我们现在打开是不是能看到消息。但是我要告诉大家消息是我是在我现在打开这个获取的吗?不是,其实在这之前。早已经过去了。这个能不能懂,也就是说大家想啊,我不一定进入,我可能进入这里,这里面是不是就显示消息列表。对吧,所以说这个界面我的我的应用,我的用户一旦登录上来,一旦登录上来,那就应该去获取消息列表,为什么我要强调一个条件,就是用户登录之后才获取的。
16:11
我们前面就有一个事情,我们获取消息列表的是获取当前用户的。是不是有个概念吗?叫获取当前用户的列表啊,对不对,如果用户没有登录,你去获取当前用户列表,能获取吗?不能呢,所以我得保证,只要我的用户登录了,那我就去获取消息列表,我现在问题是。我怎么知道什么时候他登录了呢。是不是这意思啊,我怎么知道呢?来最后啊,这里面不止一个位置啊,其实有好久办法,我们就说一种在这个里面action me大家看啊,我要登录有三种情况,有三种,哪三种呢?我们来看一下啊,看到这个你就知道了,一个两个。
17:06
三个。注册成功,我们是不是就说登录了呀,诶登录成功,那肯定也是登录了,也就在这里。在这个地方成功。是不是说注册登录成功了呀,那此时诶。就肯定可以。去获取,那包括这个。包括我们的登录,当我登录成功的时候也可以。对吧,还有一种情况,还有一种情况就是这个get user诶。我那个get有这个你看。我有可能是不是实现了自动登录,对吧,实现自动登录的时候,是不是去调用了这样一个方法叫get user。那如果我能去取到用户信息。
18:03
从后台获取的用户信息说明我已经登录了嘛。一共有三种情况,在这三种情况下面啊,我们都可以去干嘛呢,叫获取。消息列表对吧,获取消息列表,那获取消息列表呢,这个事情啊,它不是一条语句能写完的,所以呢,我怎么办呢,我专门去封装一个什么,封装一个函数就写在这。来写在上面的啊,写在这里,因为这个不需要暴露啊,来一个方形,看到我叫什么了。我不是要去获取消息列表吗?你说我叫什么名字比较合适?Get you的啊,是不是get message或者叫get是吧?啊都行啊,啊get a message list可以吧,获取消息列表啊好,这肯定也是异步的吧,对吧,但它不是一个,这个地方要注意它本身并不是一个action,也不是什么action create啊,就是一个工具函数啊,异步获取肯定是一味啊获取什么消息列表数据。
19:23
好来那这一个方法啊,这个方法我们来这个地方在哪用呢。我先就写一个结构啊,先写一个结构参数也没指令啊,里面有没有指令来看这里,我们在注册成功的时候。哎,不在这注册成功是不是在这。干吗去?迪奥用get message。能不能看到可以吧,这不获取消息列表是吗?那在这个login登录成功的时候。是吧,在我的这一个获取用户信息成功的时候。
20:07
这个能不能看懂,好没问题啊,那没问题的话,那下面我们在这里面。如何获取的来看它获取是不是得去调用API的接口的请求函数。那我在这里面定一个咱有的IEQ,你看下意思。对吧,其实还有一个我们后面要去用的,也给他拿着吧。能不能好,下面我是不是应该叫他去。就它这是一个异步操作,也就是说我们需要这么去写response,还记得这个吧。我不要去获取他的返回的结果吗?是不是,那此时我需要在这上面加一个什么think?
21:07
能理解吧,是不是跟前面一个写法一样,我这个来看一下,我不需要传任何参数吧。是吧?能不能看到好那。继续往下啊,我得到这个response,我后面的写法非常固定的啊,Result等于response点什么date,而result里面啊,必须保证它的扣为几。而且零嘛,如果是零是不是说明成功了,好,这个要说一下。现在我的result.date是一个什么样的结构?看下接口文档。是不是就他。得到users和chat message。的对象对吧,就整个吗?这不是获取消息列表了吗?那也就是说现在我来啊,得到了一个对象,对象里面有什么呢?
22:10
User是还有什么呢?等于是不是,那现在我一步获得的数据,下一步应该干嘛呀?是不是得到数据后,下一步又分发X吗?那分发一个什么样的同步X呢?我现在得到了一个,得到了一个message,对不对,那我们刚才不设计了那个。有两个吧,一个叫receive message list啊,一个叫receive message,我应该用哪个,是不是用它所对应的,那我要为这两个写什么对应的同步X么?就咱前面不是说过吗,对不对,来写一下。
23:05
还是写在这个位置。啊,这个是说接收什么呢?消息列表的同步action。是吧?Receive a message is不好。Type尾随。CME,好了,关键是这个date是什么,现在我要往它里面传几个数据,大家看一下。大家看啊,我们现在是不是得到这两个数据都要保存起来的。那所以啊,我此时应该怎么做去啊,我去调用这个receive,大家看到receive message传什么。
24:04
是把这两个数据都传过去。宝传的方式啊,有两种方式,一种呢这么传对吧?啊,一种呢是这么传。能不能看到,那好了。啊,那这样的话说明什么?说明我的这个我的函数需要接受它对吧,我的对是谁它。对吧。这个能不能弄。好,那这个现在这个写法有问题,你说现在我现在我有一个啊,大家看到啊,啊,我这一个,我这一个调用它,我这里面不仅我要分发呀,分发应该这么写。迪斯派。
25:00
这不得到一个很是吗?但是我现在缺什么?缺我有吗?没有没有怎么办?对呀,就这么一个套路,我开始想不到,现在我想到需要一个东西吧,那我说那说明我这个前面的调用就有问题。他有没有。有没有?他能不能看到第这怎么可能看不见呢?这不有吗?是这么回事吧,那也就是说其他的下面的我们的也都什么一样。这个啊,实际上在告诉大家,大家在设计一些函数的时候,开始很难设计的一步到位,尤其是参数,尤其是参数,对吧?啊,你开始不用想太多啊,能满足你当前的需求就行。
26:01
嗯,如果后面,哎,我的新的需求需要去添加一些函,添加一些参数,那你再去添加,因为有的事情只有你需要的时候,你才能想到,我需要才的第一次开始,你刚才你怎么可能想到了,对不对,很正常的事啊。好,那这样的话我就分发了,大家看到啊,我在这里啊,在这里就分发了一个叫receive message list这样一个呃,同步action,那这样的话,我的这个receive里面是不是可以去处理了呀。对吧。但在处理之间,我们想一想,它给我的数据是一个什么结构?刚才传过来数据什么结构对象,对象里面有什么users和谁?恰恰messages?
27:03
对吧,那我们最终啊看着我。看着我,我要返回的,大家看到啊,我要返回的是这样一个结构啊,是首先啊,原本的啊,我会这么写啊,我先把它取出来吧,好吧,先把这个数据取出来,一个叫users啊,一个叫char message,等于什么date。这能懂吧,我最后大家一定要知道啊,我最后return的结构必须是这样一个结构吧。这个能不能懂,而这个结构怎么产生呢?大家看,我先写,看大家懂不懂。啊,在这个里面啊,因为我是接收,那我就很简单,我就用的是它的值应该谁。是不是就有这事?不就是最新的吗?我管我不用管以前是多少对不对,因为我是接收嘛,接收一个新的还是什么。
28:07
恰message刚好也是这个吧,好,这一个该怎么办呢?对不对,这个肯定是不是要统计啊,但是我现在不做,所以我暂时的都搞什么,你先放着。啊,因为我们现在还不做那个功能。能不能就还没精力去做那个。能理解吧?嗯。好,那也就是说啊,现在啊,现在我们去。啊,接收了一个message list。好,说完这个基本上差不多了,下面要说一个事情,前上午的时候,我们有一个问题没有解决,哪个问题呢?就是这一个,这一个调用时机。不太好。我们前面在什么时候调用呢?发消息的时候,这哪行啊。
29:06
对吧,这个不行的原因在哪,就是我们这个B,我一上来就希望能够。初始化这个说IO是吧,能启动监视,但不论是发消息的才做啊,我可以在哪做了,大家看着我。大家看到我,我在这里来做,我不有一个get message吗?我不有个他吗?是吧,我就在这做。这做肯定没问题,为什么?前面说过他什么时候做来着?用户登录成功对吧。能不能无论是你手动的去登录还是自动登录,反正是登录了对不对。这个能不能,那我马上就去初始化IO可以吧,这个时机非常好。好。
30:00
那到这里我们这一个流程就算是写的差不多了,下面呢,我们来去看一下,看看我们能够是否能够去显示啊。读到列表数据,先看一下列表数据能不能读到啊。很简单,我们当前这个账号啊,当前这个账号我去用啊,刚才是那个什么,是不是大乘一呀,大乘一有消息123。啊,点击登录好界面肯定还是没有去显示的,因为我们还没还没有去显示,我们主要看什么。看Rex。看。它是不是有一个receive,什么message list。对不来,这里面传过来的一些东西看到了吗?啊,最终看一下状态恰。有没有user是有啊对吧,大家看到啊,每一个user啊,属性名是这一个啊,值是个对象,对象里面user种内和什么看好接着看一下是刚好四个呀。
31:11
能看到吧,有三个为first,有一个为什么。啊,我们看一下那个总的消息是多少个。这行都跟咱相关是吧?嗯,刷一下一共刚好四条对吧?啊这个地方有应该是有我发也有发过我对吧?啊这里面我就不仔细的去看了吧,啊等会后面我们显示了再去看啊,是不是正确的好,那此时我们就能够去。是不是读取消息列表读到redu里面去了,那后面要做的事情是什么?把显示出来呗,后面的事情啊,把它显示出来,好好停一下。
我来说两句