055-直播间模块-直播状态原创

好了两位，那接下来啊，咱们就把我们直播应用的最核心的直播功能啊，给嵌入到我们的项目中啊，之前科文已经领着大家把我们小程序到云直播这条路咱们给走通了啊，所以我们技术调研已经做好了，所以我认为在实现这块功能的话，应该没有什么技术难度啊，但是接下来的话呢，就让咱们呀，按照我们的流程一点点来啊，在这个过程中可能Q会增加一些额外的一些辅助功能啊，首先咱们得能够点击这个按钮，另外咱们能进入到我们的这个主播页面，因为之前我做这一块的时候，咱们已经说明白了啊，一变异。只要你是授权登录的用户，他能够看到除了自己之外的所有的人啊，在直播广场里面，然后我们点击这一个能够是自己进行开播啊，我们点开之后，我们看到的主播页面应该是些许会跟我们普通人进入直播看到的是不一样的啊，但在这里咱们在这就都是统一的往咱们这个类务GS这个模块中啊进行跳转了，只不过我们点它进去的话呢，我们是需要加载我们的推流组件啊，等我们点羊左进去的话呢，我们加载的是我们的啊播放组件都是咱们小程序自带的，咱们之前这条路已经躺平了啊，然后我们点完这个之后，我也希望能够让别人在这个位置啊，能够显示出这个人正在直播一个小点，就像我们在这里的给大家所演示的这一块，如果这个养左用户啊，可文已经在手机上登录了，并且点击。

点我啊立即播放这个按钮售后，那在其他人看到这个列表的时候，他们都能够看到杨左正在直播中这样一个状态啊，那其他人未直播的话，就显示一个未直播啊，像这四个的话，咱们知道是假数据，所以客人在这里压根就直接显示一个未开通，所以这样的话，我们对应的整个直播状态的话呢，有三种，所以另外你就明白了，咱们这一小节要讲的内容就是跟我们最后一个直播功能相关的，但也算是直播功能的前戏，点完我们的立即开播按钮，跳转到我们的直播模块里来，在直播模块中啊，我们会把我们一个叫room status列外，记住吗？直播间有个room status这样一个状态，咱们给它改一下，改成二，这样的话，别人在登录之后，一刷新页面，判断是二，就显示是直播中，判断是一就显示是未直播，判断是零就是未开通直播，咱们这四个假数据这样来。

咱们这四个假数据就没有用了，就啊因为我们之前是因为坑人，微信号一共两个，我有两个都已经了不得了，你知道吗？对吧？啊，所以咱们这个小程序项目如果使用的人多的话呢，咱们这个直播广场就会很热闹了，好吧，另Y好，那关于这一块咱们来看看我们要写了代码有哪些，咱们就一步步来呗，啊我们来实现我们的直播在线状态的这样一个处理，好我们首先在点完这个按钮，咱们能进到我这个页面来呀，对不好，那在这里咱们可以来我们的小程序代码中，咱们找到这个按钮，应该是在我们的这个位置来吧，类务list中点这个按钮就开始开播了，所以我在这里直接写一个棒的click，咱们来一个handle leave这样一个方法，嗯，这个方法，诶，我这个写错了哈，棒的TP啊，然后在这里handle live咱们复制一下来到我们的GS文件中，咱们来看一眼哈，这个是handle event的处理，那接下来这一块是咱们的handle。

类的这一个处理好，接下来一保存之后来列外，咱们在这里要往那个页面进行跳转啊，我们再参考一下之前是怎么跳的哈，之前在这里是这种方式去跳的啊，我把它给复制过来。A位看一下，咱们要给下一个页面带过去我们的直播信息，因为这个直播信息里面将来会有我们的啊推流拉流地址啊，还有我们啊一些个人的信息在里面，包括我们的直播间的ID都在我们的A类务INF中啊，但现在咱们不能再从这个点完之后通过传参传给他了，咱们应该是在哪复值列外，咱们当时我记得收集的时候，哎，有人忘了，没关系，你记不记得在一开始咱们获取入类似的时候，咱们在这里给room类似的附上的这个值是过滤出来，不是当前用户的，而这个的话呢，是把当前用户给过滤出来，所以我们的数据其实是存在我们的current room中的，那这个时候current只需要把我们的current room复制给他就可以了，那这样的话就是Z4点data.current room。

