034-直播间模块-点赞通信原创

好的列位，咱们继续来看我们点赞功能的开发，那这一节的话，我们将目光聚焦在它的即时通讯，以及跟咱们自己的后端进行交互的这些功能，好了，我现在呀，已经能够做到点完之后呀，还出现这个动画啊，咱这些工作啊，都是在咱们room胞组件中去写的，那我将来还是啊要把这些工作的话呢，交回给我的副组件来，所以这一会儿又涉及到了一个我们的父子通信问题了，在入目bottom中，咱们点完了之后出现了动画啊，然后接下来的话呢，我们再进行一个子传复吹GG根event，然后我们来通知我们的副组件trigg根event中啊，咱们来写这一个啊like，好，也就是说我们触发这个like自定义事件，但这个事件的话呢，我得给它传过去呀，所以我在我的live w sm2中，我给它绑定一个。

哎，Like这样一个自定义事件啊，Like handle like这个方法呀，是提前呀，写在咱们live JS里面的，所以我在这个地方啊，回调函数写在这里，我看一下，好B在上面，我就记得这个来啊，咱们先打印一个log，至少说明啊子传复是成功的，这都是老生常谈的问题了啊，应该对于大家都是很熟悉的啦，OK，一保存之后，接下来，哎呀，又是这张小型的图片出问题了啊点击养组好了，点击这一个点击喜欢好了，触发了对吧，那接下来就是我们的通心了，好客户给大家来看一下通讯这块的一个做法啊，在这里啊，我们的点赞功能。用法就是啊，通过这个like这一个方法调用啊，在这里的话呢，直接TLs.like啊，在这里它让你传这个参数，他告诉我这个是非必填项，点赞时加了附加消息，然后我就信了他了，那这样的话我就来测试一下，对吧，这次点ts.like其实用法来说呀，就这么简单，所以我认为啊这些点赞吧，那就啊我也不需要附加什么消息了，所以我就直接点赞，一点击编译重新来一遍之后啊，点击这个养组，OK，来一个点赞。

一运行之后呀，就报错了，另外你看他报了什么错，他说的，他说这个缺少一个必要的参数啊，其实就是说明咱们这个like方法必须得传参，哎，所以你说他还是这个什么可选的吧啊说什么非必填的吧，这不是欺负我吗？对吧，所以我在这只能传一个随便传一个值，那我随便传一个值好不好用的，来点击编译之后，看看还报不报错了呀，点击羊组，然后咱们点击这一个like之后，大家会发现，哎哟课文现在他不报错了诶。那么不报错，我们接下来要测试的就是那这个喜欢到底有没有啊，真正的成功呢？啊，就这个消息发成功的吗？大家也知道，这其实啊，就是对于咱们之前那个message的一个衍生啊，无疑是这个type类型可能变成了like这个值了啊，所以这样的话就是发出去，但成不成功呢？哎。

咱们可以找别人给我们点赞，然后我们在监听啊，我们看看有没有这个触发，我们左边侧面出现一个啊，我又给谁点赞了这样一个功能，或者引兵或者是角组给别人点赞了这样一个功能，好了，那这样的话把这个件监听啊给写上去啊，来到我们上面，因为咱们视件监听啊都是写在上面这个地方的啊在这里当时我们是监听的event message，那这样的话呢，其实我觉得跟我们之前一样，是不是咱们也一样的，就是复制粘贴一下就可以了呀，诶咱们来看一下，把这段代码来复制过来好了，咱们也一样的来站一遍放在这里，只不过这个我要改成什么呀？TRS疑问点什么呀，Like这一个啊，然后异步过来之后，我们在这里的话判断什么呀，这个值啊，这个就不用加了哈，因为点赞别人给点赞肯定是这个data是有效的，然后对应的我们进行push，然后这个。

