00:00
大家好,在前面的章节我们处理了啊,用户加入聊天室,以及左侧的用户的啊,聊天列表,成员列表,那这节课呢,开始来处理,聊天室的核心功能就是发送消息,那同样的我们先把思路履行一下,我们在这里输入这个消息,然后点击这个发送,我们要把这个消息发送到服务器,对吧,那服务器然后进行广播,广播给其他客户端啊所以呢,那我们先来完成第一步,如何把这个消息发到服务器。找到我们的代码,找到发送消息这里啊。好是这里啊,发送的这个消息啊,调用的这个发送消息的一个函数啊。所以那我们需要啊,在这里。把消息啊发送给服务器。发送消息给服务端。服务端。那我们使用的是啊web socket,所以呢,要想把消息发送给服务的,我们需要啊,使用socket。
01:03
点。来触发服务器监听的一个事件啊,那我们哎自己定义一个事件啊。Send message。好,同时把数据传给服务器,那我们把什么给服务器呢?把这个发送的这个消息给服务器就可以了啊,那这里我们给一个对象嘛。好,你直接给文本也可以啊,我为什么给对象呢?哎,等会我给大家说啊,好,这样的话,我们是不是要在服务端去监听一个啊send message这样一个事件,对吧?好,找到我们的服务端啊,来到这里。啊,这里呢,是我们监听的这个登录的时间,这个时候我们再来监听一个啊,收接收消息的时间啊监听。接收消息。Socket啊啊,我们来监听这个事件,然后有一个date参数,就是我们接触到的数据啊,这个这个数据呢,它是一个对象啊,我们先打印一下这个数据,一点点来。
02:08
把这个打开。保存。来到我们这里刷新,重新来一下啊,随便选个名字。好,这时候我们来发送一个消息一一,然后打开我们的,诶服务端是不是得到这个消息,好,那我说了,我们传文本也可以,那我为什么传一个对象呢?哎,因为我们收到消息以后,你要广播给他客户端,但是你要广播给其他客户端时候,是不是要把这个,呃,用户啊,当前的这个发消息的这个用户信息啊,也给广播进去,对不对?好,那这里呢,我们。定义的一个对象,我们就可以在这个哎对象上面给他附加一个用户信息啊,等于发当前发送消息,这个用户好,这个这个用户呢,我暂时不知道是谁,我先给他控住啊空起来。先把注释写了啊。附加啊,当前发送消息的啊,用户好,那接下来再一步我们要做什么,是不是要把这个把消息给广播数据,把消息广播给。
03:10
除了广播给。除了。自己啊以外的客户端对吧,因为是你发的消息,你不用自己再收到这个广播了,哎,要广播给你以外的这个客户端,以外的客户端好。那同样的,那我既然要广播这个消息的话,我是不是。在使用这个socket。来触发客户端监听的一个事件啊,那我们在客户端定义一个啊这个get message吧,啊,那同时把这个数据啊带给这个客户端,好,这里我们使用在服务端去触发客户端的这个get image这个时间,那是不是我要在客户端去监听这个get image。来,我们在下面写啊,监听接收消息。
04:02
来使用socket加二来监听一个啊get image,同样date是服务器啊,还给我们的数据啊,就客户呢给发给我们的数据,我们来打印一下这个date啊,点log。好,这里也发送啊,这里也监听了,我们先打印这个数据。嗯,这里刷新一下啊,这里呢也刷新一下,我们准备两个客户端,这个呢是一,哎,随便选个头像好。这里我们写二啊,大家随便选个头像进来之后,现在呢,我在这个客户端,我来发送这个消息,看一下在其他的客户端能不能收到这个消息啊,来发送这个。一啊。好好,他也说到了对吧,那这个呢。这个没有收到消息啊,啊,而他收到消息了,那说明我们的哎,广播用的有问题啊,那检查一下服务端的代码,我们使用了它啊,Soet加it我们之前介绍了,如果是使用socketit,那只有当前的这个客户端,客户端能收到啊,我们恰恰写反了是吧?我们应该把广播广播给除了自己以外的这个客户端看一下我们的啊笔记是不是要使用这个。
05:10
去向这个除了自己以外的所有客户端广播啊,所以我们这里写错了啊,所以大家在去广播消息的时候,一定要用对方法才可以,好,那接下来我们来做一个测试啊。好,先刷新一下,刷新一下重新来一,然后选个头像,这边我们选择二啊,随便选个头像,好,现在我在这里发消息,发个一一发送之后,哎,我自己是收不到消息的啊,因为我是广播给我自己以外的客户端,那我们看其他的客户端是不是收到消息了,对不对,好但是。收到消息了,我们下面应该做什么?上消息显示到这里,对吧?那我们显示消息的时候需要什么呢?是不是需要昵称头像以及聊天内容,需要三个部分对不对啊,但是我们这个用户没有拿到,那么怎么拿到这个用户信息呢?来看一下我们服务端的代码,那我们这里呢,是要把这个用户信息给附加到这个,返回到这个数据上面,对吧?但是这个用户信息刚才说了我们先留空对不对?那怎么拿到用户信息,我们来想一想,在这个里面,我们是在这个数组里面存储了所有的用户信息,对不对,而且还给他设置了这个IID,对吧?那么我们可不可以通过当前的这个链接啊,就是当前的这个socket这个链接,从它里面拿到这个ID,然后利用这个ID去这个数组里面匹配出来当前的这个用户信息。
06:24
是不是完全可以的,对吧?好,那我们接着来去匹配一下这个用户信息。来这个用户信息就等于什么呢,我们要从数组里面去筛选一个消息啊。使用这个user啊,然后有一个宿主有一个find的方法,它会返回符合条件的啊这么一个就是里面接收一个条件,它会返回符合条件的这么一个数据,哎,这里我们来写一个U,那什么条件呢?这里我们写一个啊u.ID哎,这个U呢,就是它迭代的数组里面的一个一个的项,对吧?那我们用这个数字里面的个像这个ID来判断等等于。
07:05
这个sock.id好,那这是这个find的方法,就是说。哎,它会返回匹配的第一个元素啊,这个find就是说如果我在便利的时候,那这个优点ID等等于我当前连接的这个用户的这个ID,那么我就把这个用户数据返回。明白了吧,嗯。这个是数组的一个方法,不清楚的可以去看一下手册,这里就不做多讲啊,它里面接收一个筛选,一个回答函数,那回答函数返回的一个筛选条件。好,这样的话我们就得到了用户信息,好,我们再来做一个测试保存啊。好,这两个已经自动连接了。那我们重新刷新一下吧。全部重新来一遍啊一,然后这里来给个二好,接下来我用这个一来发送这个消息啊,发送个哎,随便少发点,然后我们看其他的客户端收到的消息能不能拿到,诶这个一这个用户啊。
08:00
是不是拿到了昵称为一的这个用户,对吧?啊,你注意为什么是拿到了一这个用户,因为我们是在我们是谁发的消息,是不是一发的消息,那一发的消息,那这个so,这个链接表示的是和谁的一个链接,是不是和一这个客户端一个链接,所以他这个ID就是一这个客户端这个ID,那我我们在数组里面去匹配,肯定就是拿到了啊一这个用户数据。清楚了吧,啊,我们使用一个呃,Find去筛选出来符合条件的一个数据啊。呃,接着这个用户数据啊,我们给附加到这个数组里面,同时消息数据也在这里面啊,因为消息数据是我们一开始去啊,发送消息的时候就给发过去了,那这也这也说了,为什么我给一个对象啊,给个对象在这里面,我就可以直接啊给这个对象增加一个属性就可以了啊,如果你要是给了一个字符串,你还要在这里重新去组装一个对象啊,都是可以的。啊,那接下来继续处理我们的这个逻辑,那其他的客户端啊,我们来看其他的客户端已经拿到了别人发的消息,以及别的这个用户的信息,那是不是就可以利用这个数据,然后啊,结合这个HT代码,把这个消息显示到这里就可以了,对吧?好。
09:05
那接下来我们在哪处理呢?在客户端找到我们监听收到消息这里,哎,收到了这个消息,那收到了消息之后,是不是要把这个消息显示到哎聊天框中啊,把消息显示出来好吧?啊那如何显示消息呢?这里面呢,给大家封装了一个方法。然后是哎在这里啊,是一个show message啊是一个。显示呃,这个聊天内容的一个方法啊,那这个接触几个参数,一个是你要发你要显示的消息内容,一个是谁,这个消息来自谁,因为这个消息来自谁取决了这个啊一个样式,如果是me,它就会显示到这边,如果是U,它就显示这边,好那所以呢,我们这边啊,收到了消息之后也要调用它,对吧。好,也要调用它来修message。哎,第一个是这个消息的内容对吧,消息的内容是不是date里面的message对吧,那这个显示到哪里,是不是又就是别人发的吗?啊,不是你发的。
10:08
啊,这个我应该是,呃,这个我拉其实写错了,我也写other更好一些啊,这个当时没有注意啊,大家就知道就好了,这个me是我自己啊。就是这里面这个方法给大家找一下。啊,就这个啊,这个这里啊,因为这里有传的咪咪是我自己发的,然后U就是别人这个是我类名写错了啊。好,那接着我们来看看效果啊。好,就看这个吧。来输出一个一。那这里呢,我来刷新一下啊。数出一个啊。填入一个二,好,现在我用这个来发消息啊,发一个333,哎,我这里的消息肯定能显示的啊,然后这里的消息也显示对不对,好看一下333是不是刚才我发的对不对,但是现在我们还有什么没处理,还有昵称和头像对吧,还没有处理,那我们这个昵称和头像是写死的,你点进来这个方法你看一下是不是写死的,那肯定不能写死。
11:05
清楚了吧,这肯定不能写死啊,所以呢,我们还得再改造一下,那这个方法呢,我们还得让他再能去接收一个,呃,这个参数。这个参数呢,哎,我们就接收一个用户信息吧,好吧,User,然后userr呢,我们假定它是一个对象,然后这个名字啊,我们就可以从这个user里面,诶取它的niname,然后是我们的这个。图片啊,图片就头像,头像就可以从这个里面去取它的啊,头像好,这样的话,那我们在这里去调用这个方法的时候,在下面啊,去调用这个方法的时候,是不是还要传一个用户信息,用户是谁,是不是data里面的点user啊,这里我们有打印的啊,不确定的大家可以去看一看,好那这个问题解决了,但是还有问题没解决,发送消息你不仅要不是这个显示消息,你不仅要显示别人消息,还要显示自己的消息,对吧?那显示自己的消息是在我们发送这个消息的时候显示的,诶点击发送消息找到这里,是不是在这里显示的,对吧?那这里我怎么来传入这个用户信息,也就是说这个用户我怎么得到啊,User等于谁?
12:16
那肯定是我自己对我自己,那这个用户怎么来呢。我们想一下啊,在什么时候我们能确定我们自己这个用户啊,哎,是不是在我们就是加入聊天室的时候,加入聊天室的时候,我们是不是拿到自己用户信息,对吧?所以我们可以把啊,这个加入聊天室的时候,把我们自己的用户信息啊,在本地保存一份就可以了,这是一种方案,当然还有一种方案,那服务端呢,它存储了用户的列表,而且我们还把这个所有的用户列表都返回了,对吧?它是一个数组,那么呢,我们也可以从这个数组里面再次去筛选出来我们当前的用户的信息。是不是一样的啊,那这个就比较麻烦了,那我们按照第一种方案啊来讲,就是找到。加入聊天室这里来往上找找入加入聊天室啊,在这里呢,对吧?好,那在这里加入聊天室的时候,我们是不是可以拿到自己的用户信息啊,我定义一个全局变量啊,定义一个let user啊,它是一个对象那。
13:08
在这个地方我拿到了昵称和我自己的这个头像之后,哎,我把这个康S我就不重新定义变量了,我对全局的这个userr我进行一下哎设置这样的话。这个U是不是就存储了当前我这个加入聊天室的,就是当前我登录的这个用户吧,对吧,那在这里发送消息的时候,我是不是可以直接使用这个全局变量对不对,那这里就不用定义了啊。明白啥意思了吧?啊,就是说那这个发送消息他需要一个用户的这么一个对象,对不对啊,那个如果是其他人的服务器会我们返回,那我们自己的怎么办呢?我们自己的完全可以在你加入聊天室的时候,你找个变量存一下啊,对吧,因为我把它定义成全局到了存一下,那下面是不是可以直接用啊,这是种方案对吧?还有一种方案是,哎,服务端这边不是已经给我们返回了所有的用户列表吗?我们用自己的这个搜ID去这个用户列表,列表里面去匹配也可以,对吧。
14:00
啊,当然我们用最简单的一个方案啊,就就这么去写就可以好,那现在我们自己的用户信息能拿到了啊,而在我们接收到消息以后啊,接收到消息以后呢,服务器会返回了啊,发消息的那个人信息啊,我们也能拿到啊,在这下面的啊,那我们把这个消息呢,就传给了这个方法。那这个方法负责把消息给显示到啊,这个聊天的那个区域中,对吧,那第一个就是显示的消息内容,第二个是一个克拉斯列名,决定是显示的左边还是显示到右边,那第三个就是用户相关的信息啊,是用户的头像和昵称啊,那这样的话,我们处理之后,诶,我们收到的别人的消息能正常的显示,而我们自己发送消息的时候,来找到这里,自己发送消息的时候,那我们自己的这个头像啊,昵称和消息也能正常显示,哎,这样就完成了这个。统一啊,这里写下就是显示自己发送的消息。好,这个是把那个消息框给制空好保存,我们全部来整个测一下啊。
15:01
好,下面我让这个一一加入聊天室,选第一个头像,哎,进来了,一一加入聊天室进来了对吧?好,接着呢,这里呢,我用二二选择头像来进入聊天室,二二也加入了,对吧?这个用户列表也没问题啊,这边都没问题,这个提示消息也没问题,接下来我用这个一一来发消息,我是一一来发送。啊,头像是这个一的头像对吧,昵称也对,消息也对,对不对,我们看看别人收到消息这边,那别人收到的消息这里呢,诶头像昵称和消息内容对对对吧,那我们用二二来发一个说我是二二,好,自己的消息显示肯定没问题啊,昵称头像哎,消息内容,然后到其他的客户端呢。昵称头像内容都是对的对吧?哈,那这样的话,我们的聊天就写完了啊,其实没有那么复杂,哎,总共就是一个on一个it哎服务端监听,那我们客户端触发,客户端监听我们服务端触发,那只是大家再注意,你要广播消息的时候,要选择合适的广播方法,不要广播错了啊,否则你的这个广播就会出问题,别人可能就收不到,一定要注意是要广播给谁,那关于我们常用的几个广播方式呢,这里给大家也做了一个。
16:07
一个总结啊。然后是关于啊前端的这些处理这个消息的这个GS啊,这个大家自己用积分写的话会比较快,因为我们用原生的写的话,会代码会稍微啰嗦一点啊。好,那这节课呢,我们就先到这里完成了消息的一个发送的一个功能。
我来说两句