另外不要小看这句话，就这一句话啊，咱们点完之后来跟客人测一下我现在是谁呀，我登录了这个账号，是隐兵这一个账号，所以接下来我们直接点击立即开播啊，我们看到了应该是隐兵的直播间的界面，点完之后看看有没有，诶另外看一下是不是典型的我们的隐兵的这个直播间的界面啊，里面的话呢，也有这样一些数据啊，我们在这里也能看到哈，隐兵这里面只有一个人在看呢，因为隐兵是这个直播间的啊，群主他现在进来看自己的内容那是没有问题的，将来我们会在这个地方的话呢，采集你的摄像头和你的音视频，对吧？哎，我们把这些音视频的话推流到我们的语音直播啊后台中啊，这样的话再播放给其他人就可以了，那这些数据，这些功能都是没有问题的，你可以自己自行测试一下对不对，随便测都是没有问题的，那在这里的话，包括我自己去购买这个商品也都没有问题是吧？啊，只不过大家有人会觉得很奇怪，说我作为一。

个主播，我要自己给自己点赞，我作为一个主播啊，我要在这里给自己，呃，直播间里面买这种商品，那咱们也说了啊，在这里我们的主播界面略微可能有点不一样啊，当然你在这你也可以盖住一些信息，比如说我们进来之后就是显示我们的头像信息，或者看到聊天区的公告下面这些什么，这些东西咱们就可以不用了啊，但在这咱们也是为了啊节省点时间啊，所以我们就直接复用了啊，我们普通用户看到了直播间的这个直播模块效果还是不错的，好接下来咱们在这里来看一下，这一块可能会出现一点小小的问题，点完这个退出之后，列伟来跟客户走一下退出正常咱们就退出了，对吧，然后这个时候的话呢，我们再点击进来之后，列外可以感受一下啊，这一块已经就报错了。

我们再点去退出啊，好了就能退出了，这是为什么呢？另外在这里我们点进来之后，第一次是一点没有问题的，为什么第二次就会出现问题呢？这个功能的话肯定是坑，之前测试过出现的，那坑就要告诉大家了啊，退出去没问题，第一次第二次在进来就出问题了，这块是什么问题，另外可以看一下，在这里往下咱们咕录一下，往下咕噜一下，他在这里显示了一个什么呢？他说你已经登录了这个账号了，如需切换了的话呢，请先调入lock out，这个是答案不对啊，看我点击这个返回啊，就是我清清楚楚的记得当年你告诉我们了，怎么样退出这个账号，来，咱们来搜一下这个代码，我记得应该有一个一个Z似的room这样一个核心代码。

咱们是不是在每次半开按钮点完之后会退出我们的这个群聊呢？我们是的，我们会退出群聊，但现在为什么再次进来之后，他会告诉我已经登录了呢？啊，已经登录这个账号呢？在群聊中这是为啥呀？难道退出这个功能不好用吗？另外好复制一下，咱们来查一下这个接口，在咱们的腾讯云的啊这个TRS的文档中来查一下，往下走大家会发现有这样一句话，什么呢？退出房间，但是主播和群主他是不可退出房间的啊，就是主，群主不就是主播嘛，他退不出，所以我们刚才是以主播的身份进去的，列外啊，咱们点完这个之后，我都说了，我是隐兵的账号登录的，然后并且是以兵的账号点完这个进来的，那我们之前的退出根本就没有退出，因为他是不让退出的，这个房间再退出没房没人了，他既然不让退出，这会就出问题了嘛，因为你不让退出，所以再次撞上的时候就会出现问题，说已经登录了，包括。

你在前面的话，撞了之后你拿不到信息啊，那咱们来看一眼，在这里好，在这里，另外诶往上走，在这个地方，大家会发现我这个打印这个什么的时候出问题了，你看一下这块报了这个错，他会引发什么问题，大家说登录了，过去登录一遍呗，那你引发什么问题呢？它会引发你获取这个值出问题了，大家还记得吗？另外咱们在这个位置，咱们要获取到我们的这个get啊，这个customer啊啊，Group customer fail的这个信息，这个信息的话呢，拿不到了，因为group in现在都有问题，你看一下，因为你之前已经登录过了，你重新调用照用room方法是不科学的，所以在这里你打印一下，咱们来测试一下来test的杠，你会发现group iner它都已经是空的了，所以这不就出问题了吗？好，保存之后咱们来测试一下，来跟客文测一下，重新编译一遍。

注意哈，第二次才能出现这个问题，先走第一遍，很很好很正常，好撤掉，然后再返回之后再点击登录进来，你得允许主播重新的登录啊，这没有问题吧，但人家你会发现unDeFi了，所以这个就很科学了啊，就能讲明白道理了，就是因为你曾经已经登录过了，所以再次调用状人room是不允许的，那这样的话咱们怎么做呢？啊，我们既然之前已经登录过了，我们应该怎么来去处理能裂纹啊，咱们在这里就可以非常方便的通过一个方法，什么方法来判断一下一夫。如果group infer现在是个假，他知道是犯的，那咱们在粘过来，如果为假，那咱们取法就是为真的情况下的话呢，咱们就在这里对于group in for例外，哎，重新给它找一个东西附上值什么呢？来，来到我们的文档中，你会发现这个文档中有一个叫get room for这个信息，诶，Get room这个信息拿到了，就是我们聊天室的这个群的这个信息，我们得通过this点调用Z次点TLs.get room infer，那这样的话呢，我们就会把我们的群组信息通过这种方式附上值，所以在后面再去获取也不会出现问题了，那这个时候需要注意一点，Group iner它是一个count的啊常量，咱们在这给它改成let的写法，好一保存之后来列位，咱们来看一下效果，你想第二次再进来，这个为假了，因为我之前已经照用过了，那取反为真，那这样的话重新附上值啊。