个name值的话，咱们还要重新的进行format一遍，对吧，要只不过这个message的话，那可就可以改成了这个是吧，别人这个给主播点赞了吧，这几个字儿给主播点赞了，OK，咱们一保存之后来重新来看一下啊，也就是说我这个自己的话呢，发出去了之后啊，那对应的啊，这个方法的话，能不能触发呢？我现在是不确定的，所以我得测试一下，一点击编译之后，咱们来看一下哈，呃，咱们在打印一个log哈，要没有log的话呢，这块是有问题的啊，我们在这里打印一个一一好，然后的话data保存之后，咱们点击编译重新来一遍哈，点击杨组进来之后看点赞了哈，来点一个喜欢，大家会发现动画也触发了呀，哎，但是这个没有触发啊，所以在这里的话呢，这块就有坑了，就是呃，我们这个呃，Event like这个事件的话呢。

监听在这儿，它其实能够除了一个是连自己都能监听到的，那但大家说怎么不好用呢？啊，这是因为啊，我们在这里传这个参数是有问题的啊，这也是科瑞去查这个文档呀，而且去看了这个DEMO的代码之后才明白的啊，所以这个疑问like跟message是不一样，Message是广播，给其他人自己不广播，而这个like的话是对全员发起这个广播，所以说咱们没必要自己在这里说啊，我自己刚点完赞，我就立即呢往我们这里的话呢，推一条消息，因为你自己点赞你也可以收到，那要怎么收呢？请把这个like传参必须传成TS点啊ET点我们这一个什么呀，Like，诶你就可以了啊，就把它给传进去就可以了，其实它就是一个大写的一个like这样一个字符串啊，保存之后咱们再来测一下，现在就是我自己点完赞之后，其实我自己也可。

可以收到啊，这个点赞的一个成功通知的啊，你可以认为咱们点完赞之后，到了服务器上，服务器又把这条消息又退回给了我们，然后这样的话，咱们来测一下，点完之后来看客人这个好不好用，点赞走。那位看见了吗？我这个log也打印出来了，而且我这个地方也出现了，说我给主播点赞了，因为在这里我是引兵传到这个仿慢的内ke方法中啊，判断我此时登录的用户也是隐兵，那这样的话就变成了我了，对吧，只要是谁铁锤钢带点赞的话，我这边也一样能收到点赞信息，然后呢，我就会在这里也一样的加到这个地方来啊，所以你会发现哈，其实点赞这个功能的话也非常简单，就是跟R'M即时通讯这里呀，都比较简单，就是出现问题去查的时候不太好查啊，因为你会发现DEMO的代码的话呢，他在这里like这一块啊，啥也没传啊，然后人家居然好用啊，因为它DEMO那个版本的话呢，他们那个TM的版本，还有TLS的这个版本啊，它是跟咱们现在最新版它不一样的，但单炮的话是两年之前的，就在这里其实是存在很多问题的，那这块的话调查的是花时间的，对吧，另外你听我这么一说啊，传一个值不就行了吗？多简单的事。

但是你怎么去找出来是吧，OK，就是咱们关于即时通讯的这里，那接下来就是我们要把这个点赞的信息呢，还要传给咱们自己的后台，哎，咱们也去给他保存一份啊，这样的话将来好统计说这个人到底收到了多少点赞，多少人对他的喜爱呀，哎，咱们就知道了，好了，那接下来跟着课们咱们一起来看一下吧，来咱们接下来啊，来到这里就是我们要发请求给我们的后端，那这个页面中将来发请求，不管是点赞关注呀，还有什么获取呀，还有这个什么送礼呀，还有什么新商品上架等等的吧，实在是太多了这个请求，所以我在对于我的请求的话，做一点小小的一个封装啊，在这里的话，咱们相当于这一块类务点JS中写的更多的是咱们页面的交互的逻辑啊，咱们把一些取数据的逻辑的话呢，咱们放在我们的一个模型。

