039-直播间模块-follow业务原创

好了两位，咱们这一节来看一下我们关注和取消关注啊这一个功能啊，玩过抖音的呀都知道啊，我们看好了一个小姐姐啊，我们希望关注她，这样的话，我们会后续啊都会得到她的视频的推荐啊，所以我们在这里的话就可以点击这一个关注按钮哈，我现在是关注了杨左，点完关注之后啊，这个按钮应该变成取消关注啊，等我关注了这一会儿之后啊，这个粉丝啊，应该在原有的基础之上的话呢，应该是加一啊，因为我现在是零个粉丝啊，说明杨左这个用户啊，就零个人啊，所以点完关注应该变成一就对了啊，但是咱们是在基础之上加一啊，这样才对啊，所以我们应该把这样一个功能的话，咱们来划分一下，看看怎么去实现，那其实在这块功能的话，首先就是咱们界面这一块，因为我觉得界面业务这一块实在是简单，咱们只需要要控制一个状态啊，这个状态一会儿是处理。

的时候显示关注啊，一会儿是呃，False的时候显示啊，取消关注啊，然后在这里呢，让他进行加一的一个处理啊，然后再取消关注，再减一的一个处理啊就可以了啊，当然同时的话呢，我们每次关注和取消关注别人都得知道，然后就是谁关注了主播，所以这一会儿咱们还得用到咱们的TLS啊，应该走这一套东西，但它底层的话是基于咱们即时通讯的这个I'm应用啊，那这样的话，我们是基于它的一个接口啊，我们应该发一个调用啊，这样的话，别的在看这个直播间的小伙伴就会收到一条消息说啊，谁谁谁关注了主播，谁谁谁取消关注了主播啊，如果觉得取消关注主播略显尴尬的话呢，咱们可以把这个功能给他取消掉啊，这样的话呢才对啊，同时的话，我们关注完之后，我们除了走TS啊，能够在我们下面这个聊天区显示出来，我们还应该走一下咱们自己的后台系统存储在我们。

自己的数据库中from哪个ID to哪个ID啊，然后在什么时间啊，这张表的话，我们称之为叫follows这张表啊，因为这张表将来记录着啊，到底有多少个人关注的这个主播啊，这样才对啊，因为我们像即时通讯这里的话呢，他并不会去帮你去记录这些啊，几个赞呀啊，几个收到了几个礼物呀啊，或者几个人关注着你呀，所以咱们照之前的这种思路的话，都得单独的在咱们自己的后台中啊，咱们得存一下这条数据啊，我得知道到底谁关注了我啊，到底谁给我发了礼物，到底谁给我点赞了啊，所以这些信息啊，都得对应的在自己的后台业务中进行同步，好，那这样课文分析完了之后，我们认为像关注和取消关注这个功能，咱们一共分为三节课啊，第一节的话，咱们把取消关注，关注这样一个业务的话，咱们给它完成了，第二部分咱们在后台中啊，做好相应的一个配置啊，并且在。

在聊聊天区里边，能够让别人实时的得到这一条关注和取消关注了这个信息啊，咱们在第三节的话呢，再把一些啊，第一次进来呀，咱们需要就立即显示有多少个粉丝对吧？哎，以及一进来之后就应该显示是不是曾经已经关注这样一些周边业务也给处理好了，对吧，那这样的话呢，我们这个功能就算完成好吧，另外行，咱们继续来看一下我们这里，其实在这里很多人说那客户我们现在就要设置一个is follow的这样一个字段，这个字段的话是true就显示什么，是false就显示什么，那问题这个字段我需要在哪里定义呢？因为很多人就觉得说，哎呀你看整个上面这块内容，就在咱们当年写的room hi的这个组件里面，包括这个按钮都在这儿呢，可们，所以我应该把那个状态字段设置在我自己的room还GS中了就可以了啊，在这里我想说呀，如果单纯的为了实现咱们。

这样一个业务的话呢，哎，将吧将吧能实现了，但是另外你要注意哈，咱们将来还要做的功能是点击养左这个头像会弹出来user car的这个页面userc card的就是我们的用户简介啊，在这坑给你把图截在这里，你可以看一眼，你弹出来这个页面这里的话呢，它依然呢，还有这个点击关注信息，所以这一个点击关注这一个跟咱们外面这一个点击关注这个他们俩是同步的的，有这块我点击了关注了啊，我点了一下它应该是变成取消关注，那这个位置点开了之后，显示出来也应该是取消关注，所以他俩是在同步，但是他俩将来一定是分属于啊不同的组件里面的啊，所以我们在这里呀，而且是这种是么，好的好的话就是亲兄弟组件啊，你要做个通信，那要是再不好点数值啊，隔着更远的组件，所以在这里其实我们更理想的状态的话呢，应该把它这样一个字段的话呢，放在我们的。