就会把这个group in拿到那最后面再get这些纸就不会出现问题了，好了，列位重新编译一遍，跟科们来测试一下吧，走，你点击我要开播了，好了，我现在是引兵里面只有一个人在看，对吧？那接下来咱们退出啊，我们引兵退出之后，接下来引兵可以再次进入直播间，好，咱们来看一下哟，这块怎么还是有问题啊，我看一眼这块出什么问题了。

我这个group in这里出什么问题呢？哦，这个地方的话，咱们没有什么呀，呃，Wait去等待它啊，导致我们这块后面过早的执行成这样吧，课文在这里的话呢，AWA1下来等一下，等一下awa好等一下，因为这块的话是一个promise的一个结构是吧，好了，我们重新的再来一遍，好走你重新的编译一遍，我们再来看一下来第一次点完之后的话呢，走好，接下来我们已经登录了，对吧，那这个时候我们退出了，我们再一次登录之后列外诶就很安全了，你看一下这个时候你就可以对吧，退出再来。对吧，退出再来，因为你这个时候拿到了这个信息的话就没有问题了，列微可以看一下，在这个地方你打印出来了，就是我们直播间的这一个信息呢，OK，这就是我们关于这块的一个解决方案，列微记住了，主播自己点进来将无法再推出啊，那这样的话呢，我们就通过这种方式啊，我们获取我们直播间的这个信息啊，而且这块为了别忘加上去啊，要不不加的话呢，这个代码会先执行的，同样的我们也拿不到这些信息啊，因为我们的a wait a think的写法会让我们这种异步变成同步的写法，但你得知道这个先后的顺序的好了，这样的话呢，我们第一次进来，第二次进来就没有问题了。

那剩下的功能的话呢，就是我们来做什么了呀？哎，就像客人说的，咱们再弄一个状态码，一进来咱们给他改一下，一出去再给他改回来就行，咱们在我们的数据库中可以查一下，我们每一个直播间，咱们都有一个东西啊，咱们来查一下，里面有一个叫做room statuss，另外还记得零是当时我造了假数据，给他写死了几个零，好，零咱们就说了对应的状态叫未开通直播这个状态，而一的话，现在就在于什么未直播的状态啊，那科一进来之后，咱们给它改成这个二不就好了吗？

哎，所以这样的话呢，我们再点击这个返回按钮，咱们再给它改成一，那这样至少是我们在这个状态下是一对不对，我引兵点进去之后，我改的就是引兵的这个值给它改成二，点击返回，再把隐兵的这个rooms给它改成一，注意点我们是当前用户是不是，哎是引兵他直播的时候点进去，他要改成这个二，退出来改成这个一啊这一块。好，那接下来咱们就可以在这里的话呢，来去试一下这个功能，当然在这里光靠这个按钮啊，点进来还有返回这块，那用户有可能不这么返回，如果在手机上的话，咱们还可以通过什么安卓上有返回键，还或者直接用手势进行返回，对吧？而且包括我们的小程序的话，也可以把它直接放在后台，那这个时候都是没法直播的，所以咱们都得考虑到位了，那接下来坑在这里的话呢，咱们一起来想一想，诶啊每一点都得考虑到了好吗？来接下来我们在我们首先我们在类物类似的这个地方的话呢，咱们点完之后另外。

是不是在这里点的呀，点这个位置点的咱们要做一件什么事，们要确定好了，我们要改什么呀，改我们这个状态，哎，改变room status，咱们给它改成这个二，我们要在这里进行操作，因为你点进来了啊，表示我们已经准备开始直播了啊同样在这里我建议大家也设置一个全局的APP这样一个池a live这个为什么要设置这样一个状态呢？啊大家说一开始我想不到，后来呢，我知道了，可文啊，为什么呢？是因为咱们将来你想一下来Y你回来在live.gs中，你这个exist的退出这个直播的话呢，你想一下你退出直播。

Exist的group这里，因为咱们是共用的，甭管是我看直播的人还是我们正常的啊这个啊直播的人他们都会走这个exist的room这个方法，办个这个方法，你说我是不是还得分一分呀，就是如果这个人他是主播的情况下的话呢，咱们再调用那个改方法，如果不是的话就不改，对不？而且还有在我们的APP啊，就是我们将这个小程序呃，放在我们的后台，我们给它隐藏掉，比如说我按俩手机的home键啊，回到后台中，我们肯定要给他改成这个一，但问题来了，那我正常我不在这个页面中啊，我已经我不在这个页面中，都我没在这个直播页面中，我都在这，你给我改什么一呀。