景里面啊，咱们在这里喜欢基于模型呀进行开发，所以在这里的客户呢，要做的这个事情的话，就是我要自己在当前文件夹下呀，新建一个叫做猫到了文件夹，然后再猫到文件夹里面去写咱们这个直播间里面所有的数据，请求咱们给它封装一下，好吧，来另外跟他们一起来看一下这块的话，咱们怎么来去做这个封装啊，再把这个给折上去呗。

好，咱们点一下外面哈，然后再点击新建文件夹，咱们写一个叫model到文件夹，然后在model中啊，你新建一个什么呢？index.gs好，在这里，然后在这的话，你新建好你这个猫到mode啊，然后导出这一个模块X part default，导出我们的猫道这一个模块，然后在这个model到这一个模块中的话呢，咱们就开始写啊，我写一个like这一个方法，这个like方法啊，它返回的就是一个什么呀，Promise对象，也就是咱们在这里把数据啊，发请求，请求什么地址，传什么参数啊，在这里都搞定，然后咱们一会儿在live务GS中直接调用model到点like就可以了啊，这是一个最简单的一种模型封装的方法，对吧？好了，那这样的话，咱们就在这里发请求什么，咱们是不是自己封装的一个request，所以我在这把这个request给它导入进来，U，呃，是我们的。

块啊导入咱们用这个ES6的导入吧，导入我们的request的from，点点上一级，点点上一级啊，是点点上一级吗？是不是不是点点上一级就可以了，U文件夹下的request，然后在这里利用这个request，咱们来传这个请求路径URL啊，我知道这个请求我还没写对吧，但是我这个路径先写好了，那对应的我这个请求方式的话，咱们按照这一个什么post的方式来进行请求，所以我method吧，我要传一个post，哎，到时候我们点赞的话呢，咱们想一想点赞这个共能我要知道什么信息，就是谁给谁点了一个赞，在什么时候点了这个赞就可以了，所以我在这个like这一块的话呢，将来调用这个方法呢，会传来两个参数，一个是from ID，一个是to ID，我在这里拿到这个from ID和to ID。将来传给。

我的这一个后端就可以了，就是谁给谁啊，哪个ID又给哪个ID点了这个赞，列位你看这样来说，我这个小的模型like这个就差不多给封装好了，将来调用这个方法啊，必须传入两个参数，谁哪从哪到哪个ID，就是一个点赞，然后我们return出来这个promise对象啊，Request传的地址是like method，把这些信息给传出去，那这样的话咱们就在我们的类务GS中，是不是在这里呀，咱们就可以实现这一个点赞的这一个请求，我们可以通过我们的猫道猫到的话给它导入进来，点我们的呃，Like方法的一个调用，另外咱们在这里知不知道哪一个ID啊，那咱们在第一个参数来，这次第一个是谁从哪给谁点的赞，就是这个事情咱们就早就拿得到了，这次点data.user in或是当前登。

录的用户信息，然后再通过这次给谁啊，这次点data，咱们的这个群主给这个群主点的赞，Group里面有个owner ID啊在这里啊列微忘了的话可以去打印去看一眼啊，所以就是我们一点击这个按钮之后，咱们立即定摸到点like啊，摸到点like，然后咱们在这里对于把这个信息传给他啊，你也可以在这里说，可我要等着这个成功了，怎么怎么样，再去这么给我们的I'm即时通讯去发，那就改成咱们的a think呗，A think，然后在这里wait等待它成功啊，咱们再去做这个like了一个啊通知啊，继续通讯啊，所以咱们这样一保存之后，是不是至少我能够把这个请求呀，咱们给他发出去，估计得报一个什么错啊，404的一个错误吧，是不是我摸到点GS未定义啊，来让我看一眼，怎么摸到点GS未定一了，是不是我们在这导入的时候已经导入了这个。