副组件中去管理，甚至是应该放在我们的状态管理中啊去做。如果咱们这个小程序，如果咱们用的不是原生小程序开发的话呢，咱们用的是像我们的UNAPP啊，微pay等这些的话，你就很明白了，可以引入咱们的view了啊，或者是基于咱们react的一些状态管理工具引进的干活就可以了啊，因为你要做这种全局的状态管理嘛，共享状态的管理嘛啊，当然你也可以在这里去引入我们的啊一些小程序啊，自己的一些状态管理工具，像一些网上有一些小工具，基于Mo斯改造的小程序的啊，还有一些小程序的sport啊，这样一些小的状态管理工具，甚至是你自己写一个订阅发布模式啊，都可以去做啊，基于watch订阅啊，或者是基于咱们的object DeFine property，你自己写一套啊，我们每次数据改变完之后啊，都能够监听到啊，再能够控制我们页面的更新这样一个功能，好吧，所以在这里的话，其实业务可以无限的扩充的，OK。

在这的话，咱们就直接把这个字段放在我们的副组件，大家说扯了半天，你要放在副组件中去管理，对吧？大家可以啊，把它放在你的状态管理中去做啊，这些都是没有问题的啊，但是我想让大家意识到一个问题，就是像我为什么会现在就知道说我应该把它放在哪里去管理呢？那是因为克隆已经写过一遍这个项目了，那克隆回过头来发现对吧，你曾经放在自己内部去管理它不好啊，所以放在外面去管理才对呀。对吧，所以像这些东西咱们一定是啊，自己去写过一遍，然后你的思路才会有了啊，你不会说一开始你就站在一个非常高的维度上啊，一眼看穿，一眼望穿，所有的功能我都知道怎么去做，你是不断的去试错的啊，所以在这个过程中的话呢，去写项目的过程中呢，一列会在学习的过程中呢，啊，遇到问题不可怕啊，回过头来再去重新的分析一下啊，咱们又不是0BUG程序员啊，回过头再减一减，看看这个思路对不对啊。

这个最大的问题就是要有一个好的心态啊，而且能够知错就改对吧，而且得认怂，这个事，你看坑文写错代码都得认怂呢啊好了，行了，咱们闲扯到现在，那咱们接下来来看一下像这个关注功能的一个实现吧，来列位啊，咱们首先在我的live务GS中啊，咱们在这的话呢，提前设置好一个状态值，将来我通过这个状态值，我给它控制它显不显示对吧？啊，显示哪一个is for load默认值，咱们给他一个false，当然大家也知道这个值肯定不能永远是false呀，啊，因为曾经这个人关注了，你就不能是false了，OK，咱们把这个is follow的这个字段啊，咱们给这个header传过去，在这里给这个header传过去，来给它传过去，诶，我给它改成这个，然后咱们再在入门head中，咱们在接收这一个字段，怎么接收呀，是不是在属性中接收这一个字段。

它是一个布尔类型的，然后在咱们的入这个里面来了，曾经只有一个关注，那么在这的话呢，我再给他写一个什么呀，已经关注已关注吧，这样一个。咱们就可以在这里通过控制WX冒号if，然后的话呢，用上这个is follow的这个字段列为你可以想一下is follow的初始值，咱们给他这一个false，这个值如果客人没记错对吧，给他一个false，反正我通过副传值传给你的room还了你利用is follow的这个false，那一开始为甲，所以说就应该显示关注啊，就是is follow的是关注了吗？啊为那就是应该显示关注按钮让你关注，等你真正点完了之后，哎，你再给我改成这一个真就可以了，那这样就显示它了，所以我现在一保存之后，我们页面应该一开始的话呢，显示的还是这个关注这一个按钮就对了，对吧，然后接下来客人如果能够把这个值给他一个触，将来反正得相信我呀，我肯定能给他出，那这样的话呢，它就会显示这一个已关注，咱们再重新编译一下，因为热重载这个功能的话呢，确实有时候啊会有点问题。

