如何用websocket实现数据实时更新

没有 web socket 的时代，我们是怎么来处理一些实时场景的？哪些是实时场景呢？我下边举了一些例子，比方说像股票的 k 线图，我们需要它实时更新，什么意思呢？就股票价格一变动，那么这个 k 线图呢，要马上能够反映出变化， 然后还有一些场景呢，比方说像这个，呃，聊天，比方说网页上购物的时候跟客户之间的聊天，对吧？那么这是一个实时处理方案。还有呢就是网页上的警报重要通知，比方说突然一个地震预警， 那么这个时候分秒必争，呃，希望实时的能够显示到网页上有个消息提示。那么这些场景啊，都有一个特点，就是实施性， 这种对实质性的有要求的页面，他会带来一些问题，就是怎么来实现？我们来考虑一个聊天场景啊，比方说两个用户聊天，两个用户聊天呢？可能跟大家想象的不太一样啊，不是说一个用户他直接把那个消息就发送给另一个用户了？不是的，我们一般来 说聊天都会经过一个服务器，让服务器来帮我们转发消息。好，那么怎么来中转呢？比方说哈，我们用户一要给用户二来发一个消息，那很简单，我用户一呢就告诉服务器说，来，你帮我给用户二来发个消息啊，消息的内容就是你。好，那么这个请求呢？就可以用一个 app 请求， 那么友情球球响应，服务器响应，他说 ok， 没问题，马上给你发，这个时候服务器就发的时候就发现问题了，我怎么把消息给 uzer 呢？他给不了， 为什么呢？因为 atp 协议啊，他要求服务器不能主动，服务器只能被动，什么意思呢？就必须要 user 二去请求服务器，服务器才能跟他响应，但是问题来了， user 二他并不知道有人给他发消息，对吧？他也不知道什么时候去请求服务器， 懂这意思吧？说这个问题出现了，问题的根源呢？就是因为 a t p 协议啊，是请求响应模式，请求必须要在前，响， 响应必须在后，这导致了服务器无法主动的把消息推给有人，那么这个问题肯定要解决，怎么解决呢？我们开发者想了很多的办法，我们看一下我们企业的前辈们是怎么来处理这个问题的，其实也就是我当年在这个呃，毕业之后啊，处理这些问题的时候 的解决方案啊，看我们是怎么去想办法的。面试呢，有可能会问到啊，所以说我们这里看一下过去怎么解决的。第一种叫做短轮循，短轮循就是一种以话痨式的方式不停的比比啊，什么意思呢？就是客户端啊，每每隔一小段时间就像服务器去请求仪式，对吧 你我因为副客户端这边他并不知道有没有新消息，他就不断的请求，不断的解忧，有没有新消息，有没有新消息，用这种方式啊，叫服气请求啊，下面一张图啊，可以看得很清楚啊，这里就看来来回回有很多次了，对吧？有没有新消息啊？没有。服气告状没有，这就是一次 atp 请求和向右， 对不对？那么当然我们属于伴随着我们 a p p 请求和响应，是不是有个三次握手，对吧对吧？有 t c p 协议的，三次握手，然后四次挥手就结束了，好，过了一段时间过后啊，这个时间呢，可以设置的对吧？也可以用 sets in table， 是不是可以设置一个计时器，每隔一段时间发送一个阿迪克斯请求， 然后过了一段时间有没有新消息啊？又没有。然后再过一段时间有没有新消息啊？哎，发现有了他就把新消息推给他，然后再过一段时间有新消息吗？没有 啊，就是用这种方式来进行处理的，当然这种方式处理呢，能不能实现呢？肯定可以实现，但是呢，他可以看出有很多问题。首先这里边就有很多次的 tcp 的三次握手和四次挥手，对吧？好多请求是没有意义的 啊，不行的问，不行的问，问了别人烦恼。所以实施人群呢？他的好处是非常简单啊，这个模型特别简单，你设设置一个定时器，不断的发动请求就行了。那这种发 答案缺陷是非常明显的。第一个缺陷呢，是会产生大量无意义的请求。第二个缺陷呢，是会频繁的打开关闭连接，对吧？那个 tcp 三十或者四十位手不断的进行，但是很多时候连那个连接是好发的，都是毫无意义的消息。其实还有一个问题就是实时性并不高， 像这种话痨似的并不高，因为关键就是个，这段时间你要定多久？你定的太短吧，那个效率浪费太严重了，比方说你定个一秒钟，那服务器太烦了，对吧？一天如果打开这个网页，相信 k 线图这个网页你可能一打开就是二十四个小时，就或八个小时，那服务器太烦了，八个小时每一秒钟问一次，那服务器太烦了，占用服务器资源。 定的太长吧，那个实时性的要求就有问题了，比方说你定一分钟，那这一分钟内来了新消息，你就不知道了，你要一分钟之后你才能拿到新消息。那这一个是一个很麻烦的问题，那怎么解决呢？啊？聪明的开发者充分发挥智慧啊，条件有限， 那我们就想办法呗。然后于是呢，通过长文讯来进行解决。那长文讯是怎么回事？客户端这边呢？他直接一开始啊，就发送一个请求到服务器，问一下有没有新消息，但是这一次 服务器呢？他没有新消息，没有新消息他不给他响应，你看上边是没有新消息，告诉他没有新消息了，对吧？在这里不响应服务器，等到有消息之后，然后再响应，把消息内容响应过去。 好响应客户端之后呢，客户端马上立即又发起下一次请求，又问他有没有新消息，那么这个时候服务器没有消息，就又等， 等到他有消息之后，哎，有可能响应过去，反复的进行这么一个过程。那么有了这种模式之后呢，你会发现请求和响应的数量是不是减少了？特别特别多，对吧？不是话痨似的，就有点像那个，你去一些银行啊，去询咨询一些问题啊，他正在忙的时候，你问他理都不理，对吧？他等他忙完了之后， 在你，你在那里等着，就这么一个模式哈，这种这种模式呢，好处在于他这个请求响应的次数就变得很少很少了，而且呢，他没有无意义的请求和响应，都是有意义的，对吧？服务器有了消息之后才可以响应， 但是这个长轮群呢，看上去还不错，但仍然存在问题。第一个问题就是客户端长时间收不到福气响应，你看，有可能这个你发了一个有新消息吧，可能今天一天都没有新消息，然后呢？是五个小时内都没有新消息，那五个小时之后才才给你发过来。那么五个小时，你想一想，客户端那边早就超时了， 对不对？所以啊，这个事情就可以设置，还是还可以设置超时时间？等待时间他就超时了。那么超时之后呢？浏览器他就会主动的断开 tcp 连接，把连接断开，比方说哈，这里呢，等了五个小时，但他十分钟的时候其实没有到十分钟了，比方说我们设置个时间十分钟，十分钟这个时候，哎，客户端这边就超时了， 连接都被断开了，那后边还能响应吗？连接都没了，对吧？后边就不可能出现响应了。那么这种情况怎么处理呢？其实也能处理，当我们在客户端发现超时之后， 然后立即又会重新来一次这个流程，又问，又重新发一次请求，有新消息吗？就之前那个请求就没意义了，对吧？那么这一次重新发请求，然后扶过去，又等好，这一次请求又超时了，然后我们又重新发请求， 是这么个意思啊，就不是用计时器，是等待一个机会去发请求，要么就是服气响应之后我发请求，要么就是超时之后我发请求啊，是这么一回事，当然这样子做肯定比短允许好的多。 嗯，这种情况呢，其实可以处理啊，就是因为超时而结束的时候是吧，会抛出一个异常，那么这个时候就重新发生了福气，当然这样子的话也会保导，导致呢，有一些请求没有意义，比方说刚才我们说了，在这里超时了，你重新发出请求说明呢，上一次请求是不是毫无意义的对吧，他没有得到什么没有执行的消息， 但是呢，总之比短轮讯好的多啊，这样子的要超出时间，十分钟到位，十分钟发一次吧，十分钟发一次，而且实质性也比较高，对吧？只是实质性还是比较高的， 以前过去的使用的最多的就是长短学。哈喽，关注读一剪辑号的同学啊，我是袁老师，插播一下，要想学正儿八经的浅端知识呢，你就好好来看我的大师课。大师课虽然是免费的，没有价格，但它的价值 远远超过你以往看过的任何课程，无论是里面讲的任何内容。比方说什么 v 八原理啊，无忧原码呀，比面试题啊，还有常见的效果实现啊，任何一个你学会了，都可以离真正的高薪跨进一大步。你把这些内容学完了，不用我说，你自己都能感觉到什么，三四十万的年薪不是那么遥不可及。 如果说你天天看袁老师短视频都觉得有帮助的话，那么大师课对你的帮助可以说把我的短视频加起来乘一个十。你开玩笑啊，那是体系知识，不是短视频能比的啊。所以呢，还没有领到的同学啊，抓紧时间可以进咱们评论区定 一条，然后呢，加入我们的粉丝群，根据提示领取就完事了。还有一个问题呢，就是由于客户端可能过早的请求了服务器，服务器呢又没有新消息， 那么这个时候呢，福气不得不挂起这个请求，一直等，等到新消息出现过后才响应的。那么挂起这个请求呢？福气是要占用资源的，那么这个这这资源占用，如果说请这个用户的数量多了，那这个资源占用还是挺恐怖的，那以前也确实没有什么好的办法啊，这就是我们过去的两种方案。