Model它这一块的话，需要咱们加上这个index OK，加上去之后的话呢，再测一下，把它重新编译以后。看看们点赞了，开始了啊，我要给别人点个赞了啊，来点击这个点赞诶大家发现的这个接口404出错了，但是我pose的这块的这个数据你可以看一眼是不是都对呀，来在这里啊，咱们看一下哈，Like这一块，你看这是我post的数据，From ID确实是这个啊，到这个ID对对，这个数据客能传的都对啊，所以接下来就是咱们把我们的后台啊自己去写一下，然咱们再连上我们的语音数据库啊，咱们把这个功能呀，给它实现了不就可以了吗？来来到我们的后台代码中，是不是这个地方呀啊，我们的img啊，这个IMBG啊，然后在这里咱们新建一个叫做like这一个点GS，我在这里的话呢，我是不是又在站在巨人的肩膀上进行开发就可以了呀，来，咱们复制这个吧，啊，就是你没必要自己在同时去写这么一个接口了呗，啊好盖掉它咱们来。

看一眼啊，一进来之后啊，我们引入了myq two这个模块，然后接下来再就是这个改成什么啥like这一个方法，然后别忘了导出也是like这一个方法，然后在这里再就是获取DB的配置连上去，然后再就是等着啊这一段代码我这样呗，我先给它注释掉行不注释掉啊，然后对应的我一保存，然后咱们在这里先进行一个res.send然后对应的我给它写成这个安克斯state特斯，咱们给他一个OK啊，就是一进来成功，我在这里为什么要这么去测试，就是为了先看看能不能收到我们这一个参数啊，你将来你这个这个客户端传过来的数据，我们服务端都收不到，你说我还做个什么劲啊，来吧，一保存之后的话呢，跟客户来看一下啊，咱们现在得把这个like这个模块啊，在咱们的app.gs中啊注册一下，所以我在这里导入一下就行了啊把我们这一个。

带克模块块导入进来，然后再给它进行APP use是不是来a papi中的like模块导入进来，咱们这个要注意咱们是写的是一个什么，基于post的，然后like like，这就是咱们所接收前段的post请求，这样的话呢，会进入到我们的这个like这一个模块，而like这个模块中只是接收了我们前端传过来的poose的数据，然后剩下的只接给前端返回了，OK的，就干了点事，好，咱们来测试一下吧，然后咱们在这里的话来点一下这个点一下之后让我们来看一下我们的控制台，这里是不是没有什么问题啊，啊，这个错是之前报的啊，所以在这里的话呢，咱们这次最新的这次请求的话呢，已经发成功了200那么多，然后pre返回值也是没有问题的，那对应的我们的客户端传过来数据，我们也接收到了，所以你看我们的后端这里啊，啊就是个体力活，咱们已经。

拿到了我们的from ID啊，所以我们在这进行一个解构，From_ID to_ID从我们的IEq.body中解构出来，然后接下来咱们再去数据库中去创建一张新的表，哎，它就是咱们的点赞的这张表，这张表中会记录几个字段，ID字段啊，From ID to ID还有create time这样四个字段啊，就是创建时间呗啊那在这里打开可能这个current文test的数据库啊，这块的话让我输入数据库的密码好了，数据库密码输完之后的话，重新的进来，那这个时候咱们就可以什么点击新建一张表，这个表呢，咱们就其成like对不对，喜欢的好好了，然在这里字符期的话，选成这个UTF8的这个字符集，好在列信息中的话，就跟我们之前所说的一样的，ID字段自增长字段in特类型自增长，好了给它勾选上我们的。

自增长，然后它是我们的主键啊，然后再新建一个什么呀，From_ID啊，这块的话是咱们的握叉类型的，长度的话100啊不可控，再新建一个什么呀，To咱们的一个下划线ID，然后也给它改成握，然后长度的话也是100，然后也是不可控，然后再新建一个我们的这样的create time，就是说你创建这个了一个时间啊，Create time点赞的这个时间对不对，在这里我们给它改成date time这一个时间啊，也是不可控的，那这样的话呢，我们这几个资段就创建完了，最后的话呢，咱们点击这一个提交啊，就把我们这一个表呀，就给创建好了，创建完这张表之后啊，我们接下来的话呢，准备来到我们的代码区这里怎么样，只需要把我们之前的代码给它拿出来，给他改造改造就可以了。来，咱们把这些代。