啊在这里，诶，我我刚说的啥了，刚改了一点对吧，忘给人家WXL了啊好了，咱们重新呢来看一遍，如果给的to它就是已关注啊，如果的话呢，你给他个false的话呢，它就是显示这一个什么呀，关注，哎这种感觉就对了，好了。那接下来咱们再试一下，那我就要实现这个功能坑，那就点一下这个按钮就可以了啊，点完之后咱们先把最基本的这个界面上的改变给他做完呗，所以我现在在我的room header中，我给他们绑定这一个点击时间，然后我在这里的话给他们绑上点击时间棒的TP，然后在这的话呢，Hand到我们的这个是什么呀？Follow啊follow这个是我们，诶这个是我们，如果点完之后的话，应该是组织on follow吧，就取消关注对不对，然后在这里给他绑上一个棒的tapp，然后再就是hand到我们的follow，好，我在这两个函数中的话呢，无非就是通知我的副组件说你该把这个词给我改成true或者改成false的，因为这个状态的话呢，这个属性啊，是由我的副组件给我传过来的，所以我在内部啊，无法直接修改这个属性，所以我还在要求我的副组件帮我去做，那这样的话呢，我把这两个函数给大家一起，哎。

在咱们的room had中，咱们在这写好一个对吧，还有一个什么呢？Hand这一个on follow OK，就这俩函数给它写好了，那列外你来看一下，无非咱们就在这里通知什么呀，我们子传父就吹根一问的方法呗，然后在这咱们去通知我们的负函数，哎，如果这个是follow，咱们给他传一个出这个值啊，这次他要接收这个参数了，这次咱们给他传一个false，也就是我点完之后啊，我自己内部啊处理不了，因为这是一个属性，咱们不能在子组件中啊，直接去修改这一个属性，所以再让父组件去做来一个子传父啊，所以trigger event follow传这个true表示我要关注，传一个false表示的话呢，我要取消管注，那接下来在咱们的这个live的WXM2中，哎，我就体现在这里要给他什么呀，B的我们的follow这样一个自定义。

定义事件，你那边到时候啊，点完之后啊，我这个自定义事件就会被触发，而这个时候我的那个回调函数，在我类务GS所定义的呼调函数啊，就会真正的被调用，而且我能知道你给我传过来这个值呀，到底是什么，另外哎，咱们再来看一下，是不是我还是可以通过我们的evt.d啊，能够拿到我们啊自组件传过来这个值。

好，重新编译一遍，咱们看一下整个这个流程中来有没有问题，那现在的话，我点完之后，他应该是把那个触给我传过来，另外可以看一下351行对吧？哎，这块的标号可能有点问题，但是这块打印出来的给我传过来出，所以我在这里的做法就是我来控制那个is follow的，我给它改成这个evt.data对不？那这样的话呢，就表示的话，我是是关注了，那我再点一下你传过来就是一个false，我就给你变成了取消关注的这样一个功能，这列位可以看一下，非常非常经典的啊，一种父子通信的功能，点完之后养组啊，来到这里之后点一下关注啊，点一下点一下点一下，你看就这么一个功能啊，其实这一块的话，利用的咱们的原理就是我们基于我们父传子传过去is follow true和false，同时的话呢，我们又进行的一个回调，回调我们在我们的副主。

键中啊，同样的在控制is photo出和false，这样自组件得到出和false，再控制它显示出和false啊，关注和已关注，所以大家会发现这还是咱们的组件的呃，通信的一种应用，而且咱们也是尽量的让我们的孩子变成无状态的组件，通过副组件的属性来进行控制，那这样的话呢，我们就能够轻松的去实现我们想要的这样一些功能，好，这只是咱们的表面现象，表面业务呀，给实现了，那接下来的话，列外咱们点完了这个关注，点完了取消关注，你得干点事儿啊，你干点什么事，你得让咱们对应的其他的小伙伴能收到一条消息，说谁谁谁已经关注了，所以这条消息的话，并不是说你自己往message里面啊，这个数组里边push一个对象就行了，咱们是真的要让别人收得到，所以这是应该是一个即时通讯的问题啊，就相当于一个聊天一样，所以我们在调用我们，呃，即时通讯。

I'm产品的一个接口才能完成咱们这种啊取消关注关注这种功能，那这样的话，这个方法是什么呀？两列外跟我来到例入GS中啊，咱们在这里，我应该在这个后面来去做这个事，列外是不是等我一点完之后，我这个触发相应的这个方法，我判断了，我判断如果是evt.data它要是个true的情况下，咱们应该是调用什么呀？关注这个方法啊，关注这个方法如else的话呢，咱们应该调用的是什么？取消关注了这个方法科在这个文档中已经给大家查到了，列外也可以自己去查文档，你也可以啊用我这个文档，而在这里的话呢，我们关注的方法的话是attention啊，调用attention方法，然后取消关注的话是cancel attention啊，这样的话就基于你之前的TLS对象调用attention cancel attention就可以了，那对应的监听事件里面啊，咱们就可以拿到，哎，这一个啊，已经有人关注了这样一个消息，然后你再。