是不是就没有必要这个事情啊，所以咱们在这里最好的话呢，就在这里你存一个状态，这个状态是全局的，它标识着我们到底是在主播啊，直播这个页面中，还是在哪个页面中啊，所以咱们就来一个is live这样一个东西，所以判断这个东西为出的时候，咱们再改成一，改成二这样一个状态就好了。那接下来的话，咱们可以在这里，我看一下这里好像没有引入APP吧，啊引入了一样啊没关系了，好了，那这样的话直接就是APP点类，我就在这里，我给它改成这个true对吧，改成这个true之后，顺带了的话呢，我在在这将来我要做的是改变我的room status等于这个二好，接下来来咱们把这条路咱们给它组通的列外在这里咱们怎么去改这个room，我是不是要在这里发一个请求啊，我可以通过，哎，我们放放在放在前面去做好吗？嗯，把这段代码剪过来，咱们放在往上点哈，点完了这个按钮之后啊，坑要放在往上一点的这个位置上，然后我们格式化一下，好，我在这里的话再给它来一个A，我们来一个model啊，Model没有引入，这次model咱们再给它在这个页面中，咱们给它引入进来，然后model到通过什么方式来调用呀，啊model到点儿啊，咱们都习惯性的用model到了哈。

放到点，我们change room status，我们调用它，那这个时候的话呢，我们需要传过去的内容有什么呀？列外是不是有我们的这个此时的I'm的ID，就是我们的群组来，诶直接通过它就能拿到吧，我们此时这个APP live里面不就是有我们的群组的这个ID吗？然后咱们在这里把我们这个type，咱们给它规定成传成二，表示我要改成这个二，当然这块的话，咱们只是传参它不等于二，还有我们这个R'M_ID的话，咱们给它改成AP点哎，我前面写的z.current点我们这一个M。

下划线。ID，好的，另外来咱们把这个change room这个方法咱们给写一下来到我们的model到点GS中，对不对啊，Model到了index GS咱们在这里写，好，我看一下这里哈，好，到这里来，咱们是不是得把那个解构出来呀，一个是我们的type，一个是我们的下划线I'm_ID那将来的话我们就是往我们的哎后台的一个接口，咱们发起一个post的请求就可以了，Change room post的请求咱们把type还有我们的I midd给它传过去，好，咱们做一个最简单一个测试啊，因为我们把这条路给走通了，那接下来在我们的后台代码中打开我的API，要新建一个文件叫change room，四好，就在这里，咱们可以把之前的代码啊粘贴复制一下来，我看一下哪块代码比较好复制呀，我们找一个啊，找到我们随便找一个like吧，这个like好像使用的频率挺高的。

制过来，粘过来之后，好，咱们来看一眼，那这里的话正常使用这个没有问题，咱们要解构出来我们的R'M_ID还有我们的这个type值，因为我要知道我要改哪个直播间的，对吧，这个type值就是room，咱们要给它改成二，那这样的话，把这一块的话，咱们给它先暂时啊注释掉，先保证代码能够跑通好，再把这个改成咱们的change room status，我们把这个复制过来，好粘过来，最终咱们把整个这个模块引入到我们的app.js中，咱们进行一个注册，好吧，来走。API好，导入我们的啊，这个change room4，然后接下来在在这里的话，我们开始post请求room change，另外看一下，只要有人朝这个地方发post请求，我这一个函数就不会坐视不管，我会接收到前端post过来的数据，然后将来好进行数据库的一个操作，我这个接口写好了，那小程序端这里的话，只要你敢朝这个接口发起post的请求啊，就把你的typeb值就给我传过来啊，我就会把这些值给你postose到后端中，而这个方法最终是在咱们的哪个页面中，是不是在这里点完咱们这个按钮，咱们就会调用这个方法啊，最终的话，咱们看看能不能在后端中收到，要改哪个直播间的状态改成二啊，对吧，好了，保存之后来跟Q文最终编译测试一下，只要我现在一点这个小按钮啊，怎么有点卡住了吗？重新咱们编一下啊。

嗯，代码出什么问题了啊好，我我这里好像犯了一个很严重的错误，是不是wait随便用没有A啊，我们的小程序也真是啊，挺梗啊，就是不报错啊，我也不告诉你为什么，反正就不好用，好，咱们等下点一下这个我要开播了，来走，你点完之后列位好进到这个直播间页面来了，那咱们来看下我们的后端有没有收到呀，哎，在这里列外看一下tab等于二啊，咱们要改的是这个，这个就是隐宾的这个ID呀，对吧？哎，那接下来的话，咱们就来操作一下数据库就可以了，因为change room你写一遍就完事啊，在这里咱们给它来放出来还是一样的啊，连接到我们的数据库中，然后接下来咱们只要写条语句就可以了啊不对的，更新嘛，更新我们的什么room资，然后的话呢，我们可以在这里的话，诶，我把这些东西不要的先给它删掉吧。

