~朴：shu的博客

1.项目说明：我们主要通过这个项目，练习一下vue-socket.io的群聊和私聊两个功能，至于房间Rooms，有兴趣的伙伴可以自己去研究啦。那我们的群聊是怎么实现的呢？我们会设计一个登录页面，要求输入用户的用户名，作为聊天应用的唯一标识。群聊是登录上来就有一个默认的群，而每个用户都能触发私聊。就这个思路，下面来实现。2.登录页面实现：//vuex state: { /* 记录登录状态 */ isLogin:false,}//App.vue c..

Socket.IO，支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作，可靠性和速度同样稳定，本文将详细介绍 socket.io、socket.io-client、vue-socket.io三者的关系，Vue3 中使用 Socket.io-client 进行通信的分析过程，快来看看吧~

总的来看，要深入了解socket的源码，知道其实现方式，基于源码，将vue3的特性结合进去

目录1. 项目说明：2. 项目的创建：3.使用编辑器打开项目：4. 下载ElementUI:5. 使用elementUI搭建聊天应用主体框架：6. Footer的实现：7. Aside的实现7.1 渲染用户列表；7.2 个人信息：7.3 搜索框实现8. vuex的设计：9. Header实现：10.Main的实现：11. 总结：1. 项目说明：本项目基于vue2与cli3，使用vue-socket.io实现即时聊天的小应用，从项目的搭...

PS:动态地址问题、自动连接问题、vuex管理、学习建议1. 动态socket地址问题最近有小伙伴私信问动态地址问题，今天统一做一下答复，谈谈自己的理解。所谓动态地址，就是请求后端接口，返回一个地址，然后你再连接这个socket.io服务器。如下示例：基础数据 server.json：{ "server":"http://localhost:9000"}如上，我定义了一个基础JSON数据，里面有一个服务器地址，下面我们通过axios请求这个JSON文件，模拟后端返回..

1. 上次的博客已经讲述了如何建立服务器，如何建立客户端，并且与服务器进行连接，那么本文接着上次，讲述一下客户端与服务器端的通讯是如何实现的。PS:事件的发布与监听、广播事件、私聊事件、其他常用事件。2. 事件的发布与监听： 2.1 emit（）、on（）：在vue中，组件可以发布自定义事件，使用emit，其他地方直接使用 on 监听这个事件即可。而socket.io 也是类似的，发布事件用 emit ，监听事件用 on；// 监听客户端连接...

1. 目前比较成熟的实现聊天的技术很多，不过都是封装的web socket。在实际的项目中有这个需求，就查找了相应的文章，发现关于Vue实现聊天的完整叙述的文章少之又少。故写此文章，望帮助到正在探寻的小伙伴，欢迎留言讨论。（PS:包括客户端、服务器端、Vue-socket.io 使用的注意事项、请求跨域问题、400状态码问题的解决等，相信读完会有所收获。）2. 先说说Web Socket：Web Socket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。说人话就是建