websocket如何发布

呃，哈喽，今天给大家分享一下 spring 木头整合我们 websoca， 来，我们简单看一下这个的一个效果，就像我们抖音的一个评论或者回复的右右上角的一个数字，对吧？他是如何通知到我们的一个客户端的呢？接下来的话我给大家去示范一下，比如说我们这里有一个 写好了一个页面，我们通过我们的一个 pose 慢来调整一下，点击我们的一个肾斗，我们这里没有启动，我们启动一下。 好，启动完成，我们刷新一下这个页面，刷新这一下这个页面之后，他会和我们后端保证他的一个连接，对吧？会连接到我们的一个 ysokit， 然后接下来的话我们点击我们的一个胜达 ok， 这就是实现了他的服务端向我们客户端推送数据。像这种的一个简单实现，他是如何实现的呢？接下来我们去看一下，好吧， 就我们后端的话是我们 websoke 的一个一个简单案例，今天的话也是给大家重重分享一下， 其实整合起来的话代码相对还是比较比较简单。接下来的话我们去看一下，首先需要导入我们的一个 popena， 这个导入我们的一个 stoneboot title 这一个依赖。接下来的话需要去创建我们的一个 what socket 的一个配置类，这个配置类的话主要就是去建立链接和推送消息， 这个话我也给大家把，就是稍微写的还是比较详细，这里有我们的一个鉴定连接，会触发当前的这一个方法，然后 关闭的时候同样也会出现触发当前的这个方法啊，这是我们的一个消息监听收到客户端的一个消息，他会调用当前的这个方法，然后写完这一个还要去我们把它给加入我们的一个 spring 容器当中， 然后这是我们提供好的一个发送消息的一个接口，就比如说我们 a p i a m， 这是我们的一个，就是通讯的一个接口推送我们的一个消息，这一个 number 的话，是比如说我们后端呃的一个消息的一个数量，就通过这样的一个方式，我们再给大家演示一下，我们重置一下， 从此之后我们点击发送好，就能实现这样的一个效果。就比如说你后端需要推出去了，你就调一下当前的这一个啊，其实通讯的一个接口，他就会向我们一个推送，对吧？像我们及时通讯这一个符号的话，他是一个到时候 到我们一个线上，他是一台微服务，你的所有的其他的应用服务会调用我们当前的 md 一个服务，就像我们就可以实现消息的一个推送。 ok， 然后觉得有用的兄弟们可以帮忙点点赞，点点关注。然后这一个原码的话，我会放到我们的一个 群公告里面去，有需要的兄弟们可以去拉一下，在我们 mark com， 然后这个下面会写非常多的一些有用的一些干货。好，谢谢大家。

