00:03
啊来,嗯,下面还剩一点时间,我们把这个简单的介绍一下,那最后呢,我们要去实现一个实时聊天的功能啊,这里面呢,用到一个库。啊,这库的名字叫soer.IO简称SOIO啊,我们先把这个库呢,可以给大家什么呢下载下来,这里要注意前台应用和后台应用都需要想。啊,记住啊,就是后台应用你需要去给它下载下来啊,那前台应用呢,也需要去给它下载一下,就两边都需要。来路径复制一下。好等他下载啊,我们来说。
01:04
下面简单的说一下,说L。它是一个什么呢?能实现多人远程实时通信或者叫聊天的一个库。啊,这个里面啊,可能跟它类似的,我们前面学过的可能HTP协议是吧,HTTP请求它跟HP请求是不是一样的,那肯定不一样,要一样的话就不用它了,对吧。啊,然后我们往下看啊,哎,这个库呢,它包装的是什么呢。包括了呃两种技术,一个呢是H5新出来一个东西叫web,它实际上设计了一个协议叫WS协议。那我们HP是不是也是一个协议啊,我们访问的时候访问HP冒号什么localho的对吧,那如果是他的地址应该怎么写的。
02:04
WS冒号斜杠localhost。那也就是说这两个协议应该是不太一样的,肯定是对吧,这个协议了,大家回想一下H1协议啊,协议有个特点,就只能浏览器发起。浏览器发个请求过去服务器处理,再返回个响应。他不能做到什么呢,那服务器向浏览器发的请求做不到。这个人懂吧,说白了,他们,他们不平等。能懂吧?这说白了,在HP协议下,进攻的人永远是谁浏览器。但是我们有一种场景,我们要聊天时候就需要什么呢?就是客户端跟服务端要是平等的,我可以给你发消息,你也可以给我发消息。
03:00
这个AP协议做得到吗?做不到。他做不到这一点,他的发起人只能是客户端,而我们希望什么呢?希望客户端和服务区都可以向对方发起,发信、发消息,或者要要发请求。吧,诶这一个就可以得。还有一种啊,在H5,大家在H5的这个技术上肯定出来比较晚,对吧,出来的比较晚,那在以前要想实现我的服务器想向浏览器发一个什么消息,是不能主动进攻的,浏览服务器不能主动进攻,那怎么办呢?我又想让服务器给浏览器发消息,只能是什么那个浏览器。不断的向服务器发消息说,哎,你有数据吗?你有数据吗?哎,他有就给你返回。能懂我说的意思吗?就是啊,这种这种机制呢,叫轮询,说白了就是浏览器每隔一定的时间,就像服务器发一个请求来获取数据。
04:07
那这样就有问题,什么问题啊,你想啊这个东西。这个东西我他不一定有数据对吧,他没数据这些我也是不是定时的必须发呀,我也不知道他什么时候有数据,主要是把他有了数据,他不能主动发给我,这是最大的问题。听懂诶而这个we就能去实现,当浏览器肯定是可以下服务器。发数据的,这个没问题。本来就可以对吧。那现在的关键,它解决的痛点是什么?就是服务器可以向什么浏览器或者叫客户端来去发送消息。一个消息不就发数据嘛,对吧。好,那这一个库说L这个库它包装了这两种机制啊,为什么要包装这两种机制呢。
05:07
其实非常简单,就是H5的一些语法吧,相对老一点的浏览器就不兼容对吧。那你想如果我的啊O就包装H5CK啊那。就不太好,这样兼容性就比较低,对吧,他其实做的是很简单,就判断一下浏览器支不支持web。如果支持那我就用web,那如果不支持了,就使用轮询的方式来实现。大家能懂吧,啊人说老师为什么要包装呢?很简单,因为包装以后语法更简单。编码更简单,就好像因为我们为什么要要学RA对吧,为什么后面要再学view,因为学了这个东西以后,我们写项目更更轻松了啊杨素老师我就没写这个,我没发现他其中在哪上啊,这是你们还没上手RA的,它的一个特点就上手的那个时间稍微有点长。
06:11
就是就开始的坡度比较大,等到你上了坡以后,后面就比较平坦。啊,View了,它一个特点就是,诶一上手很快,对吧,你冲了一下就上去了啊对于初学者来说,觉得VIVO确实好用啊,但是你用了一段时间,他们俩都差不多。啊,只是一个谁更容易上手的问题,但是这个很这个其实也是挺关键的。大家要扛住啊,坚持住了就好了,好,那我们呢,就不直接去使用web,因为web的编码特别复杂。所以呢,我们去使用SOIO,等我们去用SOIO的语法,你会发现特别熟悉啊,比较简单的一些语法。
07:01
好,这里面呢,有一个它的一个官网。Char什么意思啊,就是用说IO如何实现什么聊天对吧?啊实现聊天我们最终不要聊天嘛,这里面就有一些简单代码啊,这个呢,大家有兴趣可以看一看,我就不直接大家去看啊,这个呢还有一个。还有一个别人写的一个博客来介绍一下,说大家有兴趣也可以看一下,好,最终我们肯定要写成一段代码,浏览器跟服务之间可以什么相互发消息对不对,我们说他们俩是平等的嘛,对不对?好啊,这个呢,代码先我们按照这个文档上的给他托比到我们的项目里面去,这是个测试代码,接着看懂以后我们再写一下。来先看服务器端,诶这么写的说明我要建一个,首先建个什么,对啊,这个你要能看出来,这个看不出来就很危险了,好需要去建一个文件夹。
08:12
就叫so的IO,好,在这个文件夹下面建一个什么test.gs。好,把这张代码拿过来,我们去读一下,到时候啊很简单,就是看着大家能懂,好先不看里面内容,我们先把它全部搞好。下面。再来一个B上面有一个什么3W。B3W用来干嘛的呀,大家知道不啊,就是我们,你看我们n PM start的时候。去通过这个文件运行起来的服务器。能懂吧,好,我写了这样一个这什么类型的模块。啊,就是我每一个模块肯定要有类型嘛,无非就两种函数对象。
09:02
什么类型函数啊,这是一个函数的类型的模块,你要类型不知道后面就没法用啊好,那下面啊,下面大家看呢,把这里在这里引入一下,因为它要用到十。是就代表服务器。啊,最终服务器listen什么意思,监听某一个什么端口,而这个端口是我前面指定的什么事先。所以说接近端口相当于是不是要启动服务器啊,啊,我在创建服务器,服务器它创建好以后啊,我这里面。这是干嘛呀?就加载我刚才定义了一个模块吗。这要能非常快速的看出来啊,我这不引入加载某一个我定义的自定义的这样一个模块吗?他为什么括号加括号了。对呀,这就是为什么我要反复问大家,这东西到底是个什么类型?
10:04
啊,你要类型一眼看不出来,后面你就不能一眼看出它怎么用。啊,这很关键,不要什么没有什么压力啊,我一我一眼一盯,我就能看到他什么类型。这就是大家对它的基本语法是不是真的非常熟悉,好来啊,到此为止,服务器上就写好了,等会我们再来看看,先运行跑一下效果,我们再来看一看是一个什么样的情况啊,接着需要去写什么客户端,在客户端里面src下面建一个什么。Test,一个测试的文件夹,相当于SC下面建一个什么test,好,接着在test下面建一个说IO的什么。测试模块啊。你要会读代码啊,接着把它搞进来。
11:00
好,这一个模块,其实它并没有向外暴露什么。能看到吗?他引入了一些东西啊,写了一点语句,有写什么export吗?没有。并不是所有模块都需要暴露什么,他就需要执行一下就行,那怎么让他执行一下呢?怎么样他执行一下。怎么样,他得到执行的机会,也就现在写的好了吗?用上了吗?没有怎么样用上。关键是。告诉我这个事情,这是一个非常简单的事啊。就我现在定义了一个模块,我想让他用上,我现在刚才问了一个问题,我说我问大家,我说这个模块用上没有,你们又说没有,现在我问你怎么才能用上。我就想把它执行一遍嘛,说白了我也就是说,说白了,你说我现在去运行项目,他会不会执行。这个代码会不会执行,明显不会嘛,我新建一个模块,没有地方引用,怎么可能执行呢,对吧,那现在我的问题就是我怎么样他执行呢。
12:11
是吧,说白了还记得我们外派打包是从入口GS去加载所有相关联的模块,对不对,那我也就是说我只要将这个模块挂在那个上面去就行了嘛。对吧,啊,任何一个模块我要让他执行,其实要把它说白了,就是在入口文件里给他什么引入。能不能你们引入相当于是没关联上,没关联上WiFid打包的时候会找到他吗?他找不到啊。对吧,最直接的肯定是关联在路口上面,你说老师我关联到别的文件行不行,关到main不行,当然也可以。对吧,因为我关联妹嘛,妹在关联他也不是可以加他进来嘛,他肯定是在这里面比较直接,对不对,来写个import,我就不import什么东西了,我直接。
13:05
为什么直接是这样?大侠,我这里面为什么没向上面这么写啊,对呀,因为他没有暴露什么,我我得不到什么东西,能不能我写的什明这也是例fine的是没有东西的,就我这么写的,哎,我就查他有值吧,没有,因为他都没向外暴露什么,我怎么能可能得到东西呢?对吧,这些这些东西都应该很清楚啊,你一旦清楚了都都都知道了。好,那你说到此为止,我们客户端和服务器端都写好了。啊来。为了确保万无一失,我把这一个客户服务器端先运行起来。OK吧,OK,接着呢,我们去把我们的这个客户端应用与并起来,我们福权是运行在4000吧,好没有问题,来啊,把它关了。
14:10
运行一下。运下以后呢,就会打开浏览器。啊,打开浏览器呢,那肯定会运行刚才那篇代码是吧?啊,那篇代码就是向服务器发消息,接收服务器访问发送的消息。嗯,他要几个过程的。过来了吧,这里面有些打印输出啊,打印输出了什么呢?大家看一下浏览器什么,像服务器发送消息,消息就是个数据,我发了一个对象,对象里面有什么呢?Name是to date是一个日期值。能看到吧,啊,我就随便发了一个对象啊,说白了它是可以发对象的,当然我要发一个字符串行不行,那更可以了,是不是。
15:05
好,接着浏览器最后啊,浏览器接收到什么消息,这个消息从哪来的,服务器发送了呗,对吧,服务器给你发过来看的是什么,是不是把他两个接收到的数据给他拼了一个串了,看到了吧,好看一下,那我想看服务器上的打印输出,我怎么看呢。我想看服务器端的打印输出,那服务器上没界面的呀,对不对。看了。看我服务器上运行的控制台呀。别看上面,看这里。说什么服务器接收到浏览器的消息,消息的值是不是这个值能看懂吧,接着说什么说服务器向浏览器发送消息,哎,这个消息应该啊,消息就是这个数据啊,消息就是数据,只是他没整理,我们来看一下,大家看一下啊,把代码看懂。
16:10
来,那我就先看这个服务器端吧,这都比较简单,看里面。好,我们来看一下先引入谁。是不是说的IO这个库,这个库引入以后返回得到的是一个什么。函数。能懂吗?函数呢?这个函数执行的时候需要接收一个什么呢?Server接收一个服务器啊,相当于挂在这个服务器上面,他得到了一个什么对象呢。IO对象就是它的一个核心的对象,相当于一个管理对象,而这IO对象它,诶有一个方法叫on on怎么理解?On,为什么叫?为什么是监视,为什么绑定监视啊?还记得有咱学过这样的语法,什么时候学过啊,这块里面就有二来绑定一个通用的监听,你指定什么名字就绑定什么名字监听。
17:14
其实啊,我们后面后面也会用到啊,后面也会用到这个语法,这说一个什么事啊,啊今是什么。连接,那也就是说这个回函数什么时候掉了连接,哎,有客户端跟我当前是服务器端记录,我当前是服务器端,有客户端跟我产生连接,那它就会毁掉。能懂不?而这一个代表什么呢?Socket就代表我当前服务器与那个对应的什么浏览器,刚才不说了吗?有一个浏览器,简单说一个浏览器跟我的服务器连上了,懂不懂啊?那这样就代表什么服务器跟浏览器的连接对象。连接对象接着看啊,这个连接对象也有一个方法叫什么叫2A,这两个都是二,有区别吗?有区别这一个相当于监视的任何浏览器,跟我只要一年。
18:16
它就会掉。能懂吗?而这一个是什么呢?这个只是针对什么当前跟你产生连接的某一个什么浏览器。记住了,就代表的是一个连接。懂不懂啊?这个连接用来干嘛的?它也是监视,其实绑定一个监视,监视的事件名就叫这个,或叫消息名,这就是制定事件机制。前面我们跟大家说过,这这这句话非常的简洁,也比较熟悉,跟我们前面很类似的,这不就是指定名称和回调函数嘛,接收数据吗?呃,这个数据由谁来发呀?
19:00
浏览器。对吧,用浏览器来发。大家看到浏我先不看下面啊,你看浏览器怎么发的看,记住这个事情面叫圣,随便叫你就叉叉都行。啊,任何名字都可以叫。好看着客户端先,诶这个时候引的包什么。不太一样,其实就在说什么呢?说的IO它有两个包。我们刚才下的是同一个同一个包啊,我们刚才下的同一个模块,大家看着啊,最前面我们不有一个下载嘛,我们前端前台应用后台应用下来是同一个包,其实这个包相当于包含两个包,什么懂啊,一个用于服务器端的包,就叫说的点IO,它还有一个包叫什么呢?short.io杠。Client,你一看名字你就知道这个包用于什么客户端,对吧,他得到的就是什么呢?IO,而IO干嘛去是不是连接指定的,不看到他的那个协议叫什么WS。
20:14
而且这个不能瞎写,不扣台4000嘛,真的吧啊,我的我的那个说的IO的服务器端是不是关联到服务器端的serve上了,那它间距的端口号是不是也是4000。对吧,它也是4000,只是注意这个东西,我能选STP吗?不能。接着得到的是什么?这个就是跟跟服务器端的so进行连接,是个LG连接,接着得到一个什么连接对象,这个so就代表一个连接对象。这个连接会一直连着啊,通过这个连接对象,它有两个方法,你看呢,一个叫啊啊干嘛呢,绑定监听,绑定监听是用来干嘛呢,接收响应接收数据的,对不对,而这个数据从哪来。
21:07
对吧,我当前是浏览器端,你说我浏览器端接收数据从哪从哪来的数据,肯定是服务器嘛,对不对,能懂不?那服务器有没有发数据呢?它是有发的,只是后面我没看,大家看一下。大家看他,当他收到消息之后是吧,他就干嘛呀,IO点什么呢?Itit告诉什么意思,分发的意思。分发什么分发消息啦。对吧,那方发消息,我是不是有一个名字,诶这个名字能随便下去吧,这这这两个名字都能随便下上现在。我能改吗?比如说我这个改了行不行,行不行,我这改了。能收出去吗?
22:00
对,要对应,你可以选A没问题,但对面也要写A。说白了,我们制定事件的时候,是不是事件名要相同啊?你比如说你绑定了一个点击监听好了,你小子不点击摸一下,你觉得行吗?那肯定不行嘛。那不能。啊,就不想了,点击他他两码事吧,对不对啊。这个需要去知道啊,那这边也是我相当于是不是可以向服务器是不是发消息。可以吧,可以的,就说点什么1IT,而我这个1IT大家看呢,我这个说连接说是个连接对象,大家知道连接对象什么概念,连接谁跟谁哟。连接的谁跟谁,那不就是客户端浏览器跟服务器吗。对不对,那我现在在浏览器端,你说我去分发消息发给谁服务器嘛,那我发的是不是这样一个对象。
23:02
对不对,那我这边我的服务器这一端接收到能看到,怎么才能接收到数据。你看他发的消息叫什么名字,Send message,而我这边绑定监听的名字叫什么,也叫send message,那这样我是不是能收到你发的数据?呃,这个数据打印输出跟他一模一样,对不对,仍然还是对象。那接着我收到以后又给他什么?是不是浏览器上发一个消息,发的消息是发的这个吧,听懂吧,我要写的话应该这么写,这就是一致的,听懂不?我发的是这个串码。对吧,那我发这个串发给谁了。浏览器你要知道现在咱在哪个哪哪边啊,我们现再发个浏览器,那浏览器靠什么来搜呢。对不对,他是不是绑定了一个receive message的监听,对不?这样的话我能不能收到消息,当然可以啦,其实一点都不难,我觉得。
24:14
因为这就是一个自定义事件机制的一一种写法,只是说啊。它关联的是两端,一个浏览器端,一个什么服务器端。嗯。但是编码上是一样的,说白了他已经封装的很好了啊,对于使用的来说,你都不用管他有没有发请求,他肯定发请求了,但是你不用管这些,他已经跟你控制的特别好了。啊,你看这里面啊,中国的API没有几个啊,没有几个啊,有一个on有一个什么。还有一个IO的一个,但是啊,浏览器的IO和那个服务器IO产生的方式不太一样,我浏览器端呢,是直接引入这个包就得到了IO,而服务器端呢,大家看到引入这个包以后还要执行这个什么。
25:06
函数才能得到IO,能不能好IO大家看看这里面,这里面我写的IO点一米。而不是写的,大家看到我这边写的什么so的移民,这有没有区别呢?有非常有区别,非常非常有区别,其实我这里面也可以去执行什么呢?说可以的一米跟这一样的,我一样可以,就我这么写的一样可以发过去。哎,老婆,我这不有一个吗。对吧。这个说在浏览器上服务器上相当对着的啊,那它们俩有什么区别呢。这一个是全局的。什么意思啊,大家知道服务器可能连着好多客户端是吧,你假如每个人你们都是客户端,我是服务器,你们都连着我,是不是你们相当于跟我连,是不是你们手上都拽着一个索,对不?那如果我服务器端用说的去点it。
26:11
那你想只能发给你们其中某一个。那你说老师到底是谁呢?那就要看这一个说是我这个服务器跟哪一个客户端,你们某一个人的连接。对吧,肯定是某一个人的。这能不能懂,那也就是说只能有一个客户端收到消息能不能听懂,那如果我是用什么呢,IO呢。也就是说我的IO里面是不是关联着好多说就你们不都大家都连上我了,对吧,都关联在我的IO上面,我就是IO嘛,对不对,我就是那个服务群的IO啊,你们都关联上我,那我一我自己冲了一下发出去,那不全局的吗。这个能不能懂,这是发送给什么发送的,所有啊连接上啊,服务器的客户端能懂不?那至于到底有多个,这个是不一定的,对不对,大家看有几个连了。
27:20
好,而这一个呢,发送啊给当前啊,Socket对应的什么。客户端能不懂只有一个啊,这个要注意啊,这两种方式都是可以,我对方因为我现在就一个客户端,一个服务器端嘛,对吧,我没搞多个,所以无论你是去IO去it还是说去it,因为结果都一样。好,今天呢,我就只是大家说了说啊,那明天呢,我们就把这个呢写一写,其实这个并不难啊,写下并不难,晚上呢,大家有时间可以稍微的写一写啊。
28:08
主要是你。
我来说两句