websocket遇到的问题及解决方法
粉丝5402获赞4.3万
相关视频
02:03查看AI文稿AI文稿hello， 今天呃给大家呃讲一下上次上个视频留下的问题啊， 就是说在正常的情况下，这连接到同一个节点的后端是可以进行通讯的，然后如果说连接到不同的节点的话，他是如何通讯的呢？我先给大家演示一下，比如说我现在这个是在八零八三那个节点，对吧？ 然后这边上是在八零八二这个节点，我们看一下啊，比如说我们是用 a， 这是 b 将连接，哦，这是 b， 这是 a， 对吧？然后如果说新的发动消息呢？我们可以看到，哎，这边他其实是已经接收到消息了， 然后这是怎么做到的呢？嗯，这个解决办法的话，就是通过 release 的一个消息订阅已发布，就是说我们的客户端把消息 发送到 release 里面，然后用服务端去监听这个 release， 他这个频道就是相当于是订阅，然后当客户端发送消息的时候，我们服务端有收到消息，然后就去呃。不同的就是如果说在多个节点的情况下的话，就是 呃他们就会都同时收到消息，然后去寻找消息的接收者，然后把消息分发给相对应的一个接收人即可。然后这块的话是一个描述啊，然后这是一个架构，然后这里的话就是他的一个使用场景啊，比如说你看聊天室 还有一个公告牌服务键的机油，就是可以用这个发布小写发布语音的模式，嗯，用图感觉看起来比较更加的清晰。然后代码里面的话就是说我们所做的话，就是说比如我们在 呃接到客户单发送的消息之后，我们把消息发送到呃 release， 这个相对于哪个图发布出去就行了。然后，然后的话我们再对这个呃消息的话我们做一个监听， 然后接听到消息的时候，我们就是把消息推送啊，通过推送的话，我们推送到相对应的一个用户的节点上就可以了。
45程序员小小菜鸡
07:17查看AI文稿AI文稿其实我们在实际的开发当中呢，我们不太会去使用这个原声的 a p i， 其实原声 a p i 里面呢，功能是绝对齐全的，大家可以去看这个 m d n 的文档，这里边有完整的就是它里边的用法啊，一些属性啊，方法其实也不多啊，也不多，但它功能肯定是齐全的，但为什么我们平时不太呃喜欢使用这个原声的 a p i 呢？ 原声的接口呢，虽然简单，但是呢在实际应用中啊，会造成很多的麻烦。什么麻烦呢？比方说哈，我们现在考虑一个聊天场景这个页面呢，他有聊天，有实时聊天，同时呢也有开线， 于是呢，可能我们服务器啊，当然客户端那边也可能不断的发送消息给服务器，服务器呢，那边呢，也可能有不同，不停的有新消息过来，那么他的消息呢，比方说发了这么一些内容，你看一下，你能看懂他啥意思吗？这些内容全部全部在哪里接收，所以全部在 unic 里边接收，对吧？这里所有的消息都在这里统一接收，那这个接收消息到底是什么消息，你分不 清楚啊？那么这个数据就会造成这样的一个问题，连接双方可以在任何时候任发送任何的数据类型数据，另一方呢，必须要清楚这个数据到底是什么东西，对吧？那么福气可能可能给我发的是聊天啊，聊天的时候有哪些，聊天室里面有哪些人，对吧？然后呢，也有可能发的是一一个用户的发布的一个新的聊天内容， 也有可能呢发布的是呃，那个 k 线的最新价格，也有可能呢，有人离开了那个聊天室，那么他会把个聊天室里面的人重新更新，更新之后呢，再重新发给我们，就你分不清楚， 那么回忆一下啊，像如果说我们以前学的 atp， 那么 atp 是如何来解决这个问题的？ atp 解决，解决这个问题的话是不是非常简单？怎么解决？是通过 pass 解决，你请求不同的路径，那么就表示你要不同的东西，对吧？这里是登录把，这里是获得新闻列表，通过路径来进行区分，但是很严 遗憾的是脱离了 attp 协议了，现在他没有路径了。哪有路径？他这个东西你看一下我们这里，那村口这里哪有什么路径啊？一旦握手完成之后就是全是这种消息了，哪有什么路径呢？什么头啊？那些东西全部没了啊，只有握手阶段在用 attp 协议的时候才有一个头，握手完成之后的消息再也没有什么头啊。题啊，这些东西都没有了， 那我如何来区分呢？朋友们可以想想办法啊。其实这个办法呢还是挺好想的，最简单的办法就是使用一些第三方库来帮我们解决这个问题。这个第三方库是什么呢？ socket i o 啊，这是一个非常有名的微博收费者的第三方库，他是这样处理的啊，把不同的消息呢放到不同的事件里边。他这个事件呢，有哪些事件你需要自行约定？服务器跟客户端之间需要自行约定，他通过监听和触发事件来实现对不同消息的处理。什么意思？我现在下面一张图啊，比方说客户端这边他监听了三个事件， 那么我们这里比方说客户端和服务器之间约定了，我们一共有三个时间，一个是成员更新，就聊天室里边有哪些人啊？然后呢？是监听聊天消息，有没有新的聊天消息过来，然后呢监听最新的价格，贴心的最新价格，约定了有这么三个时间，客户端这边负责什么？负责监听 好服务器那边呢？就负责触发事件。触发事件什么意思？就是发送消息的时候呢？顺带我告诉你这个消息是哪个事件的， 那么比方说这个消息他就告诉你，哎，看这个颜色啊，我就告诉你这是一个成员共情世界，于是这个消息发到客户端那边，客户端那边就会触发这个事件的处理。客户端那边他写的代码呢？尾代码啊，可能是这个样子，也说服务器在触发时间，客户端在监听时间啊，服务器触发事件本质上就是发一个消息过来，附带一个事件类型， 那么他就会触发到这个事件，这个事件就会运行这个函数，对吧？然后第二次发了一个，你好，这是一个聊天消息事件，他就会触发这个函数。而第三次呢， 发了一个最新价格，他就会触发这个。第四次呢，发送那个又是一个成员更新，他又会触发成员更新这个，这个函数啊，他是这么一种逻辑，那是不是所有的事件都是客户端监听服务器触发呢？不是的，完全有可能，非常非常有可能服客户端那边也会发消息给服务器，对吧？那么客户端发消息给服务器，那就是客户端触发事件， 服务器又在监听客户端的时间，对吧？这双方他们地位是一样的，不存在说谁高一点，谁低一点，地位完全是一样的。所以说我们在一个微博 socket 的典型场景里边啊，像这种 socket io 的典型场景里边， 任何一方都有可能既监听事件，监听对方的事件，也会自己触发事件，自己发送消息。监听就是收，触发就是发啊，你理解清楚这个东西就行了。那么这样子做了过后呢，这个模型就比较完善了啊，我们就可以利用这种事件的机制，对不同的消息进行不同的处理，那么这个事件是 首要客户端和服务器双方事先约定好，那么这里呢，我们看看一下我们的聊天室接口，握手完成之后呢，他就靠事件啊，事件，你看这里有这么一些事件，需要在接口文档里边，或者是双方私下把他事件约定好。 sopetio 啊，就就这么一个第三方库，他就是实现这么一个效果，他为了实现这些要求呢，他对消息的格式啊，进行了特殊的处理， 他的格式呢，可能跟大家想象的不是一个普通的对象那么简单啊，他做了一些特殊的处理，那我说这一点是什么意思呢？就是如果说你服务器使用了 sokisio 这个库来进行触发事件发送消息，你客户端那边也必须使用这个库 啊。同样道理，你客户端那边是用 socket i o 来发送消息，服务器也必须使用 socket i o 啊，不能，不能说服务器用这个客户端就用这个，理论上是可以的啊，因为我 socket i o 本质上也就在调用这个，这个 a p i 理论上是可以的，但是这个就很麻烦了，因为 你要理解为手机 io 的他那个消息格式，那个很复杂的消息格式是怎么组成的啊，就有点分析就更麻烦了，所以说要用的话就双方一起使用，使用这个手机的 io 其实是非常简单的啊。这里呢，我先给大家说一下手机的 io 的一些注意的事项。使用的时候呢，我们要自行的约定事件，那么肯定要给事件取名字，但是有一些名字呢，你不能取， 有一些名字他是已经定义好的，叫做 message 啊，让 conte 这种名字有些特殊的名字啊，比方说这个 message 呢，就表示他对应到这个 websoke 里边的这种 message 啊，所以说有些事件名字呢是不能用的， 那我们在取事件的名字的时候呢，我们一般来说会加一个前缀，或者是你这个工程的名字啊，或者是怎么样，那我这里呢，比方说加一个多乱符号，这样子，避免跟那些预先定义好的事件名字发生冲突。把这个地方我给大家说一下。另外个地方大家了解一下， socket io 啊，功能非常强大呃，它不仅支持 服务器，还支持客户端，都支持啊，同时呢，他还对一版本的浏览器进行了兼容处理，就是如果说他发现这个版本，你这个浏览器版本太老了，比方说现在什么 i 浏览器，对吧？像版本太老的浏览器呢，如果说你不支持，我也不 socket， 那怎么办呢？他会转而使用长文询， 整个的那个 a p i 都是一样的，就是你不用改带嘛，他会转而使在内部，转而使用长轮循，他会有判断的啊。 然后手机的 io 还有很多的高级功能可以参与官方文章啊，我们这节课就不愁了，关注都已剪辑号的同学打断一下啊，我是袁老师，总听我讲短视频，这回呢，来听听我讲的大课。 我给大伙呢专门录制了一套大吃课，现在呢，免费送给你们，不管你手上现在看的是什么样的资料，都应该先停下来，先来看一看我这套大吃课。一方面呢，这套课程里边的内容都是前端最核心的 知识，其他的知识都是在这个基础上生长出来的，你先掌握好了这个，再学啥都事半功倍。而且呢，自此以后，你对前端技术的理解不会存在任何的障碍。 另一方面呢，这套课还能够提升你的眼光，让你具备分辨好坏的能力。看过大师课之后啊，有一些不入流的资料，课程 博客论坛你就看不上眼了，这种能分辨好坏的能力，也能够为你将来的学习省下不少的时间。所以呢，还没有领到课程的同学，赶快抓住免费领取的机会，进评论区第一条，加入粉丝群，然后根据提示领取就可以了。
2073渡一前端直播必修课
02:59查看AI文稿AI文稿呃，哈喽，今天给大家分享一下 spring 木头整合我们 websoca， 来，我们简单看一下这个的一个效果，就像我们抖音的一个评论或者回复的右右上角的一个数字，对吧？他是如何通知到我们的一个客户端的呢？接下来的话我给大家去示范一下，比如说我们这里有一个 写好了一个页面，我们通过我们的一个 pose 慢来调整一下，点击我们的一个肾斗，我们这里没有启动，我们启动一下。 好，启动完成，我们刷新一下这个页面，刷新这一下这个页面之后，他会和我们后端保证他的一个连接，对吧？会连接到我们的一个 ysokit， 然后接下来的话我们点击我们的一个胜达 ok， 这就是实现了他的服务端向我们客户端推送数据。像这种的一个简单实现，他是如何实现的呢？接下来我们去看一下，好吧， 就我们后端的话是我们 websoke 的一个一个简单案例，今天的话也是给大家重重分享一下， 其实整合起来的话代码相对还是比较比较简单。接下来的话我们去看一下，首先需要导入我们的一个 popena， 这个导入我们的一个 stoneboot title 这一个依赖。接下来的话需要去创建我们的一个 what socket 的一个配置类，这个配置类的话主要就是去建立链接和推送消息， 这个话我也给大家把，就是稍微写的还是比较详细，这里有我们的一个鉴定连接，会触发当前的这一个方法，然后 关闭的时候同样也会出现触发当前的这个方法啊，这是我们的一个消息监听收到客户端的一个消息，他会调用当前的这个方法，然后写完这一个还要去我们把它给加入我们的一个 spring 容器当中， 然后这是我们提供好的一个发送消息的一个接口，就比如说我们 a p i a m， 这是我们的一个，就是通讯的一个接口推送我们的一个消息，这一个 number 的话，是比如说我们后端呃的一个消息的一个数量，就通过这样的一个方式，我们再给大家演示一下，我们重置一下， 从此之后我们点击发送好，就能实现这样的一个效果。就比如说你后端需要推出去了，你就调一下当前的这一个啊，其实通讯的一个接口，他就会向我们一个推送，对吧？像我们及时通讯这一个符号的话，他是一个到时候 到我们一个线上，他是一台微服务，你的所有的其他的应用服务会调用我们当前的 md 一个服务，就像我们就可以实现消息的一个推送。 ok， 然后觉得有用的兄弟们可以帮忙点点赞，点点关注。然后这一个原码的话，我会放到我们的一个 群公告里面去，有需要的兄弟们可以去拉一下，在我们 mark com， 然后这个下面会写非常多的一些有用的一些干货。好，谢谢大家。
577程序员Mars(创业中)
17:12查看AI文稿AI文稿好嘞，各位观众，那今天的话，我们来学习这个 vibe socket。 好，那在之前的话我们已经学过跟它非常像的一个东西，就是这个 s s e 技术，也是去发起这个长链接的， 只不过呢 s s e 呢，它是属于这个单工通讯的，只能后段呢跟前段呢去实时的发送消息，而前段呢跟后段只能发送一次。 而 y folk 呢，它就不一样了，它是这种全双工通讯的，就是前端呢可以在任何时候呢去给后端呢去推送这个消息， 而后端的话也可以在任何时间呢去给前端去推送这个消息。所以说他是这个全双工通讯的一个网络协议啊，那他的场景是什么呢？就是这个 a p i 呢，一般常用于比如说我们这个聊天，对他 他这个实时性的要求是比较高的，还有这个游戏，或者是我们之前说的这个大屏可视化，对吧？一般的话也要求这个实时，那再比如说这个多人的这个什么文档编辑器，现在也是非常流行啊，这好多人呢可以去编辑同一个 excel， 这种也可以使用 wifi focus 的呢去给它进行这个实现，再或者呢去监听一些数据，呃，发送一些通知呢，都可以使用这个 wifi focus。 好，那今天我们来带大家呢去做一个简单的例子，就我们就做一个简易的聊天，去认识一下这个 y folk 的以及它的用法。 然后呢我们还会做一个这个心跳检测，也是面试中经常去问的一个问题。好，那废话不多说，我们直接开始啊。好嘞，各位，那么这个后的呢，还是使用这个 note g s 呢去编写，那么现在呢，需要安装两 两个库啊，第一个就是通过 p n p m 或者是 n p m miss 到去安装一下 w s 这个库啊，然后安装完成之后呢，你需要安装一下它生命文件， 也就是 it types 杠 ws 杠大 d， 就给他安装一下这个生命文件就可以了，他就会有这个代码提示了。哦，那安装完成之后呢，我们就可以去使用了哦，这是第一步 就是安装这个 w s 安装完成之后呢，我们就通过 input w s from 把这个库呢去给它引进来，引进来之后呢去创建一个服务，通过 w s 点 server 去创建一个服务就可以了，我们就 const w s s 就等于一个你有一个 w s 点 sover 去创建一个服务啊，哦，那这个话就是一个创建 socket 服务，并且端口号是这个八零八零。 好，然后这话监听一个回调函数啊，咱们打印一个日志的，就创建成功的话，然后这的话我们给他输出一个日志。好，输出完成之后呢，我们还需要监听一下这个前段有没有连接到这个 note 服务端。 好，这的话我们需要写一下监听 q 端的一个连接，通过 w s 点 on connection， 对，通过这个方法就可以去监听前端连接我们这个副端啊。 好，然后里边这些我们先都先不要啊，对，都不要。好，这的话我们叫 socket， 然后先 log 一下。啊。 对，客户端连接成功。哦，那现在的话已经基本的一个 w s 后端的话已经是实现了，然后我们先启动一下，通过 t s 刚漏的刚 e s m， 然后叫 ws 点 ts， 这我是新建的一个文件啊，到时候大家要资料的话，我会一一块去发给大家的。好，先启动下这个服务。好，那这个后单服务呢？已经是启动完成了，然后我们来编写一下这个前端啊， 那钱的话也是使用什么呢？使用这个 h 五提供的一个 web socket， 我们叫 conft w s， 就等于你有一个 web socket。 对，然后呢，它是一个后端的一个地址，注意啊，它们的协议呢？ of socket 协议，它是 w s 或者是什么 w s s， 对，就跟什么，就跟这个 h t d p 跟这个 h t t p s 是一样的，就是多一个 s 呢，就是有这个加密证书， 如果少一个 s 呢，就是我们这个普通的一个服的一个发起，那么现在呢，是没有这个证书的，所以说他的协议呢，就是一个 ws。 对，如果有这个证书呢，他就是 w s s 啊，然后前端的话也可以去监听有没有连接成功啊？通过 w s 点爱的疑问，他 listener， 然后去监听下什么？监听一下 open 这个方法。好，我们先把这个删掉。啊， 对，通过 open 方法监听呢，是否连接成功？如果连接成功呢，会打印一个日志啊，这的话我们来 log 一下。对，连接成功。好，其实前面的话也是非常简单。好，我们来看一下这个网页啊， 好，我们来刷新一下。哎，我们可以看到这呢，已经是打印出 来这个连接成功了，说明我们这个 socket 呢是没有问题。好，然后我们去实现一下这个发送消息，以及这个接收消息他是怎么去做的。这的话我们可以简单来一个 demo， 就写一个简易的聊天吧， 然后来个 input 和来个按钮去发送这个消息，然后这样的话来个 u l， 然后发送消息去回显到这个 u l 里边。好，我们先回一下这个元素啊，比如说 light input， 先获取下这个 input， 还有 light 鼻添这个按钮获取一下。好，然后给这个按钮呢，去加一个点击事件 i 的英文的 listener， 点击一个 click， 然后通过 w s 返回的这个实力呢？然后调用 shine 的方法就可以去发送消息了。 发送消息呢，使用这个 send 方法就可以了，前后端都是一样的，后端也是使用 send 的去发送这个消息，这儿的话我们加一个判断啊， 如果有值，对，如果有值的话，我们再再给它发送啊。好，那发送完成之后，后端怎么去接收呢？后端接受法，通过这个 socket 点 on， 也是通过 message 去监听这个前端发过来这个消息啊， 然后我们来 log 一下， log 一下现在返回的疑问题呢，它是一个 buffer， 我们需要给它涂 string 转成字串儿啊。 好，我是服务端，然后这个这个我们先不要了，咱们先 log 一下前端发过来东西吧。好，来重写这个服务端。 好，然后前端我们来发送一下消息试试啊。好，刷新一下啊，我们来个一二三吧，点击发送好，来看一下后端。哎，后端的话，你看已经收到我们这个一二三的也是没有问题， 但是后端收到这个一二三呢，需要再传给我们前段再回弦给我们前端呢，我们就可以把它显示到这个页面上了。哦，这的话我们来给他接收一下，通过这个 socket 点 send， 对，我是服务端，然后发送给客户端，把这个消息再给它拼接回去。 哎，好，这样的话我们就实现了这个回线啊，再重启一下。好，然后前端怎么去接收这个消息呢？前端的话注意要通过 w s 点 at， 因为它 list 呢，也是通过 message 去接收啊。对，前后端呢都是一样的，这儿的话我们就去获取一下这个 u l， 去给它放到这里边儿吧，叫 id， 叫 list 吧。好，我们先获取下这个 list 啊， light list， 获取这个元素啊，然后这儿的话我们来给它创建一个 l i light l i 就等于 correct ailment， 然后把这个后端回传过来的数据呢，填充到 inner tax c 边儿， 就是从这个 data 里面去取值，然后再通过 list 点儿 open the child， 对，再给它填塞回去就可以了。好，我们来试一下， 比如说我发送一个小满，好，点击发送，哎，我们可以看到，是吧？副端呢 就回旋过来了，然后我们把消息呢已经是给它拼接上的，放到这个 list 里边了，然后发送完之后呢，我们这个值呢，需要给它去清空一下啊， 这个 value 等于这个空。好，我们再试一下，比如说你好点击发送，哎，也是没有问题，但是现在的话，我们是这个 a 用户啊，比如说现在还有一个 b 用户。对，我们再开一个这个窗口， 好，我们把它拖成这样。对，现在是两个用户，一个是 a 用户的，一个是 b 用户，比如说我是 b 用户， 点击发送，哎，我们可以看到 b 用户呢？他只能收到他自己的消息，对吧？ a 用户呢，也是一样的，我是 a 用户。对，我们可以看到， a 用户呢，他也是只能收到他自己消息， b 用户呢，他也是只能收到他自己消息，而不是像一个广播一样，就是 b 用户发送的消息让 a 用户也收到， a 用户发送的消息让 b 用户呢也收到。 就是后端的话我们需要改一下，我们现在只是点对点的方式，就是自己跟自己玩，不是这种广播的形式。那要变成这个广播的形式呢？需要这个服务端呢？去给他处理一下，就是变成这个 就是广播的方式，对广播的方式去进行这个推送啊。广播的方式怎么去推送呢？就是现在呢有几个人连接到我们这个 socket， 它是有一个统计的，在这个 w s s 实力里边有个 cleaned。 对， cleans， 这个 cleans 呢，它是一个 set 结构，它是一个 set 结构，就是比如说 a b 现在有两个用户去连接了我们这个 socket， 这个 clint 四呢，它就是 a b 两个用户的实力，所以说我们就可以通过 for each 去给它编例一下，就可以实现这个群发了。 好，我们就不用这个单发了，对，这个的话我们就不要了。好，那这样的话就可以实现这个群发啊，广播消息，把这个 cleanse 给它变令一下就可以了。好，重启下这个副端啊。 好，我们来刷新一下这两个页面啊。好，我们先往这边先写一下，我是 a 用户， 对吧？点击发送。哎，我们可以看到是不是在 b 网页呢？他也可以收到了，是吧？我是 b 用户，那这样的话其实就实现了一个简单的群聊，对，他们都可以去收到这个互相的一个消息，对吧？就可以实 这个群聊，其实也是非常的简单哦。然后接下来的话我们再讲一下这个心跳检测，就是为什么要有心跳检测这么一个功能呢？因为啊，我们这个 socket， 对，就是这个 socket 长时间， 对不使用，或者是什么网络波动，对，入网模式，对，他是会自动断开的。所以说我们要使用这个心跳检测呢，去给他进行这个保活的一个机制啊， 对，去给他进行一个保活，对，保持连接，就是不想让他去这个断开呀。其实这个心跳检测呢，你可以去完全的自定义，对，他是没有任何规则，就是你可以 去自定义这个心跳检测去怎么实现，那这的话一般的话会使用这个计时器啊。哦，这的话我们比如简单实现一下吧，比如说 light 这个 heart in tour， 我们先默认呢是一个 now 哦，然后我们再写个方法，比如说叫 heart check， 可以，然后在这个方法里边呢，我们需要先给它进行一个判断啊， 首先这个 w 是这个 socket 点 red state， 对，等于等于这个 open 的时候，注意啊，一定要等于这个 open 的时候呢，我们才会去给这个前段呢去发送这个心跳。 好，如果对，如果不是 open， 那我们就把这个计时器呢去给它清掉啊。 好，然后这的话我们来一个计时器啊，计时器的话我们就来一个 set inter， 然后把这个方法去给他传进去，可以了，然后这个时间呢，一般是五秒钟往前端去发送一个心跳包啊， 好，那发送内容呢？完全是自定义的，对，都是自定义的，这的话我们就简单定个每一句啊，比如说 consta state， 它的值就是一。好，然后 message， 它的值就是二。 message 是什么？正常的消息？如果是这个 heart， 它就是一，就代表是心跳包，我们就不去做任何处理，这儿的话 还需要给它加工一下啊。往前呢的话我们就发送一个节省点 string fight， 这个格式完全是自定义的。对，你可以模仿我，你也可以不模仿我，然后加一个 type， 然后来个 message， 对，随便写个对，写个心跳检测。哦，那么这个正常消息呢，也需要改一下，这儿的话我们就也变成一个接生点 string five， 好，这是太平的话，就用这个 message 了。对，然后正常的 message 消息呢，就是我们刚才发送的那个数据啊。哦，这样的话其实就可以实现一个简易的这个心跳检测啊， 这没有给他进行这个复值。好，那这样的话就可以把这个值呢去给他清掉。好，然后后端的话我们再重启一下，然后前端的话我们需要改一下啊， 我们先来看一下吧，现在应该就乱掉了。 对，好，我们可以收到，对吧？服端的话每五秒钟给我们去发一个心跳，这个心跳的话我们就前端就不显示了，所以说前端呢，还是要再处理一下，这的话我们就需要通过这个判断一下啊， 就 light data 就等于节省点 pass， 得把它转成一个节省对象，然后 if 一下， 如果 data 到 type， 这个等于等于二。对，我们再给它去进行这个处理啊， 就直接是怼他就可以了。 对，如果是一的话，我们前端就不做任何处理，因为他只是去检测一下有有没有这个保护啊，有没有这个断开。好，我们给他格式换一下啊。好，我们再刷新一下。 对，现在的话就不会收到这个任何的心跳消息了。对，我们正常发的消息呢，也不会影响。比如说我是 a 发送，哦，是这个 data message。 对，我们取下这个 message。 好，重新来一下，我是 a， 对发送，对，没有问题，然后我是 b 对发送，哎，也是没有问题。然后我们可以去给他再加一个这个断开呀，断开的话他就不会往前端呢去发送这个心跳包了。对，因 已经离线了吧，这时候再加个按钮啊，比如说 stop 获全这个元素啊。 对，通过调用 close 呢，可以主动断开啊，调用 close 方法主动断开 socket。 好，那这儿的话我们就先不做任何处理啊，我们还是接这个 either data 好，现在的话我们要把它变回去了，现在的话还接受这个心跳检测。好，比如说我们这个 a 用户要给他断开了，好，断开， 那此时 a 的话，他就不会再接受这个心跳了。哎，我们可以看到，因为已经断开了，就没有必要发送这个心跳了。此时后端呢，也就能知道了， a 用户此时离线了，是吧？比如说你想做什么离线要提醒啊，还是怎么怎么的？都可以， 你看 b 用户的话，他是一直没有离线，所以说他还是一直能够这个收到这个心跳包的，就如果 b 也离线了，对，他就收不到了。 对，我们可以看到他已经没有任何反应了。那以上的话就是本兆所有的知识啊。
821小满zs
00:25查看AI文稿AI文稿哈喽，大家好。外部收费的是 html 提供的一种新的协议，他实现了浏览器与服务器之间的全双通通性 在之前都是客户端主动发群众给服务端，很多时候实现消息更新都是使用阿加克斯轮巡，但是这样会有延迟，有了 wifi so k 的双方都能够主动发消息给对方，实现真正的推送。好的，谢谢大家。
180前端潘哥
10:23查看AI文稿AI文稿大家好，欢迎回来。之前我解释了 web socket 的基础知识，以及他们如何实现浏览器和服务器之间的实时双向通信。但你们中的许多人想要更多， 因此今天我们将更深入的探讨高级 websack 功能，以及如何使用他们构建强大的实时应用程序。我们首先回顾一下 websack 握手，这是客户端和服务器协商从 http 升级到 websack 连接的关键步骤。 然后我们将详细分解握手过程，探索交换的标头以及双方涉及的步骤。那么让我们深入了解并开始吧。 之前在我的 web circuit 介绍视频中，我们了解到 http 对单独的请求使用不同的连接，它增加了服务器的负载，因为服务器必须为每个请 求创建新的握手，一旦请求完成，连接就会关闭。另一方面，只要不被任何一方中断， websack 连接就是持久的。 websack 协议是一个独立的基于 tcp 的协议， 它与 h t t p 的唯一关系是 h t t p。 服务器将其握手解释为升级请求。 web circuit 握手过程是客户端和服务器之间建立实时通信通道的关键步骤，它利用熟悉的 h t t p 协议进行初始连接，然后协商升级到 web circuit 协议。 以下是所涉及的客户端和服务器步骤的详细分解。客户端打开到服务器的常规 h t t p 连接在 u r r 中指定所需的 websect 端点，通常以 w s 或 w s s 为安全连接前缀。它发送带有特定标头的 h ttp 概请求，已表明升级到 websitek 的意图。现在客户端标头如下所示，其中升级 websitek 标头告诉服务器，客户端想要升级到 websitek 的连接 连接。升级标头通知服务器，客户端希望从当前连接协议进行升级 s c c web circuit。 你要是包含随机生成的本次握手特有的 base 六四编码字符串的标头， 服务器稍后将使用他来验证握手。然后还有一些额外的标头，具体取决于服务器实现和所需的功能。 其他标头，例如指定 websacke 协议版本的 sec websacke version， 或请求可能包含的特定子协议的 set websacke 协议。然后客户端等待服务器对 http 升级请求的响应。 另一方面，当服务器收到客户端的 http 概请求时，他会检查请求标头，以确保他们对于 websacket 握手有效，并发送状态码为一百零一。切换协议的 http 响应表示成功升级到 websacket 服务器的握手看起来像这样。 让我们详细介绍一下这些步骤。服务器首先验证升级 websacket 和连接升级标头是否存在。现在，服务器处理和生成 s c c websacket accept 标头的主要目标是向客户端证明服务器将其识别为有效的 websacket。 握手启动并愿意继续。 服务器可以确认握手请求源自真正的 wive 客户端，而不是试图冒充 web circuit 连接的恶意行为者。服务器从 sc c websack key 标头接收 base 六四编码的字符串，然后服务器通过将接收到的 sec websack key 与预定义的 uid 连接起来生成一个新字符串，例如这个。 然后应用加密哈西函数，例如十一，然后对这个新字符串进行贝斯六四编码， 服务器发送状态码为一百零一切换协议的 http 响应表示升级到 websack 成功。响应包含以下标头， 升级 web circuit 标头回显来自客户端连接升级的升级请求，确认从 h t t p 升级到 web circuit 并接受 web circuit 接受，这是之前生成的 base 六四编码字符串，这验证客户端是否发起了握手。 一旦客户端收到带有正确 s e c web circuit set 标头的服 器响应，他就会验证该响应。确认握手成功，客户端和服务器现在可以开始通过已建立的 t c p 连接使用 web socket 协议交换数据。 h t t p 连接本质上被 web socket 连接取代。 现在，如果 scc web circuit 接受值与预期值不匹配，或者标头自断丢失，或者 h t t p 状态代码不是一百零一，则将不会建立连接，也不会发送 web circuit。 如果服务器返回一百零一以外的任何代码，客户端必须结束连接。 what's that 给握手 通过包含随机密，要 sec web circuit key 来确保安全且经过身份验证的连接。该随机密要由客户端生成，并由服务器通过 sec web circuit septeter 进行验证。此握手过程为客户端和服务器之间 的实时双向通信铺平了道路。而无需持续的 http 请求和响应 正如我之前所说，它可以是 ws， 也可以是 wss。 就像 http 协议一样，端口组件是可选的，因为默认端口八十用于 ws， 四百四十三用于 wss， w s s 用作安全 uri， 因为设置了安全标志，并且在服务器和客户端之间完成 t l s 握手，已实现安全通信。 在 web circuit 协议中，数据是使用真序列来传输的。 web circuit 中的真实客户端和服务器之间交换数据的基本单位，并且每个框架都有特定的结构。 fin 或 fin 只是该真实在最终片段还是更大的。消 中之意表示这是最终片段，而零表示还有更多片段。稍后将详细介绍片段。 rsv 一， rsv 二， rsv 三。这三张床位为预留床位， 他们通常设置为零，目前保留用于未来用力或 websack 协议的潜在扩展操作码自断定义针携带的数据类型。它可以是 utf 八遍码格式的文本数据或二、禁止数据或用于保持活动事件的聘真。 眼码位置是有效负载数据。是否被眼码屏蔽始终应用于从客户端发送到服务器的真，我们很快就会仔细研究。屏蔽有效负载长度，定义了有效负载数据的长度。长度自断本身可以根据有效负载的大小在零到一 百二十五之间变化。屏蔽密，要用于隐藏有效负载数据长度可变的有效负载数据。具有消息的实际内容，例如文本或二、禁止数据。 现在回到屏蔽。屏蔽在 web socket 中的主要目标是确保实时数据通过各种网络基础设施顺利传输，而这些网络基础设施在设计时不一定考虑到 web socket。 在 websack 标准化之前，一些网络基础设施组建，特别是那些纯粹为 http 流量设计的组建，试图在缓存方面变得智能。 这些缓存代理有时会存储来自服务器的响应，希望他们稍后可以对类似的 http 请求重用相同的响应。但是， websack 连接不遵循传统的 http 请求响应模式。未屏蔽的 websack 数据 可能会被错误的解释为 h t t p。 内容并可能被存储，这可能会导致稍后发出真正的 h t t p。 请求时出现问题。屏蔽以某种方式模糊了 web socket 针内的数据，使其变得不可预测，并且不太可能类似于有效的 h t t p。 请求或响应。 这会阻止代理和其他中介尝试缓存或修改数据，因为他显然不适合 h t t p。 模型。屏蔽基本上是 webstack 流量看起来与 h t t p 明显不同，从而阻止错误的解释或操作。 另一方面，在 webstack 中，分段是指将大消息分割成更小的快，以便通过网络传输的过程。此技术对于处理可能压垮连接或超出客户端或服务器上的缓冲区限制的非常大的消息特别有用，这是为了防止缓冲区溢出。 想象一下，用户通过 websacket 连接上传一个大文件，如果没有碎片，整个文件将作为单个消息发送，这可能会导致客户端或服务器上的缓冲区溢出，从而导致连接错误或性能问题。碎片允许逐步传送大消息， 接收器可以开始处理初始片段，而其余片段仍在传输中。这对于立即显示部分数据很有价值的应用程序来说是有益的。例如，在长时间运行的过程中接收更新。 现在，当消息被分割成片段时，除了序列中的最后一针之外，每个片段的 fin 位都设置为零。 fin 位只是当前针是否是消息中的最后一针，或者是否应该跟随更多针。如果 fin 位设置为零，则意味着有更多针到来。 接收方应在处理消息之前继续等待更多阵。当发送消息的最后一个片段时，发送时份未设置为一，这向接收者发出信号，表明这是消息中的最后一阵。现在，网络套接字是一种多功能的通信技术，并在各个领域都有应用， 例如在聊天应用程序中快速有效的发送和接收消息。事实上，我之前在 whatsap 系统设计视频中已经介绍过这一点。他还可以实现网络应用程序中的实时通信，例如网页上的更改和更新。 在游戏行业，他可以促进无缝的多人游戏体验，或者想象一个实时绘图应用程序，多个用户可以在画布上进行协作。或者也许在证券交易所了解股票价格的 实时更新。这些高级 website 概念可能看起来很复杂，但他们所释放的可能性值得付出努力。请记住，分解事物试验并理解每个功能背后的原因将导致真正的 社区的发展。
57程序猿DD