把它加到我们的消息队列中，你看这不就完成了这个功能了吗？那接下来咱们就可以在这里调用什么呀，是不是当时在这存的是一个TLS挂在this下面，要后调用这个attention这个方法at，对吧？Attention好，在这里的话，我们把这个函数咱们给它改造成a think的写法啊，因为将来的话呢，也要改成这种异步的，所以咱们在等着这块成功了，A wait，好了，这是咱们的这个关注这一块将来在这里再就是什么存自己数据库，哎，这是咱们在下一小节去说什么存自己数据库这个问题，好，这样再就取消关注，那这样的话咱们就定用了哪个方法呀，Z4点TLs.cancel哎，咱们的a attention方法at ton啊，Ten这一个方法好，接下来的话呢，咱们现在一点完之后。

这两个方法调用完了，我怎么知道成没成功呀，别人收没收得到呀，哎，他也会在自己的接听事件中能够去收到这条消息，所以咱们要再我们当时对吧，就是发送的礼物，哎，然后再接着来，往下继续顺着来呗，继续顺着来这块就是有人关注了主播啊，咱们在这里就是自己去发了这个attention和看attention也会在这个回调函数中收得到啊，大家也会发现像之前的呃，喜欢呀啊，发送礼物呀等等的，都是自己发完之后也会在对应的事件接听中收到这个消息啊，只有那个消息是不会给自己发的啊，所以这些都是可以的，所以这个是有人取消关注了主播，那这样方法的话，列外是什么呀啊，就跟咱们之前一样的，其实等你打出来之后啊，就会发现，哎，一个attention，一个cancel attention，所以在这里就是咱们的this.t。

一哎，我这样吧，我把之前的代码的话呢，咱们削微的哈，偷摸呢，再复制一下，这个有点长，我复制一个简单版的吧，在这里来。粘过来之后，z.ts.attention at有人关注了，然后咱们在关注了之后呢，这怎么办呀，就在这里说哎，Push，哎，这是一条消息，然后这就对应的把这个ni是我们的昵称的话呢，给处理一下，然这个是给什么呀，咱们应该是关注了主播吧，改成这句话啊关注了主播，关注了主播，然后再就是啊ID字段，好接下来这块合并，就这么简单，你把这句话的话呢，一复制之后啊来到这里咱们再给它保存一份，另外那在这里的话，大家就知道了，这个是将来有人怎么样呀，点cancel，它取消关注了我们的主播cancel attention，然对应的在这里还是消息一啊对应的这块这块，然后咱们在这里给它改成什么，取消关注了主播，取消关注了主播，OK，一保存之后对外，这不完活了。

好了，一保存之后，咱们现在做到的啊，就是我们呢，在当前页面中点完关注变成取消关注啊，变成已关注啊，再点一遍又变成关注，而对应的我们这个消息也能发出去，那对应的消息发完之后还能收到消息，并且在聊天区里边能够把这个消息创建在我们直播间的聊天群里，让别人看一看到底有多少人啊，在看直播的过程中啊，被主播所打动啊，被主播所吸引啊，看到主播都迷糊了，所以要关注主播，所以要取消关注主播，对吧？点完之后咱们来看一眼，来看哥们点一下关注，诶，我的鼠标在这里哈，点一下关注大家会发现真的是吧，我关注了主播再点一下取消关注啊，诶，我这个关注没问题哈，我这个取消关注好像有点小问题，来两位咱们看一下这里怎么回事，我在前面这个cance，哦，这个地方写错了吧，点什么呀，cancel.cancel诶这个。

写错方法了，有人取消关注主播，好，在这的话重新再编译一遍，那这样的话咱们来测试一下，点击养组了之后，我们现在来重新点一遍哈，关注了主播，取消关注了主播，关注了主播取消关注了主播，哎，所以你看这个东西是对应好了的啊，这边啊界面，包括我这边聊天区的显示，就说明我成功的把这个消息给发出去了啊，别人也能收到这个消息啊，因为我自己都能收到，别人也能收得到，那这样的话呢，我整个这个功能的话呢，呃，在我们这个基础业务上已经实现了，那就像科文所说的，将来咱们还要把这个数据同步的存到咱们自己的数据库中，因为将来好方便统计它有多少个粉丝，哎，所以咱们在下一小节来看一下，咱们再怎么去往数据库中去存呀，是不是这又是老三样了呀，啊，继续的创建表啊，写好接口啊，然后利用我们的数据库查询啊进行增删。

改查的操作就可以了，好，列位那下一个小节的内容啊，你可千万不能错过了啊。