00:00
我们编写一个页面,充当我们客户端的功能。来写一个HTML文件,写个名字叫,我们就叫hello。好的。然后呢,我们先建。表格。Firm。Form呢?我们先给他来一个这样的动作,就是UN submit的处理,Return false。对,我们不让他自动提交,我们通过按钮来触发我们的相关的事件。一个文本域,好的文本域呢,我们往这边挪一点,这边有点太窄了。在这个文本域里面,我们想给他来一些信息,给他取个名字,我们就叫message。因为后面呢,我们发送消息是这个边就叫message这边来一个style样式,样式呢我们指定一个高,对这边高呢,咱们就三个300个劈叉。对,再来一个宽度,也来一个300个劈叉。
01:01
可以了。这是我们第一个,我们然后呢,再给他增加一个什么呀。按钮啊,Type button。八字呢,这边我们给它一个值,赋一个值叫做发送。发送消息。发送消息,然后去响应一个安克世界,安格利世界呢,我们先把这个写好啊,Send。现在还没写this点什么呢?This点这个,我们这个form。的message。Message这个,诶这个message他找不到是吧。Form。Me啊,应该找到了,第二什么呢?Value。Value。也就是说我到时验是点击的时候呢,往这个send发送的是该文本域,文本域里面填写的值,好,这是第一个,紧接着我们再写第二个。
02:02
好的。第二个呢,我们继续往下写,也是给他来一个ID,这是给他复个ID一样的哈,这个ID呢,我们写一个race,就是返回的response。Response的文本就在返回到这里,就是服务器那边返回的有文本呢,我们就放在这个文本域里面去,所以说ID呢,我们叫response text,然后呢,Style样式给他一个,也给他指定一个高度和一个宽度高度。我们也是一个300PX对。呃,宽度咱们也来一个300PX。好的,这就写完,写完过后,是不是他也应该有一个相关的按钮,我们也来触发一下,也也来处理一下。Tap,因为大家看我的界面嘛,这边是不是也有个按钮清空内容对吧。好,我这里面也写个button。B。
03:01
然后这边呢,我们给它来一个value叫清空内容。对,点击一下就把内容清空清空。内容。同样我们还给他一个on click的处理,这个on click呢,就document。刀。第二什么呢?Get,对,我们调用这个get element。Element by ID有没有有的,然后我们把这个值传进去。好,改天。就他吧。是不是这里面因为有已经有双引号引起了,这边就用单引号。这个大家应该是清晰的get的by ID拿到过后呢?干什么?下一步该干什么?是不是点我想想应该怎么处理啊。呃,拿到过后咱们点Y6,对点一个Y6。VALUE。
04:00
Value,然后呢,直接给他。这样子就可以了,明白吧,就说当我点击这个按钮按钮过后呢,我获取到这个按钮。然后把它的value制成一个空的,就这意思,好这边表单这块咱们就写完了,写完过后呢,我们回到这边开始写他的脚本。写了脚本在哪块写呢?咱们就在body下面写,Body这个里面去写吧。写个脚本。我们首先呢,定义一个变量,在这。Socked,对,因为待会呢,我们要用是web socket编写,我们先定义一个web socked啊socket,然后我先判断,首先看你的浏览器是不是支持web so的编程,就是说先判断。判断什么呢?当前浏览器是否支持支持web socket编程?
05:00
好,那就做一个判断。如果温度。Window点慢呢,就是它的web socket,看有没有好的,如果他有这个东西呢,我们就goon。对不对,Go on否?否则else我们就提示一句话。而那。提示怎样一句话呢,就是说您的浏览器。当前浏览器不支持web socket编程就完事了。也就是说,我们在进行web编程的时候,你的浏览器要支持它,你不支持,那我们就没办法写好,继续往下开发。看吧,呃,如果他支持这个web socket编程呢,我们就继续来写,首先拿到这个shocket怎么走呢,大家看。在这里我们六一个web socket,好,这边写上我们地址,大家还记不记得我在写服务器的时候,我说过你在浏览器发送的时候呢,浏览器在发送信息的时候要按照这样一个格式来写,我们这写的是hello,你那边也要写hello,明白,好我就去给它对应上。
06:15
端口号也是对上的就要拿到。拿到这个过后。下面呢,我们就要继续往下编写啊,那就这样写了,Shed。点a message。什么意思,来这个先把这个函数写完啊,方写到这面这边呢。我做一个这样的说明,这个类似哈,相当于。啊,就是写下相当于什么呢?相当于这个圈。大家还记不知道,我们服务器里面有个China read的零啊,它相当于这样一个东西,那么一问就是我们这边写一个写个值,我们叫EVEV。这个干什么呢?它是收到他可以收到服务器端,服务器端。
07:06
啊,发送或者回送,回送这个回。回送的什么呀,消息,这个就是说有点类似于我们浏览器这边去接收什么呀,接收你服务器端回送的消息,好,那你怎么回收呢?那显然我们就用document。点get。Get element by ID element by ID哪一个呀?因为我待会儿要把消息放到这里面去,是不是我就把这个ID写上写上。哎,先拿到这个。组件拿到以后干什么呢?这边会返回一个变量,我就收到,比如说我叫RT等于解析,那RT干什么?点我们的value,把值给它放进去就可以了,Value。没有这个提示。Value等于什么呢?就等于你给我回送过来消息,我填到这个框框里面去就可以了,那就是RT.value拼接一下。
08:11
加上什么呢?加上一个换行符。也就是说你呃,你那边回送一个,我就加到这个框框里面去,而且呢,我是以累积的方式,对吧,那就EV。这里面呢,还得有一个。诶,能懂哈。说这句话,我们就是在做一件事情,就是把服务器端回送的消息显示到这个框框里面去,仅此而已。好,这是我们这块,嗯,这是对消息的一个回回送的一个一个显示,那下面呢,我们还要继续来写soing open。Open。好,跟上老师思路。好,Open这边呢,我们仍然写一个方法来进行这个处理,好这边呢,我们也把这个名字叫EV吧,好的就统一叫,这个是相当于什么呢?我也做一个注释啊,它相当于注意听,相当于。
09:08
连接开启,OK,连接开启了就open了吗?那你这个连接一旦开启,我可以在这个地方提示一把。大家看这里面就说如果你连接一旦开启,我知道你服务器跟我这个连接已经连起来,我就写个连接开启,就这个意思就是就是让他感知到吗?那同样道理,我们在前面已经通过这个方式可以拿到的。好的,然后呢,我就讲RT点八六。V等于嘛呢?等于提示一句话叫做连接,连接开启了。OK,好,就这样子。继续,那你是不是我们还要感知到连接关闭,你可以认为是感知到了。啊,感知到。因为这是常连接。感受到连接。
10:02
开启。那么同样同样呢,我们还要写一个方法,就是感知到这个连接关闭,那这个呢,就是shocked,它提供的一个方法叫做cloud,叫什么呢?叫on。哎,我看看啊,On open这边是不是写错了,On open,那这边呢,这个方法就应该是on close啊on close,对,就这个没记错,同样咱们也是个方式。对,这边呢,我们很难试用EV统一下这边是干什么,相当于连接关闭了,哎,就是说你服务器里面关闭这个连接了,对不对,关闭先说是连接。连接关闭。或者是或者这样讲,就说我这边呢,感知到连接关闭了。如果你感知到连接关闭,我们应该怎么做呢?好,其实就是再加一句话就可以了。只是呢,这个时候我们应该是用累积,就是把这个把它这个内容啊,把它拼接起来,对不对,五六。
11:08
再加上。什么呀,加上一个换行,再加上这样一句话,叫做连接关闭了。待会大家可以看到这个效果。连接关闭了没问题吧。这就是我们这感知连接开启,连接关闭这边呢还可以,呃,接收到服务器回送的消息。好,那下面是不是还有一个特别重要的方法我们没有写啊,就最后最后一个方法,就是散的方法没有写,是不是当我们点击这个发送消息的按钮过后,会拿到这个文本域里面的内容,把它发给我们的服务器。还记得吧?好,那现在呢,我们就开始编写这个方法。好,当时。那这个方法的名字我们已经定好了,叫send。诶,怎么到这边来了三。好的,那删掉的时候呢,我们肯定会拿到一个message,没问题,我拿到这个message对象,我就做一个判断,这边是发送消息。
12:07
发送。发送消息到什么样服务器没问题吧?啊先做判断,首先呢。我们首先看这个socket到底是不是已经成功了啊,如果window.socket创建好了,我们再做对不对,那这个呢,如果他没有创建好呢,不玩了,直接返回。就是先看这个socket有没有建立好。先判断socket。哦,就是我们这个web socket是否创建好了,如果没有创建好,直接就return了,咱就不玩了,好的继续,那那如果是创建好的话呢,我们就来看。再判断一个socket,它的一个状态read state。如果这个状态呢?它就是处于一个web sock open的状态。
13:03
Open的状态,这样去写open不对,不是,不是一个方法,是个状态啊。那点。呃,这个对,这个别写错了啊,也就是现在是一个open的状态,那现在呢,我们就可以通过通过这个so发送消息了。发送消息,怎么发送呢?Sorted点它有个方法叫做send,把这个消息扔出去,注意此时此时此刻,这个消息呢,就是跟我们服务器端。哎,就是我们这个服务器端这边写的。呃,这这边处理的这种类型是能够保持一致的,就是text web socket frame证的形式发送出去,因此他们类型呢,是能够匹配的,你不能乱发。因为这是他们协议已经定好的。好,S。如果还没有打开,我们提示一句话做连接。连接没有开启吧,连接。
14:02
连接。没有开启。好,同学们,代码我们就写完了。代码就行了,那现在呢,我们来试一试,看看整个程序是不是能够正确的运行,再检查一下。啊,这个是等于啊,这个别写错了,是两个等号。啊,这边没问题,这边是直。好朋友们,我们来用,用一用,如果有问题,我们调一调好吧。如果有问题,我们就调一下。好的,那现在呢,我们先启动。呃,服器端。服务器端运行。跑起来。跑起来。Okay。跑起来了。好,跑起来过后呢,我们在运行这一个,呃,浏览器这边的页面跑起来也让一下。这个时候呢,它会默认打开360。好,同学们看他马上就能够检测到连接开启了,说老师那你关闭一下呢,来我们看看,如果我在这个地方,同学们我把这个大,大家看这一段其实也也有相应反应,我把它关闭。
15:12
诶大家看是不是他马上就感知到连接关闭了呀,是不是很好啊,也就是说我们这个长链接其实就已经建立起来了,那如果他不是长链接,肯定他不会这样感知到嘛,好我们再打开。当然你这次再打开。再打开的话呢,这个地这个地方是,呃,不会马上感知到了,那你得刷新一下,你看他们,你看你现在是不是已经起来了。你不刷新,那他可可就不知道啊。因为现在连接没有没有建立起来嘛,他肯定是无法感知的刷新。是吧,连接开启,我现我现再发个消息,你好吗?诶你好吗。你好吗?OK。发一个看看这边能不能。
16:00
拿到一个回信。好,看到福晋,他把时间打回来,然后说你好吗?对不对,好。我们再写一个,呃。冬天。冬天冷啊,冬天冷,吃火锅。吃火锅。OK,我们再发一下,那你看这边也拿到了,冬天冷吃火锅,对那同学们看到,其实在整个这个过程中,我们这个连接呢,是一个长链接,而不像我们以前传统的那种,呃,发你这个就没有了,是吧,而且大家可以看到,嗯,如我们刚才呢,已经演示了。这个当然这边也拿到了哈,这个肯定不用再多说,这边也拿到了,你好吗?冬天冷吃火锅,如果我们这一关闭。浏览器这边是马上就能知道同样的道理,我把这个浏览器关闭了呢,我把浏览器关闭了,同学们。服务器这边也能够感知到,它是怎么感知到的呢?大家看这里,因为它一旦关闭过后,他也会去触发这个行为,就触发这个函数就是。
17:04
嗯。哪一个啊?应该是触发这个handler remove handler removed我们看是不是这样子的,那你也就说我我也能够知道你服务器关闭了,我这边也可以打印说发现某某某某China。ID达到这,因为我我能够通过这个China的ID知道你是哪一个,呃,浏览器来的吗?我是可以生成一个唯一的标识,大家有没有发现,是不是这是一个唯一的标识很长。对不对,这是唯一的那么短的那个标识,标识呢,就是这个它有可能重复,所以说如果同学们想增区分,呃,每一个China,那最好用这个长的会比较好,用这个长的来管理比较好,那我们来试一下,如果我把浏览器关闭了,是否能够看到。就是把这个关闭了,是否能够看到这边有感知。好,当我一关闭,同学们可以看到,这边马上就提示了,Handle removed,谁谁谁谁谁,被呃,被调用了,就关闭了。
18:04
所以说它两两方面都是可以感知起来的,而且用的这个长链接,这样呢,就避免了我们这个资源的,就是说每一次这个浏览器啊,发一次请求,呃,然后再发一个请求,总是产生新的连接,这样呢,呃,性能还有。包括你将来用用这个方式来推送消息,我们都可以实现,对吧。好的。那这个那这个说完过后,我们有几几点呢,还要跟大家聊两句,好,我们还有几个比较重要的地方先要聊两句,待会儿呢,我们在下个视频为大再说一下。
我来说两句