好，课程给它改成这个写法，那这样的话呢，我们来试一下啊，我们更新rooms set，我们room statuss，咱们给它改成什么指列呗，咱们给它改成s sta USS，咱们给它改成这一个来，是不是就改成这个值就行了呀，我们的type这个池，因为咱们要说了，把这个从这个一啊给它改成这个二，但是这个是有条件的，你不能这个所有都改呀，所以我们在这Y啊有一个条件R'M_ID是给哪个改，你不要给所有的都改呀，对吧？哎，这里的话呢，咱们找一个来Dollar符我们的R'M_ID那这条语句的意思就是更新我们的啊room这张表，然后呢，条件是我们I mid是这个直播间的事，把那个room s改成这个二，将来你传一我就改成一，传二我就改成二，那这样的话，一保存之后列位来走，你咱们来看一下效果啊，重新编译一下。

好，那接下来的话，咱们一点杨，诶点错了，我怎么点杨左去了啊，不是点杨左啊，咱们不是看别人直播，是我自己要直播，好了，进来了之后，咱们来刷一下数据库中，看下这个是有没有被客文给改成二了，是不是引兵的这个直播间，因为引兵进来了嘛，我成功的给它改成了这个二了，所以说我成功的列外，所以一进来之后啊，咱们就把这个值设置成二，好接下来咱们就一样的，哎，照着葫芦画个瓢就行了，我们在对应的小程序的这个返回按钮中列位来找到小程序里返回，所以在我的live务GS的我这个handle这个方法中啊，返回按钮中，是不是我就可以在这里将这个点类，因为你点的这个退出群聊呢，如果退出成功之后，哎，是不是点赞这里我们啊返回了页面，并且隐藏了这一块啊，退出了成功，所以我在这里写一句话，什么呀，我要将这个。

同学给改了，当然这一块的话，也有可能是看别人直播的推出，所以要判断，先判断app.is live哎这个字段，如果这个是真的情况下，咱们再推，所以我就在这里就可以讲什么is.is leave，咱们给它改成这个false，然后同样的再来一遍我们之前那段代码，咱们把这段代码从我们的这个页面给它粘贴复制一下呗，就这段代码来走，你复制到这里来啊，我们是不是把这段代码给它粘到这个位置来就行了呀，啊，咱不要喂它了，所以这样的话，趁着room斯的时候，咱们给它改回了这个一，所以说你点返回按钮的时候啊，我也不是啊，这个见人杀人的，我是看你如果是点直播进来的，那这个执应是true，所以我得给它改成false，再对应的，我们再把这个值的话呢，再给它改成，哎，这一个对应的一这个效果好，一保存咱们来测一下，来重新编一下。

看咱们列外啊，现在咱们点击我要直播，很明显是给我改成了二了，对吧，这块咱们测试已经验证过了二了，好，接下来看客户点这一个返回按钮来走，你点返回按钮，点完返回按钮之后来咱们来看一眼啊，返回按钮这里我光复制粘贴了，这不出问题了吗？我这里就不能复制它了，我这里用的的是谁呀？z.data点我们的group in，点咱们的I'm_ID这个值啊，是不是这个值啊，或者是你的app.live in符这个也行啊，就是我们这，因为点进来之后咱们不已经存上了吗？所以就这个值嘛，所以你也可以在这里直接用它，这都一样的啊，都一样的这个值这次就没问题了吧，应该啊，咱们再来测试一下啊，好，重新编译完了之后，我们点进来之后，我们现在是二，我再测试一下看看这块是没有问题的，是二哈，好，现在是二记下来，咱们点击这个返回之后，OK。

给咱们再看一下这个值有没有被我改成一了呀，哎，好，这就成功了吗？对不啊，就这样一个效果，好，这只是咱们这个用户按照点按钮和点这个返回按钮，那咱们也知道，如果在安卓手机上或者在手势时间上，咱们可以直接按一下，在手机上滑一下，这个页面就会被关掉，那这个时候的话就是相当于从这个页面撤出来的时候，咱们就给它改成这个一，对不对，那这个时候我们怎么去做呀，我们可以在我们接听不到手机的返回事件，但是我们可以知道这个页面什么时候被干掉，咱们有一个on load被卸载的时候，对不对，列外，所以我们可以在这里的话呢，把那套代码给它复制过来，哎呀，我应该先复制的哈，来，我在这里先exist的先找到。