在刚才给大家聊到 web socket 的实时数据渲染展示的时候，我们的数据呢，已经可以动起来了，但是呢，这个位置我们采用的是 web socket 的那个处理。我刚才在跟大家聊到 web socket 的时候，我提到了一个问题啊，我说啊，那个如果大家对于我们 传统的哎，就说白了已经过时的轮寻的方式，要是希望了解一下的话呢，我也可以跟大家写一写。那我现在就要问大一个问题了，轮寻的方式，如果你觉得有必要，我在直播间跟大家写一下的话，你们就来一波六六六，你觉得没有必要写的， 哎，这个地方呢，咱们就直接回复七七七，我们来跟他聊一聊，哎，聊天室啊，又应该怎么样去写？对，你觉得有必要那个写的就回六六六，没有必要写的你就回七七七，嗯，有必要吗？好，这个就取决于你们了啊。啊，一半一半，我看到大家回复 一半一半，对不对？嗯，好，回复六六六的也有回复七七七的呢，也有一半一半啊。好，那既然有一些小伙伴的回复了六六六呢，我就快速简单的跟大家说一下，那这个地方我就不去进行 具体请求了啊，因为这个时候我们要连接另外一个吗？好，刚才给大家写的这块，我就先把它呢注释了，我快速的说一下，如果有些小伙伴，你明明知道我们刚提到的这种啊，就是那个应该叫什么长链接，但是呢，你现有的项目中， 服务端他不支持对不对？这种情况太常见了，老项目他不支持，或者还甚至于用到，比如 giccorry， 那这个时候咱们怎么做呢？或者有些小伙伴呢，还有这样一些相对来说比较奇葩的需求，我当前项目我的老大说，你只要把这个功能能够展示给用 用户就行，我们先不管理那个别的存前端，先玩一玩，对不对？是不这样的呢，也挺多的啊，好，那我就跟大家说一个啊，咱们如果说通过轮寻啊，咱们自己来模拟一些数据的那个处理方式是什么样的？好， 大家说到这块呢，由于我们啊，像刚才不是有很多小伙伴说没有服务端吗？那这个时候你就可以自己模拟数据呢，测试一下，这个就比较简单了啊，我来跟大家写一写。 好，首先我们在里面呢，先跟大家把刚才看到的这个数据呢，来，在里面给大家指定出来。好，你当前看你需要有多少啊？来，我，我在里面就写个几条，写个三四条应该那个差不多。好，为了一会让大家看的更清晰，我这样写啊， 一百三百，来，我们这样测试的话，数据就比较那个，我就写一三五七，我这样写啊，好， ok， 这个的话呢，咱们来一个啊，八二六， 好，这个写一个啊四，哎，我这样反过来好，其他的数据我就不改了，只要前面两个有波动啊，后面的数据呢，咱自然看到，也就是数据呢，是我们自己本地写的，那很明显轮循吗？这个时候你首先要考虑到的是什么？咱们的定时器对不对？好，我想一想，你看当前这块咱们应该怎么样写， 你在里面就应该添加一个，哎，咱们的这个 set antwer 对不对？你看我一写完它立马出来了，第一个呢是我们的回调函数，第二个呢是具体的时间， 时间呢，我给大家定一个两秒，他就不像我们刚才写到的外部 socket， 那别人也不知道什么时候，对不对？他是属于一个有数据就推，这个时间是不会固定的，当然我们可以设定他的频次。 好，那么现阶段几秒钟啊？我接着要在里面进行的处理是什么呢？好，我接着在里面呢，是不是就要开始写入啊？具体要干什么好，这个位置呢，为了让大 看的更加清晰，我决定啊，咱们单独到外面来给大家写，获取我们具体的这个数据信息，是吧？添加一个定时器。好， ok， 来，我在里面呢跟大家把这个呢也简单的去那个写一写啊。好，我们想一想，你看当前这块应该怎么样写 啊？按我们刚才写到的，第一个呢是要把这个数据呢进行处理好，你看这块都不变。第二个呢，你在里面还要去进行啊，咱们的这个就是具体的渲染，所以说这块其实他都是不会发生变化的，对不对？关键关键的点在于什么？ 咱们的这个数据，哎，我们在里面呢相当于你要处理的数据呢？是，哎，咱自己做，如果这个地方是服务端，那就跟我们刚一样吗？发生请求，让服务端把这个数据给你就行，所以这一块大家记住了啊，实际你要做到的是发送请求， 拿到数据，间隔几秒处理相关数据。好，那如果说我们自己来做啊，我们这个地方其实可以采用另外一种方式吗？就是在里面呢获取一个随机的值，完了以后，哎，每一次获取这个随机值来进行处理，是不是？好，我想一下，你看他应该怎么样写 啊？我们在里面首先是通过我们的这个数组，那么如果你要获取这个具体的随机值，就从我们的数组里面去获取随机，比如数组里面，我这个是要拿到的是零一二三，对不对？我们当前的随机值应该是什么？ 零到三啊？有可能这个时候是零，一会一啊，一会二三，然后用零，哎呦，反正随机取，取到哪一个算哪一个，对不对？那么给大家提到这个随机值啊，我们应该想到的是什么？哎， master randon 对不对？ r a n d o m a， 通过它，它呢？啊？ 是随机数据零一，但是不包含零一，比如零点零零零一，零点九九九九，哎，我们是可以通过他的，那么这个地方的话，我们为了确保呢数据不会超过我们的这个范围。 ok， 当前的这个写法呢，大家看明白， 但是我们在获取这个随机值的时候，那它里面有可能是不是，有可能是一定会是小数啊？所以这个位置呢，你还要对他进行一个，比如取者，恩 i 等等处理好。行，把这块写完了以后，我们一会也来看一下 唇前端，咱们这样写他能不能呢？实现我们的实时数据线呢？好，给大家写完了以后，我同样啊，你看这个时候页面呢，我先给大家来那个刷新一次，哎，我看一下哦，当前这块已经开始了， 看到没有？你看我跟他改变的只是我们啊，这个前面的两条数据，后面数据都没有变，由于我们是随机的，所以说这个地 方大会发现数据是不是在不断的发生改变，你看是不变了，那么他和我们刚才的外部所给的从最终的效果你看起来有同学的，我没有有变化呀，那不一样也那个变动了吗？只是我们的数据，来我们看一下网络啊， 进入到网络之后，这个时候你看我同样给大家页面呢，咱们来一次那个刷新。好，你看啊，看我们当前的这个网络里面。嗯， 好，我来给大家把这款呢那个哦，我没有去发送请求，所以这个地方看不到，如果我要是发送了请求的话，进入到我们的网络， 它是会每间隔两秒我们在里面就会产生一次请求， h d、 d、 b 请求，再间隔两秒，又一次又一次，只不过我现在呢是给大家获取到的，是啊，这个本地的数据，所以我们这个数据 效果看到了请求没有发送，但是记住了，如果你真实的发送请求，这个地方是不断不断再去进行的，所以有些小伙伴你想去判断一下，你当前实时数据展示究竟是以轮巡的方式，还是以我们刚提到的 websoke 的方式，还是说你自己模拟的 通过这个网络呢，咱们就可以非常清晰的看到了，对不对？好，刚才给大家说到这块啊，这个呢，我希望大家明白，当然 轮循的这种方式呢，肯定是不好的，你说你要是哎循环 n 长时间，一晚上几天，哎呀，那这个很多时候会出现问题，自自然而然的，而且呢在我们 进行一些多个啊，像定时期调用啊，他也会出现一些不可控的问题。好，刚才给大家说到这块呢，只是说有些小伙伴能提到了啊，那我简单的跟大家在这一块呢，就是把思路啊，去给大家捋一捋。好， 我们刚说到的这个 web socket 的实时数据的渲染展示。再一次问一下，不知道大家呢是否了解清晰了？记住了啊，核心重点不在于我们里面的具体处理思路，他在于我们的这个 web socket 的连接，包括他，哎，如何去接收数据， 这个呢才是 web socket 呢，它的正确一个运用。好，那一旦对比完，思路是不是就清晰了？哎，像刚才有些小伙伴提到的一些问题吗？现接到我们是不是思路相对就清晰了很多？好，把这个了解好了，那我们接下来就要来跟大家 想一想咱们的这个啊，就是刚给大家提到的，如果我也要通过同样的这个接口，我们要是想实现六，哎，就是聊天室啊，哎，像留言信息，公屏展示这样的一些功能，那咱们应该 怎么去做呢？好，都听明白了，咱们还是那句话来波，六六六，接着呢，我来跟大家继续往后面聊。嗯， 好，都听明白没？都听明白，我就接着往后面聊了啊，刚才说到这块，相对来说是非常简单的啊，这个有些小伙伴自己捋一捋，所以你要是想实现数据，没有服务端提供数据，那咱自己模拟一个呗，是不是挺方便的啊？好，我们继续呢，来跟大家往后面去聊。

