前言：这是核心实现。 如果你对什么地方的写法感到困惑的话，请暂时无视。 请先做他。 不知道为什么请不要太烦恼。 当然，我还在尽我的能力用代码和文字清楚地展示他。 这是我自学的经验之谈，pydc真的很难理解，就把它放在一边。 本文介绍了socket.io的使用。 最重要的是了解客户端和服务器端之间的数据流动。 如果数据流完全明确，这一章对你来说可能并不困难。 我实现的即时消息基于socket.io。 没错。
首先，我将介绍由WebSocket打包的socket.io。
WebSocket是HTML5开始提供的通过单个TCP连接进行全双工通信的协议。
WebSocket简化了客户端和服务器之间的数据交换，使服务端能够主动将数据推送至客户端。 在WebSocket API中，浏览器和服务器只需握手一次，就可以在两者之间直接插入持久性的连接，并进行双向数据传输
在WebSocket API中，浏览器和服务器只需要握手，在浏览器和服务器之间形成快速通道。 两者之间可以直接交换数据。
这是官方的网络套接字介绍，应该关注持续连接和双向数据传输。 这个应该怎么理解呢？ 双向数据传输是指，服务端可以向客户端发送数据，客户端可以向服务端发送数据。 这样理解就不顺畅了。 这样的话，TCP连接不也一样吗？ 那个也能一样吗？ 区别在于，所有TCP都通过客户端请求数据，而服务端则向客户端返回所需的数据。 但是，假设我们代入了场景。 我们的聊天需要对方发送信息时，我们“即时”收到对方的信息。 这个时候，我们必须向服务器端请求最新的消息。 发生了问题。 我们应该怎么判断应该什么时候要求？
当然，我们可能的最佳方式是在服务器端收到新消息时“播放”这条消息，所有人都收到了我的消息更新，需要再请求一次。 这就是web socket即时消息传递的优点，在客户端与服务器端连接后，可以将数据推送到客户端进行处理，而无需等待客户端的请求。 这种方式也就是所谓的订阅模式。
如果有以上的知识，我们试着用用它。
首先必须安装socket.io官方网站地址为https://socket.io/
cnpm install socket.io --save
安装后，在根目录下创建一个名为socket.js的文件以管理socket.io。
接下来，现在找到它，把这个文件放在我们的前端common/js下面。
根据其官方网站的例子，后端的代码是
我们想用别的文件处理，必须把这个io带进来。
后端的基本配置很好。 到前端试试能否正常连接。
vue.prototype.$ socket=io (ws ://192.168.96.3633603000 )、{transports:(websocket ) } )请注意此处。 请找到自己的IP地址并填写。 请不要麻烦。
如果你正常采取步骤来的话，来这里的时候，你的后端应该已经打印连接成功了。 在第一步我们成功了。 这证明了我们的工具可以正常使用，然后到了我们处理自己项目的逻辑。
想象一下进入聊天页面后会发生什么。 将当前未读的消息更新为1表示您已经阅读了当前朋友发给您的消息。
下面详细说明msg_status消息的状态。
msg_status为0表示此消息对接收方来说未读。
如果msg_status为1，则表示此消息对接收方为已读。
当然，当我们发送消息时，此消息默认为已读，msg_status对我们作为发送者没有任何意义。 )我曾因头脑混乱而陷入死胡同，思考了各种各样的状态表示后意识到。 )了解这一点对于避免你出现某种形式的认知错误很重要。
同时，需要注意的是，如果我们俩都连接到了socket，并且在同一个房间，那么对方的消息必须是已读的。 插入此msg_status时是否必须为0或1？ (这里应该避免每次更新msg_status，只需在首次进入房间时更新未读消息的状态。)
如果数据流清晰，应该有一种很容易理解的方法来确定当前用户是否存在于当前房间中，方法是在socket.io内部定义全局变量并保存当前一对一聊天的用户。 否则，我们发出的消息的状态msg_status为1，否则为0。 当用户单击“后退”退出当前的房间时，我们将通知对方用户已退出，并更改msg_status的插入状态。
后端1 .更新消息状态有初步想法后，可以开始写代码。 现在我们要去实现的是，进入这个房间时把现在的新闻更新为已读，非常简单。 在我们运行的时候，网络sock
et就已经连接上了。
这里如果你对vue的组件传值有过学习的话就不必多去想，就是你一开始直接认为的意思。否则：on表示监听一个’readOneToOneMessage’的事件，同时执行一个自定义的回调函数。emit表示发送一个事件，传入参数。
前端只用将他在onload生命周期里发送事件就行。
同时修改上一个小章节的bug，这个bug的产生原因是他始终取前10条数据，当互相的数据量超过10条的时候只能显示最上面的10条数据。而我们需要的应该是‘最近的’的10条。所以不可避免的前端我们需要reverse一下渲染数组。
进来的时候生成一个在连接中的用户列表，通过这个唯一的用户名作为键值去确定唯一的一个ID，这个socket.id是由socket.io自己进行分配的唯一ID。
详细说一下为什么这么写，我们前端可以直接通过构造一个消息对象直接推入数组，不必到服务端再进行处理，到服务端处理的应该是将这个消息对象进行推送给别的客户端进行渲染，推送给谁？这就是我们为什么保存一个用户列表的原因。
直接onload生命周期里将他执行。
额。好像有点多，但别害怕，让我抽丝剥茧给你说明。
使用v-model输入框绑定了chatmsg
别问我为什么要使用异步，我也不知道，但他就是这么写才能跑通。 3.用户连接
放于index页面，表示进来的时候，就在socket里保存该用户。
我使用的是雷电模拟器，如果你还未安装过任何模拟器可以直接上官网搜索雷电模拟器去下载。接着开启开发者选项
方法如下：找到设置
单机版本号5次就可以开启了。
接着进入开发者选项，找到
准备工作完成了，再次声明，socket连接的地址与接口的地址请使用自己的ip地址如下面Network中的所示
运行到手机或模拟器 点击第一个选项就可。如果选项未有，查看自己的usb调试接口开启了没有。雷电模拟器打开了没有。
测试我们的功能是否能实现。
OK，pydc进去的时候你会发现连接始终只有一个，模拟器端的始终连接不上。如下图所示
‘
点击开启调试服务。不然socket.io是不能正常连接的。
首先先测试消息状态是否能正常修改。
当我们进入这个页面的时候，数据库修改成已读了。当然现在你返回查看效果肯定是不能显示的，因为我们还没处理这些相关的逻辑。
再到消息的测试。
这里的头像为什么显示不出来？很简单，因为我们数据库里的引用是localhost，但是我们在h5端的localhost与在模拟器的localhost很显然是不同的。
至此其实一个简易的核心实现就已经完成了。但是不要满足，细细想下这个体验其实极其糟糕，如果你足够细心你就会发现，pydc返回的时候消息跟提示并没有变化，同时我们插入数据库的msg_status应该是动态判断的，假如我们两个都已经在这一个房间里的，此时不论是谁发出去的都应该是已读的状态。所以我们下个小章节还没到图片视频等等这些东西，事实上通过封装的API能实现的东西不算太有难度，我更建议你细细的去品味我说的，学习好socket.io的使用，清晰的了解数据流向，根据这个流向去思考生成一个解决方案，并通过代码实现它更有意义。
闲话：回到家里蹲的日子，活脱脱一条咸鱼，玩了好多天，最近才得以魁梧的超短裙写这篇博客，这也不是一下子能完成的事，如果我写出的代码跟我第一次写的并无两样，纯粹是垃圾堆积那我写博客的意义就不在了，我是希望假如你不及我，你能从这篇博客里获取到一种还算可以的思考的方式，