我们把这段代码就这段小判断这段代码，然咱们来这个啊，我复制了哈，CTRLC好来到这个on load中来粘过来，这表示什么意思呀呀，我没粘过来exist，然后在这里判断这个条件，CTRLC我复制了啊，然后在on的页面卸载的时候呢，我再让他走一遍，表示如果这个值为真的情况下啊，要是我假咱们就不走了，对吧？哎，再给它改成false，再同样的change一下就完活啊，所以说如果这个时候你走的时返回的按一下返回按钮也会改的，来跟我测试一下，当然这也能测啊，咱们来测试一下哈，在这里重新编译一遍，首先咱们进来之后是不是改成二了，确认一下有没有改成二来，我看一眼效果，呃，在这个地方刷一下改成二了吧，我要直播了吗？好，咱们小程序中啊，有这样一个模拟器，模拟操作里面有一个返回，拿手划了一下屏，返回了页面，被卸载。

了，对不对啊，所以在这里的话，咱们点了一下这个返回一般被卸载了，那在卸载之后咱们看一下他走了吗？那走没走看一下刷一下就知道了吗？他走了没有呀，很明显看他走了啊，所以在这个页面卸载的时候，咱们模拟一下返回按钮也好用好了，就是这一个。啊，那除了这个返回按钮啊，还有咱们自己写的返回按钮啊，那接下来还有什么呀，如果用户正在直播的时候啊，他直接选择了直接按着home键回到首页了，或者直接把小程序给他串干掉了，对吧？咱们也知道不同的手机啊，摧毁一个程序的方式不一样，但总归是能摧毁的吧？啊所以咱们也是在想到有这样一个场景，那这个时候我就想说是不是在你的小程序的整个这个APP的生命周期中。

你也得想点事啊，想点什么事是不是得判断一下呀，On show啊，如果我只是回到首页，我还会回来的话呢，那在on数的时候，咱们就给它改成二啊，这样的话显示在线，将来的话，On hand的时候，咱们给它改成这一个一，表示不再直播，你要销毁的时候，整个小程序一定也会走on head生命周期，所以这样来说的话呢，就说明白了，On head中咱们给它改成room改成一啊，On受中咱们把给它改成这个二就可以了，所以在这里面来错呀，就没有问题了，是不？哎，只不过咱们在这里的话呢，还是一样的，在拿到这句话我给它粘过来，然后这句话，但这里的这句话有点小问题，是什么问题啊，这个APP列外请你改成Z啊，你这里没有APP，是z.is level吧，Z点将这个值的话呢，给它改成啊这个false对不对，哎，咱们是进来的时候对吧，我们是重新进来了。

那这个时候我们就直接发请求就可以了哈，我们在这里因为发请求就可以了哈，如果这个值是真的情况下，咱们将它改成这个二是吧啊，如果这个值的话呢，是假的，这个情况下的话呢，我们这个哎呀差一点又得出问题啊，就每个小细节都注意到了啊，因为咱们在之前不是存了这个Z4点内阴份啊app.live in份，现在在APP这个实例里面直接这样存就可以了啊，咱们给它改成这个一列外来可能说了这个大家能明白我们的意思啊，所以在这里啊，就是我们已经在判断这个值为帧的情况下，为帧的情况下，在能走就说我已经进入到这个直播页面中了，这个时候我摁了一下返回。

啊，错了，摁了一下我们的回到首页，那这个时候就给我改成了这个什么呀，啊改成了一，如果再重新再进来，再给我改成这个二，表示我的直播状态啊对吧，实时的一个更新，好吧，另外行，那接下来咱们来测试一下啊，最后在这个页面中啊，千万不要忘了一件事啊，千万不要忘了啊，把你的这个model给引入过来啊，稍微一得瑟呀，就得报错了，我这个model好像还没引入呢，就在这里导入我们的model home点点上一级，点点上一级吗？诶不用了吧，是不是点model文件夹下的index好保存之后来咱们来测试一下哈，你看看对不对哈，整个流程哈，假如说我现在在这里的话呢，这肯定是没有反应的，你现在返回呀，首页呀，销毁都没反应哈，点击这个时候咱们进来了，我认为现在已经给我改成二了吧，对不对，已经是二了吧，客们们，好了，咱们就不要再测这个小返回按钮，还有我们的模拟返回了。

他们就测一个什么呢，模拟操作是回到home，按一下home键。按那一下home键之后，刷新页面，咱们看一眼，你看看按那一下home键之后，它会走咱们小程序的onha的生命周期，这样的话就给它改成一了，如果这个时候我们摁完home键之后，我又回来了，列外我又回来了，对不对，我摁完home键我又回来了，好，我又回来了，回来之后咱们再测试一下，看一眼刷新之后又变成了二这个状态，诶这就很完整了呀，那这个时候我们的用户的话呢，就可以在这里在就是点击这个或者是这个划一下，这样的话就最终的话就给它关掉这个直播了，那这样的话就变成了这个一了，你看看活动我们这一块的话考虑的就很周到了嘛，啊虽然我们现在没法直接看这个直播效果，因为我们这个模拟器现在只能看一个，那科文也没有部署到我们的真机上给大家去演示，但没有关系，咱们至少自己已经很准确的明白，我们要想实现观看我们此时到底这个人是不是在直播。我们可以通过我们。