可以放心观看，没有任何套路。 嗯，是这样子的，前几天呢，跟我一个亲戚家的小朋友聊天，嗯，他呢，现在是一个计算机专业的学生，今年是读延艾的。 他跟我说，嗯，哥，我现在感觉自己的渣娃后端啊，包括一些前端的基础感觉都学的差不多了，但是我还是不会做项目，就不知道如何下手啊。后来呢，我想了想，我就帮他做了一个，帮他开发了一个小的应用， 嗯，就希望能够对他有一点帮助吧。就是大家现在看到的这个界面上面显示的基于 whale socket 的在线聊天室。 这个项目是今天啊，也会送给就是所有观看视频的有兴趣的小伙伴。呃，如果你对这个项目有兴趣的话，你可以在嗯评论区给我留言，或者说直接私信我，我会发你嗯，这个项目的下载链接。 那我先演示一下这个项目的一些基础功能。现在这个界面是账号登录页，主要有账号登录和注册新账号两个入口。我先登录一个自己之前注册的测试账号， 想这个就已经进入到嗯嗯聊天的这个界面了。呃，因为我登的是一个管理员账号，所以，呃，可以从左侧的这个蓝色导航条倒数第二个。呃，有这么一个入口叫管理后台， 可以先简单的看一下后台啊。后台做的比较简单，主要有两个功能吧，一个账号管理，一个消息管理。账号管理主要就是注册的一些账号的基本信息，包括可以对其进行授权，加入黑名单、升级管理员。 消息管理就是聊天过程中产生的一些消息内容啊，后台就这么多，那还是回到这个对话对话对话界面吧。 啊，那继续看左侧的这个菜单。嗯，第一个是，呃，就是大家这个界面吧，主要有两部分内容，一个聊天绘画列表和右侧的这个主聊天面板。 第二个菜单是我的好友列表啊，包括这个小人有个加号，这里可以添加添加好友。第三个是，嗯，消息菜单，就点击后 这里如果有人添加你好友的话，这里会有一个申请添加好友的通知。想到为了掩饰这个对话能力，那我需要再打开一个窗口， 那我这边再新开一个无痕浏览器，嗯，我们先注册一个账号吧。 啊，六个九，这里的信息都可以随便输啊，没有藏交易。 行，我注册后的话我登录一下这个新账号。 嗯，登录后可以看到 我们给用户随机分配了一个头像。啊，那因为是新用户，所以他是没有，就当前对话是没有任何记录的啊，也没有任何好友，也没有消息啊。另外因为他是一个普通普通用户啊，所以他也没有管理员入口 啊。那我们来演示一下对话，为了方便大家看到这个效果啊，我做一个这种分屏，对，把它放到一个界面上。 嗯，现在这个对话的对话我们需要，嗯，需要是建立在一个好友关系的基础之上，所以我先添加，我拿我之前登录这个账号添加刚才的新新账新账号吧。啊，可以搜到刚才注册的这个六个九这个账号申请添加好友， 申请已经发出 啊，然后右侧的这个窗口里面他就会有一个新的消息，一个小红点点击后可以，嗯，收到一个申请好友的通知，然后点击同意， 统一后在我的好友列表里面就会有超级管理员这个用户。啊，我点击他，然后就可以进行对话了。 嗯，先拿这个账号吧， 你是谁 啊？我们可以看到九九九给给我，就是登录的第一个账， 好发一条消息啊，然后我给他回复一下。 嗯，然后右侧这个窗口就能实时的收到这个聊天回复的，聊天的回复消息， 嗯，行。嗯，就这么多。呃，如果对这个项目有兴趣的小伙伴，记得在评论区留言或者私信我。 哎，当然也可以直接访问我个人签名里面的那个链接啊，那个是我自己的一个个人网站，上面也能够很容易的找到这个项目的下载入口。 呃，想关于项目的功能就演示到这，如果对项目的技术有兴趣的话，可以看我的下一个视频。

好嘞，各位观众，那今天的话，我们来学习这个 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 也离线了，对，他就收不到了。 对，我们可以看到他已经没有任何反应了。那以上的话就是本兆所有的知识啊。