码的话呢，这些这些没有用了哈，因为咱们这个要执行一次是吧，插入了一次操作，所以我在这里怎么去写下列外query这里咱们去写这个什么insert into，咱们这张表，在like这张表中，里面一共有这么几个字段，ID字段呀，哎，From_ID字段呀，To_ID字段呀，还有我们的create_time这一个字段，然后对应的values设置成什么呀？哎，我们在这里几个问号，这是几个值啊，四个值，所以四个小问号，OK。对应的占位符嘛，啊，在后面写咱们真实的这一个数据啊，数据里面的话，ID这块咱们传一个空就可以了，From ID这里的话呢，咱们写，哎直接就从这里传过来的呗，啊from ID拿过来粘过来，然后to ID，咱们给他也一样的粘过来，然后再就这个时间，咱们就写一个new date这一个时间就可以了，那另外你来看一下此时呀，我们这个前端只要敢posts的请求过来之后啊，我们这个like这个接口接收到了，就开始进行这个啊插入likes，把我们这四个字段给它插进去啊，这样的话最终成功了，咱们就会走这个send了，对吧？哎，我们可以简单的测试下来，一保存之后，咱们来到我们的小程序端啊，在这里客们来到这个控制台，咱们清一下整个的重新给它编译一遍，然咱们来到这里进点击这个养组，OK，咱们来一次这个什么点赞来点赞，点赞之。

课后的话呢，很明显啊，很成功啊，我们整个过程很成功啊，包括我点完然这个动画是有了，而且对应的我们也收到了这个消息，要不然这个列表是消息列表是加载不出来的，那对应的我们的数据库里面有没有这个数据呢？啊可这一瞬间点了好几次了哈，咱们一刷新应该有不少的数据吧啊果然啊，好多啊，在这里我确认一下吧，我都删了，我再来一遍啊，要不然大家说是不是点一下触发多次呀啊，别骗人啊，咱们点一下好了，点完了这一下之后，咱们可以看一眼，刷新之后的话呢，是不是就是一条数据是这个用户啊，大家知道这个什么GM8是隐蔽用户给这个什么按幼的这个是啊我们的啊杨组啊，就是我们的群主啊，最终这个时间戳也传过去了，所以这样来说，咱们这个点赞的功能的话呢，哎，就差不多了，OK，列位咱们最后的话呢，来总结一下，视情点赞这块，那咱们分为了两节，第一节是咱们把这个动画。

给做好了，其实原理就是改变背景图的一个原理，点完赞之后，咱们要给自己啊，要进行一个发送这个消息，在发消息的时候一定要注意传餐必须传成tls event like，这样的话你自己能收得到，当然有人说客就不要自己收得到，我就不传行不形象那可以对吧？啊，但是你将来你自己收不到了，就好吧，咱们传这个只是能保证自己也能收得到的，这样的话我们就在收得到了，这个事件监听中直接一次性的处理啊，就把消息得到之后，咱们就啊铺入到message里面，Message有池了，我们这个啊消息列表就会进行了正常的滚动了，就最后再把这个数据往咱们自己的数据库中啊，咱们给它备份了一下啊，其实做这个存储的工作的话，就是将来呃，咱们会在我们这个点签杨祖出现了这个杨祖的相关的头像的信息的，下面的话呢，会显示出来啊，杨祖曾经收到了十个赞。

20个赞等等的这样一系列的功能，好吧，两位，OK，咱们关于这一小节的话呢，就到这儿，下一小节咱们就来看一下给主播打赏礼物这一个过程了，来给主播刷一个火箭啊，一个火箭也是情，一个火箭也是爱呀，好吧，好，所以小节咱们到这儿。