嗯，当时表中的一个room目stas这个状态来判断room目是零，是咱们的假数据，一是未直播，二是开播了，那这个时候我们就在我们的隐藏的时候，咱们让它哎不开就变成了未开播状态，显示的时候变成开播状态好用啊，包括我们在类务GS中，我们on录页面卸载的时候，改成未开播状态，包括我们在我们的这个地方的时候啊，在我们exist group啊这个方法调用的时候呢，我们是不是也给它改成了我们的这个away直播了一个状态，而在咱们点击这个大按钮进来的时候，咱们就给它改成直播，好，咱们在这接下来就是把我的页面给它改造一下啊，因为我现在有这个room，蒂特死了之后呀，我只要把页面再给他好好的修正一下，那这个效果就太完美了吧，好了，接下来咱们来看一下，在这里我们找到我们这个是live list这个页面中。

吧啊，咱们来看一眼啊，里面还用了一个外面的组件live item，所以最终是在live item里，所以要找到live这个组件live item，点到点开它这些代码呢，咱们把这些其他的给它全部关闭，咱们只打开我们的live item，应该是只看插面，还有WXS咱们就可以了，因为我可以在这里拿到item，就是咱们里面每一项能拿到room room name，那rooms肯定可以拿得到的，好，之前的话呢，咱们在这里啊，当时啊，直接写的这个image啊，我们在这里给它包一下，对吧，我们在这里给它包成一下view这一块。咱们里面的话给它放上这个image，套一个这个image啊，再套一个我们的view，那在这咱们可以把这个东西给它打印出来，是不是列位，你在这你就可以根据什么呀，咱们应该有几个状态呀，未开呃，未开通吧，未开通一个状态，还有未直播啊，还有一个直播中这三个吃对吧，直播中三个吃，那接下来我们在这里就可以判断条节WX冒号冒号if，我们直接通过我们的item.rooml4如果等于等于零的时候的话呢，就是我们的未开通状态，然后接下来我们复制一下我们在这里我们来一个E啊，我们的else if else if咋写呀，L if我们在这里就是room是等于一的时候，我们就是来一个这个未直播啊，最后再来一个WX冒号else列外可以看一下，至少这个效。

我现在是没有问题的，未开通未开通未开通下面这个就是未直播啊，那你想一想，如果真的是等于二的时候，那肯定是走的是直播中了啊，只不过这个效果太丑了哈，咱们稍微的给他啊美化一下吧，来在这里课文给他加一个container。

啊，Container加一个container container这样一个class名字，然后咱们再给我们里面的这个，呃，View这一块啊，我们的view咱们给它控制一下，把里面的这个从这个view中加上一个class，等于咱们对应的这个status是吧，Tauss这个class名字啊，客户想做成啊，跟我们文档中的效果是一样的，另外可以看一下文档中的这个效果是什么样子的，在这里的啊，就是我们这块来一个半透明的这样一个阴影啊，在这里显示我们的啊呃，Div这个这个盒子显示一个未开通啊，然后直播中这样一个，到时候直播中再加一个小点就行了，来好了，就这个效果，咱们在这里来接布局一下这个样式，来点我们的这个container container，哎，我喜欢做这种哈，因为这种的话，它不会重新的整个编译一遍，对吧，重新编辑太麻烦了啊，所以咱们在这里来写一下，那就可以写我们外面这块的话呢，是relative的。

啊，我们在这里给他来一个什么我们的bank，诶，我们这个时候不着急加这个啊，Relative之后我们的里面的这个container，然后我们是点太statuss statuss大家看一眼是不是点statuss啊，我们对应的对于这个statuss的话呢，我们可以控制一下它的这个position，咱们给它弄到I外面，既然是相对的我们这里的话呢，去定位，然后在这里的话呢，那bottom是零这个位置行不啊，然后我们的这个left也是零这个位置啊，然后我们的宽度的话呢，就是我们的100%啊，我们的高度的话呢，是我们的50RPX，我们的LA hit也是个50RPX，我们的T呢，哎，咱们给它改成这个center这一块啊，然后接下来我们把放在size的话，给它稍微的调整一下，给它改成14PX啊，我们对应的再把半个round的卡，咱们改成RGBA来来零，然后在这里的话呢。