当我们的 vip 项目实时通信要求很高的时候，可以考虑用 websitecott 来实现。目前在社交聊天、弹幕协同编辑、 股票基金实时报价等需要高实时的场景均可采用 webscott 来实现。这集我们就来看看若伊框架分离板是如何实现的。若伊在其在线文档的插件集成中，为我们提供了集成 webscott 的依赖。添加 匿名配置及相关代码下载和测试。从下载的代码中可以看出，其主要是在 reframework 中添加了一个 website cat 目录，目录下包含了四个文件， some of our utos、 web socket config、 web socket server、 web socket users， 分别为，信号量相关处理、 websecate 配置、 websecate 消息处理、 websekt 客户端用户级核心代码。在 web socket 文件上，其主要定义了四个方法， on open、 on close， on air、 on message。 从方法名称上我们基本上可以知道方法的作用了，我在这里就不坠述了。再来看看前端应该怎么实现。 我们新建一个测试菜单，并配置好访问入口。新建一个测试页面，添加以下代码，这里面的核心代码是弄一个 websocket， 并为其附上后端 ws 的访问地址，这样我们就可以测试了。这里需要注意的是， websoc 的访问是以 ws 开头的，而不是以 http 或 https 开头。

刚才给大家提到这块，既然大家都已经跟上节奏，没有问题，也没有调对，我们继续往后面说，那我这个时候要去通过这个 websoke 的，我们要实现。好，我，我现在要给大家聊到的是什么呢？我现在里面写一下。可能有些小伙伴刚进来，还不知道我们现在要给大家聊到的是什么？ 我要给大家聊到的是 vip 说给的，哎，我们的实时的这个数据展示啊，我要把我们刚看到的整个，哎，就是图表数据，我跟大家先写第一个啊， 第一个写完了，其他的呢，都可以按同样的方式去进行，你想一下，所有的图表数据全都动起来，那咱们这个就，哎功能看起来相对就比较炫酷了是不是？好，我们先把第一个啊先给大家写进来，那我在里面具体应该先要怎么去做呀？ 你要用到 vip 说给的，那我这个时候要开始怎么样去写呢？直接一开始我们就发动请求吗？还是直接开始干 嘛呢？好，刚才给大家提到的文档中，我们先来看一看。那么 vip 锁给的呢？他需要像 tcp 一样先去建立连接，需要我们的客户端和服务端的进行握手连接， 连接成功以后才能进行相互的通信，明白没？所以我们的第一步先干什么？也就是说先需要去连接我们的爱服务器，对不对？好，行啊，我们把这个呢先给大家写进来，那具体应该如何去连接呀？啊？我们在里面要怎么样去连接呢？ 那其实 websok 着呢，他呢是作为一个构造函数啊，如果我们要去对他进行，比如说连接之类的，我们要新建这个 websok 的实力。好，我来给大家写一下，首先在里面呢，我先给大家写一个啊， ws 啊， 那遛一个哎，我们没有对象，是不是要遛一个，对吧？好，我跟大家直接写一个哎， vip soque 的， ok， 我把这个先给大家写进来啊，好，遛一个 vip soque 的，注意他的大小写， 那么我们在里面要写入的哎，就是直接的这个连接地址，当然这个地址呢，是需要我们的服务端来提供的啊，当然要是哎，开发的过程中没有服务端提供的话，这个咱们前端呢也是没有办法去实现的，是不是？好，行啊，我来把这个服务器呢访问的地址呢？哎，也一样的给大家添加进来。 好，那在给大家写到这块的时候，像有些小伙伴平时访问应该知道我们写到是什么 hgdp 吗？对不对？这个呢是 ws 啊，有可能你也会看到 wss 是于我们的 htdb 和 htdbs， 对不对？好，行啊，那么如果是这个时候已经创建了连接，有时候我现在是干了什么呢？执行我们 刚才写到的这一条语句以后呢，客户端就会与我们的服务期端的进行连接，那连接究竟是连接成功还是没有成功，这个我们前端如何去判断呀？我怎么知道你当前服务器地哎，地址已经连接成功了，是不是我可以接受数据了， 判断是否成功或者说失败呢？我们刚给大家说到的这个 vivorsoke 的里面呢，实际是包含了很多方法的啊，我们首先来看一下第一个方法就是连接成功，他会建立的毁掉函数， 也就是说如果我们想知道你的 vip 锁给的是否已经连接成功了，我们可以通过哪个方法呀？通过一个按 open 方法，哎，通过他通过这个回调，我们可以拿到。好，那如果说你现在已经连接成功，我在里面给大家写一写啊，那直接你就可以这样 写吗？哎，我们要是好连接成功，是不是按 open 他就会自动的弹出来了？好，这个呢，就跟大家写到的是连接成功以后啊，他会触发的， 同时我们在连接的过程中也有可能会出现说连接失败呀，对不对？那在连接失败的情况下，我们要调用什么呢？哎，直接的调用这个错误的方法，它代表的就是连接失败， 所以说我建议大家最开始在实现这个功能的时候，我们可以把连接成功，哎，包括连接失败呢都写进来，因为为了验证一下服务端呢，是否已经可以正常连接了。好，行，我来给大家把这个写完了以后啊，我们来测试一次啊。 好，行，刚才给大家说到这块已经写的差不多了，咱们先页面刷新一次啊，页面刷新，哎，你可以清晰的看到连接成功了 是不是？好，有同事连接成功了以后，我也没发现什么呀？连接成功了以后啊，好，我们来通过这个网络呢，给大家看一下我同样的页面呢，再一次的那个刷新一下， 连接成功以后，我们很那个就是可以看到这个幺二七点零点零点一，对不对？你看他当前访问这块还是有点不太一样的，幺零幺，哎， get 对不对？好，服务端返回的数据， 如果我们是那种轮巡呀，就是添加一个定时器，每键个几秒不断的去发送请求，你会发现我们在网络里面的全是请求，因为过个两秒我发送一次，过个几秒发送一次，但是你会发现，你看我们现在看到的这个数据，这个数据能清晰的看到不？那你看他当前的这个时间， 有的时间我们看一下，有些三秒，有些四秒，哎，有一些呢两秒，所以服务端什么时候为 我们推送消息，我们就可以接收到，你现在看到的这些全都是属于服务端不断推送的这个消息，当然他一般情况下呢，啊，这个具体的时间也不是我们前端控制的啊，服务端来控制， 哎，好，你看刚才给大家说到这块数据我们拿到没有？拿到了啊，好，这个呢就是针对于我们刚提到的这个，哎， websoke 的啊，好，不过我当前这块呢，给大家在进行这个连接成功的时候，我们也可以很清晰的看到连接成功了， 那如果服务端要是我们当前访问是败了呢？这个时候他会给予一个什么样的提示啊？ 好，为了让大家看的比较清晰呢，我把我们的服务端地址先给大家关掉啊，我关了服务器啊，访问的地那个地址，好，我们同样的页面呢，再来给大家刷新一次啊，这个时候你会发现他的提醒就是连接失败，所以说我们 如果在开发的过程中，有时候没有像很多小伙伴就会有这样一些疑惑，哎，我现在要去实现这种实时的数据展示，但是呢，我不确定啊，服务端究竟是能够正常的连接还是不能连接？ 那你看我刚才给大家写的这块就看清晰了，如果他提示是连接失败，哎，我们可以问一下后端小伙伴，是不是这个还没有能够让我们正常去访问，对不对？好，同样的道理，你看，我来把这个漏的能给大家先启动起来，漏的启动命令呢？一般就是漏的啊，后面的输入我们的访问服务器地址就行， 你看我连接成功之后啊，就是服务器起了以后，明显看到我们连接成功，这个时候就可以不断的接受到消息了，是不是？好，行啊，给大家写到这一块，那也就是说这个时候相当于服务端会不断的去把消息呢推送给我们，那这个时候你要 进行的一些处理又是什么呢？对不对？好，刚才连接成功，连接失败，我们在这个 vip 所给的方法里面呀，还拥有的是接收到消息的毁掉函数，哎，这些呢都是非常有用的。 当服务端，哎，把这个数据呢推给我们了以后，我们前端如何去接受呢？通过什么啊？ message， 哎，通过他就可以啊，好，行，给他把这个呢我们一样写进来，哎，这个呢就是 好，接收到这个消息，对不对？好，接收到消息啊，好，我来，我来给大家把这块虫虫，我们也来写一写，刚才不是在里面给大家写了成功跟失败吗？那直接呢把它呢就变更为这个爱接受消息， 那接收消息之后，我们的消息又从哪个地方来呀？一定要记得他是中个这个回调，哎，比如你在 里面写到这个 mac 级，那么也就是说服务端返回的数据呢？哎，就是他了，每一次只要有消息推送过来，我们就可以接收数据呢，就是当前写到的这个 msgmycg 就是他接收到的数据。好，那给大家写到这一块想一想， 服务端，哎，我们已经连接成功，这个时候呢，也在不断的向我们前端去推送消息了，是不是？那我们这个时候应该怎么样去处理啊？嗯，很多小伙伴在这一块呢，会觉得，哎，有点晕啊，想一想， 其实这个时候跟我们的福端已经没有太大关联，剩下的就是咱们存前端的行为，如果你用到原声写法，一会我来跟他说怎么样写，你要用到 vivo 的话呢？写法还不太一样，因为他是通过数据驱动吗？对不对？那当我们接收到数据，我实际的 处理就是要把这个数据呢给予谁给予我们的这个，哎，就是系列数据，我是不是要改变的是他的数据啊？ 有些小伙伴的处理方式是这样的，你可能会在里面呢重新的去对，我们刚写到的这个 oppo 型的，哎，只全部的去改，是不是有一部分小伙伴是这样写的，其实我不建议我们来关注一下啊，刚才给大家提到的这个 opos 型 opposing 呢，它其实是一个对象，看到没？你看它是一个对象，对象里面包含了啊，什么标题呀等等等等，对不对？你实际要改的是谁？改的是他 serious series 呢？又是一个数组，数组里面呢，又包含了一个对象， 对象里面呢才包含了我们具体的 data 的知实际，你看我要改的是什么哦？ part 请一对象，对象里面的 数组，数组里面的第一个的得他的值，把他的值改，也就说服务端一会拿到的数据啊，我们付给他是不就可以了，对不对？原生写法是不是应该这样写？好，那这个就简单了呀， 知道了我们刚提到的整个一个思路之后啊，你看我们就好写了，我们想一下刚才这块给大家说到的应该怎么样写好，我们来先把这个给大家写进来啊， 写到的就是我们的这个 oppo 形一，对不对？好，我停顿一下，刚才给大家说到这块呢，这个思路咱们一定要跟得上啊，因为要不然的话，咱们一会写的时候，有些小伙伴不知道为什么一会竖组，一会对象。 好，刚给大家提到的这个呢，是我们的 aopole 选一啊，来，我把它呢，哎，先添加进来它里面的哪一个？由于他是一个对象，你要拿到的是谁？是我们的这个哎， serious series 呢，很明显他是一个数组，数组里面的第一 一个的 data 的织就应该等于我们获取到的，哎，服务端返回的这个织，那服务端给我们返回的数据又是什么样的呀？好，我们继续看一下刚给大家看到的这个接口文档啊，你看文档里面，其实这块写的已经比较清晰了，看清没有？ 这个呢，就是我们具体的消息，哎，消息相当于在哪个里面？在他里面。好，我们来瞄一眼吧。哎，刚给大家说到这块啊，好，我来把这个代码先给大家注释了，以后我们先瞄一眼啊，接受到的具体消息，这样呢，我们看的会更加清晰一些。 好，行，你看我刚才给大家说到这块连接是不是已经成功，成功以后你看我们里面是不是会不断的接受到消息，这个就是我们接受到的消息信息，你看消息他放在哪个地方？放在我们的 data data， 大家一定要记得这个地方由于他是以什么样的方式传送的，节省自负串，哎，这个 能看明白不？好，我停顿一下，刚才给大家说到的这个得一套数据这块能看懂的，小伙伴咱们来一波，六六六，哎，很多小伙伴对于这个应该熟悉，对不对？这个呢也是我们作为开发无论前后段啊必备的。好，问一下大家对于这个数据啊，这个能看明白不？嗯， 哎，奔跑的毽子肉臀说的是对的啊，对，下面腿就提到了吗？把数据要直接的放过来，对，说的是对的啊， 好，行，刚才问到大家一个问题呢，大家都能看得懂，那我们就继续，你看我们的数据放在哪个里面，放在这个 data， 然后你看它里面写到有类别 啊，有这个，当然，为什么我里面还有这个，比如说，哎，消息名字呀，哎，还有什么具体的一些消息还有类别呢？因为我一会要跟大家实现的留言框，哎，就是我们要实现的这个聊天室和 由我们当前展示的这个实时的数据用到的是同一组数据啊，所以一会我们要通过这个类别呢来进行判断。好数据的格式大家都看懂了，看懂了呢，咱们就来写了啊，这块就好写了，有同学说这块这个地方应该怎么样写， 你看啊，我在刚开始拿到数据的时候啊，我在里面呢，先给大家写一个 data， 由于我们拿到的是，哎节省支付串吗？你这个时候是不是要对他进行一个转换呀？对吧？他的作用就是说白了就是序列化吗？哎，这个一定要记得啊，序列化 很多小伙伴很容易忽略，这个你要忽略了，一会我们获取数据是拿不到的，好，那我要把他的数据给予他，你看我当前这块应该怎么样？先拿到的是他的值是不可以了啊？那如果说我这个地方把值给予他了以后，是不是就代表我们什么事都没 没有了，就可以直接的去进渲染了呢？不是的，一定要记得，由于我们的图表还需要进行一个配置，也就说重新的对他进一个设置，所以说你把图表数据改变了之后， 我们还需要再一次的进行三个 oppo 型的处理，你要不设置的话，哎，我们的 oppo 型就算发生变化，他也不会再一次给你去重新渲染的，明白没？好，再次给大家把这块呢梳理一下， 他的作用呢，就是接受到我们的服务端传过来的数据，他的作用是干什么？改变我们的配置项的值对不对？好，我跟他把这个注视也写了，他相当于就是，哎，修改我们这个 oppo 型啊， oppose 的这个配置下，对不对？把它的数据呢？哎，发生一些改变，改变了以后我们还要 对他进行一个赛程 oppo 型的处理，所以有一部分小伙伴呢，会在这个地方重新的去啊，把整个的一个 oppo 型的写进来，其实这块也翻不着，咱们只需要你要改什么在里面的直接写进来就行啊。好，行，写完了以后呢，我们来见证一次啊，看一下我们当前图表展示呢是什么样的。 好，给大家刷新完了以后，我们可以很清晰的看到我们的第一张图表的数据已经开始变化了，大家发现没有，他并不是像刚才大家看到的固定的，你看我们当前图表数据是不是已经开始不断变化，那同样的道理，你要是把后面的这些图表的数据全都变化， 你想一想，那这个时候我们是不是就可以实现非常炫酷的效果了，会一个改了，其他的呢？基本上都是一样的。好，我刚才说到的这块那个不知道大家呢是否已经 到了啊？以后如果再碰到这种什么实时的一些各种图标展示啊，哎，包括什么实时的什么什么渲染呀，哎，其实核心重点最主要的是什么，我们先要明白，你会发现好像前段也没有写什么，哎，无非就是连接成功嘛，哎，那个 就是成功，哎，包括失败完了以后就接收消息，接受消息以后你要干什么，这一块的逻辑肯定就不一样了，那每一个人，包括你的每一个布局，每一个需求不通， 所以你会发现我们好像只需要在这一块呢去进行一些其他的处理就可以了，所以说这 这个呢，就是刚才给大家聊到的哎，我们通过 vipsoc 的去实现实时的数据展示。好，那个小师哥同学说我们这个有没有回放，对吧？啊，好，回放的话，那个大家可以直接的加一下 nice 老师哎，你可以扫描一下我屏幕当前展示的二维码，加一下 nice 老师啊，一会回放的话呢，可以让 nice 老师呢直接分享啊，我们今天的这节课是有回放的啊，像刚才有些小伙伴可能进入到我们的直播间，进的比较晚，那如果是前面有一部分内容没有听 爱心错过的话啊，你可以直接的扫描一下我屏幕当前展示的二维码，加一下赖森老师，同时像我们刚才聊到的这个文档啊，哎，都可以的。嗯， 好行啊，哎，非常非常棒啊，好有同学说那个担心有些知识点记不住啊，哎，其实也还好， 最最最核心的是什么呢？最核心的就是说我们需要先去把这个图表啊，哎，先展示出来，一定要记得先在实现这个实时展示数据的时候啊，先看懂，哎，把我们的图表先看 看懂啊，图表看懂了，数据能接收了，这块就很容易实现了。好，行，这个呢，是刚才给大家聊到的第一个啊，所以你会发现好像实时数据也没有像我们想的那么复杂， 平时我们发送请求爱那个处理数据跟这个呢，也一样，他还不需要去爱在里面干什么，发送请求啊之类的，是不是 好，有同学提到说服务端怎么样写那个说一下吗？啊，我今天安排的这个直播课里面没有聊到服务端怎么样写啊，因为 啊，像我们前端就算用到服务端的话，基本上也会用到的是漏的，漏的的话呢，可能啊，有机会我后面也会跟大家去聊一下漏的吧，毕竟我们还要去啊，搭建这个外部服务器，还要给大家聊一下 xpros， 还要去聊一些其他的啊，一些相关的一些知识点，所以今天这 也可能可能啊，应该说相对更加啊，重点的会给大家聊到的是前端这一块，见有些小伙伴呢，可以先了解一下前端啊，他的一些处理。那同样像啊，服务端我们的语言也不同吗？哎，如果说你要用到，比如说 idolat， 或者说用到一些其他的语言来写这个呢，都是可以的。 对于我们前端来说的话，就是需要提供一个访问的地址，对不对？哎，这样呢，我们一会就可以直接的与服务器能进行通信了，好，行。对于我们的 websoke 的呢，他的这个实现这一块，我想问一下大家是否了解了？哎，了解了我们就继续呢，来给大家聊另外一个啊， 好，我在里面就不跟他把这九个都写了，我就写一个啊，其他的你们，哎，后面呢，可以用同样的方式呢，去那个把数据呢动起来，因为其他的都一样，对不对？每一个都一样的，当然有的可能适合做实时动态数据，有 有一些图表不适合的呀，那咱们也没办法，是不是好行啊，你看，比如像这种有些不太适合的，咱们就不管他一般情况下像什么柱状图啊，纸个线图啊，这些都是比较适合的啊，好， ok， 看到那个 啊，有同意已经说了啊，说啊，咱们的这个前端的 vip 说给的对象是内置的对象吗？ vip 说可能他是属于 h 五里面的一个新的特性，哎，我们不需要引入这个是 h 五里面啊，引入的一个新的特性 啊，像有同学如果是对于我们的 h 五比较了解的话，平时接触到的像什么音频呀，视频呀，哎，本地存储啊，是不是这些呢，都是属于我们 iq 五的一些新特性啊，那么外部缩体的呢？他也是的， 不需要，就是像大家会有一个误区，觉得我们还需要在里面引入什么样的文件呀，或者是干什么什么都不需要，你在里面直接就可以用了， 明白吗？嗯，好，行啊，好，再就是那个用你好呀同学说四步就可以吗？是的，我们前端仅仅只需要四步，所以外部所给的搭会有的小伙伴会觉得这个好复杂或怎么样。不需要，咱们前端就是刚才提到的， 为什么说现在给大家展示实时最简单的呀，其实我们前段最喜欢实现的就是这样，为什么我没有任何处理， 我就是获取数据渲染，其说白了就像我们平时盖的请求一样的，拿到服务端返回的数据，我去渲染，你给我什么展示什么，你给我多少贴，我渲染多少条，我也压根不知，不需要知道这个数据里面具体的内容。 同样刚才给大家提到的 vip， ok 的呢，展示也是一样的，直接接收我们进行渲染就可以了，但如果啊，我们还需要去向服务端发送数据的话，那这块的 处理呢，就会变得不太一样。所以接下来呢，我想再给大家呢，通过另外一个实力呀，让我们对于 websok 的呢继续的深入。好，我们来聊一聊聊天室， 他如果通过 vip 所给的去实现的话，咱们又怎么做呢？就像你们现在在公屏里面哎，留言很多小伙伴问到了问题，对不对 啊？好，再就是刚才 w 五 dy 同学说九个不需要， vip 说给的只有一个，哎，对，只有一个链接，他是创建一个链接之后， 那如果说我们拿到的数据，你可以通过类别或者说返回的数据我们来进行判断，而不需要去像你刚提到的要创建九个啊，这个是不需要的，我们只需要一个，你看，包括刚才我跟大家写到的是我们的这个，哎，就是 图表数据吗？对不对？好，我现在在我们的聊天室里面，我仍然用到的还是这个链接啊，还是一个，明白没？哎，刚才，哎。 w 五 d y 同学提到的，嗯， 好。再就是淡定，图说后端的数据一定要是变化，咱们才能动态吗？是的是的啊，那肯定，因为你要不推送消息的话，我们前段是不会变的，他的这个数据变化是因为什么而变的？其实这个地方并不是说我在里面添加了，比如定时器啊或什么， 他是只要服务端的数据来了。好，你看我们来简单分析分析他的原理啊，那我现在是不是已经创建了？创建完了以后，你一旦接受到消息，哎，我们这个手机接收到服务端推送过来的消息， 只要有消息，我的 oppo 醒呢，咱们的这个对象就变了，只要变了，我就会重新的去设置。所以为什么在里 我们要把这个三个 oppo 型呢？把它导入进来，因为你不导入进来，那也就是说我们的 oppo 型对象的数据变了，但是它不会重新渲染，它的作用就是为了让你重新的去渲染我们的这个图表数据，所以你就可以看到只要服务端推过来数据，我们的图表就可以实施， 那同样的道理啊，如果说服务端推送，哎，这个每一秒，或者说哎零点几秒就跟我们推一次，那我这块展示的肯定就特别快。那如果说一分钟，五分钟他推一次，那我们的这个数据呢，也会根据服务端你设定的这个时效或时间来去展示的， 包括你要是不固定啊，比如我们要去实时监听或者监控某些数据没有变化，那几个小时没变，我们就一直不变，对不对？所以他的这个数据呢，是服务端只要退 推送，我就会变化，我就会去接收，没有任何改变，那咱们就不会做任何的处理。好，行，刚才像哎那个淡定图也提到的我这样回复呢，不知道是否能够那个明白了解没？哎，刚才有几位小伙伴提到的问题啊，如果说了解了呢， 咱们可以来波六六六或来波一啊，让我能看到你们都明白了。好，行啊，那既然刚才提到这个 实时的数据展示呢写法我们已经了解了，是不是觉得还挺简单的，没有我们想的那么复杂？好，那接下来我们就来看一下聊天室呢，咱们又怎么做？还是继续给大家通过 websoke 的我们来想，哎，我们来看一下他的写法。