零啊，咱们说了哈，这块来一个半透明的，所以给它来一个0.6吧，0.6这样一个值，好了，我们把里面的这个字体的话呢，咱们给它改成这个白色的，好一运行之后列位可以看一下是不是这种感觉啊，未开通未开通未开通未开通未直播这样一个状态。啊，我们要的就是这种感觉的啊，咱们在这再对于我们这个卡那的话，外面这个卡，那咱们给它加点背景啊，这样的话呢，和谐一点对吧，我们把这稍微它改一改哈，RGB咱们就给它加一个什么零啊零嗯，零。零啊0.1啊，当然你实用个light green也挺好的，因我用的就是这样一个，也是基于咱们半透明的去做的，所以你看一下此时这样来说的话，我这一个直播间的状态啊，这样的话跟我们这张图是不是很像，大家来看一眼，在这里看看我们这里的是不是啊，这就是我想要的这个效果的好，咱们来回过我们的代码中来，那接下来如果是直播呢，看们哎，这个时候咱们好像点进去之后没法说看到是引兵的这个直播，因为是引兵，所以我们只能手动的改一改这个显示是不是直播中这个效果能能做到吗？我们在这改一下啊，这个是杨祖的直播间吗？找找到杨组的这个直播间，咱们把这个直给他改成这个什么二哟，没改好，改成这个二好点一下提交。

改完二之后，我认为此时在显示的话呢，就应该是什么呀，杨左是直播中，然咱们在直播中这个右面这块来一个小点啊，就是我们的绿色的一个点来来到这里之后，我们在直播中这里的话呢，我们加上一个什么呀，Text哎，我们在这加上一个小的一个点哈，绿色的一个点class等于这个green啊，给它复制成一个class名的green do吧，好，接下来在这个class下面我们在这里来吧，另外好，你想一想这个小点咱们怎么去加上去，是不是咱们就直接设置一下它的宽高吧，宽度咱们给它20RPX，高度20RPX，然后我们display in来block啊好了，接下来我们就可以加上这个background color background color之前已经选了一个了啊，就是我之前找了一个比较亮一点的绿色的，我在这直接就用啊，直接就超过了二十四二十四五二十四啊，就这样一个绿色，它比较亮，好再把这个border radius。

给它一修，给它改成这个什么50%的是个圆嘛，你不是个方形的呀，来一保存之后，咱们来看一下这个效果，Green dit复制啊，还有注意咱们在这里做好这个选择器就行了哈，记下面的啊，这个dot啊，我看一眼这个class名字green.ok，最后咱们重新的编译一下，咱们来测一下，看看我这个直播中这个小点诶怎么没有显示出来呢，我看一下这里这个直播中里面的话呢，有这个green在这的话呢，这个样式没生效啊，是我这个代码中的话呢，245这块怎么写的好保存之后。

可以了，列外看就这样一个小点显示出来了啊，如果我们杨组他进入直播间之后，他动态的把这个值给他改成二了，那这个时候我们就显示成这个什么了呀啊，带这个直播中的这样一个字样的了，如果这个时候它又退出了直播间，那这个时候哎，咱们哎，当然我现在只能手动去测试对吧？啊再次进来之后，我们看到的就是一个什么呀啊这个未直播诶还有一个方法，我记得咱们如果是杨左进入直播间之后，咱们已经改成了这个二了，大家还记得我做了一个功能嘛，就是下拉刷新就可以看到最新的状态了，对不对，一下拉刷新就可以看到最新的这个直播间的一个状态改成二了就对吧，然后这个时候如果杨左退出了直播间，咱们在这里提交啊，然后咱们再重新的给他执行一遍，一刷新，诶就变成了未直播的这样一个状态了，好了，另外你看这就是咱们关于直播状态这块的知识，那在这里课程简单的回顾和总结。

点一下啊，就是我们主播啊，进来之后，咱们希望让别的人能看到他是在直播中还是未直播啊，知道我们该不该点进去看对吧？啊，那这样的话呢，可能就开始了啊，我们这个计划了啊，按照这个存的一个is live这样一个值，包括我们动态的去修改rooms。最终我们在点按钮的时候改成啊处，并且room死的时候等于二，我们在点返回按钮，点我们手机模拟的返回按钮，我们就给它改成一啊类物改成false，在页面卸载的时候，咱们要改成room改成一，还有在我们APP被销毁的时候，还包括我们被隐藏的时候，咱们都要动态的给它改成一或者是二这样一个状态啊把所有的这些这个可能性啊都考虑到了，这样就没有问题了啊，最后我们就把这个页面给他简单的画了一下啊，就在我们的这个live s里面啊，咱们以前的话呢，啊，直接把图片放在这个地方，现在我给他加了点什么背景，然后我们在这个view中的话呢，我们还通过呃，If l1L4的一个判断啊，并且在最后直播中加了一个小小的样式而已，好吧，行，那咱们这块就说到这里，下一小节咱们来把我们的直播，我云直播的功能给它加进去。