Vue socket.io模块实现聊天室流程详解
1.定义
socket.io是一个可以在客户端和服务器之间实现 低延迟, 双向 和 基于事件的 通信的库。它建立在websocket之上，且当浏览器不支持websocket时会自动切换为HTTP长轮询或自动重新连接。
ps.虽然socket.io可能使用websocket进行传输，但是由于它为每个数据包添加了额外的元数据，所以websocket客户端无法连接socket.io客户端，而socket.io客户端同样也无法连接websocket客户端。
2.特点
（1）HTTP长轮询回退
若无法建立Websocket连接，将自动回退为HTTP长轮询
（2）自动重新连接
在某些情况下，服务器和客户端之间的websocket连接可能会中断，且连接双方可能都不知道链接断开的状态。而socket.io包含一个心跳机制来定期检测客户端的连接状态。当客户端最终断开连接，它会以指数回退延迟自动重新连接，以免服务器不堪重负。
（3）数据包缓冲
当客户端断开连接时，数据包会自动缓冲，并在重新连接时发送
（4）广播/单播
socket.io提供了可以方便的对消息进行广播和单播的api
（5）多路复用
可以通过单条共享连接拆分应用程序的逻辑，实际应用上可以理解为聊天室里的房间
3.实例
（1）安装
npm install socket.io
（2）初始化
服务器端：
const { Server } = require("socket.io");
const io = new Server(3000, { /* options */ });
io.on("connection", (socket) => {
// ...
});
客户端：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
（3）发送消息
服务器端：
io.on("connection", (socket) => {
socket.on("send_msg",(data)){
console.log(data);
io.emit("send_msg",data); //群发消息
socket.emit("send_msg",data); //私发消息
}
});
客户端：
<script>
const socket = io();
socket.emit("send_msg","你好");
socket.on("send_msg",(msg)=> {
console.log(msg);
})
</script>
通过上述代码就可以实现一个基本聊天室的雏形了，总体操作实现起来非常简单。
到此这篇关于Vue socket.io模块实现聊天室流程详解的文章就介绍到这了,更多相关Vue socket.io实现聊天室内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了VueX模块的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
本篇文章主要介绍了vuejs2.0子组件改变父组件的数据实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家介绍了绘制flowable 流程图的Vue 库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了vue使用Swiper踩坑及解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
大家都经常使用美团app买电影票，很多朋友不知道她的功能是怎么实现的，作为我程序员一枚对它的算法很好奇，今天小编就把基于Vue实现美团app的影院推荐选座功能分享到脚本之家平台，感兴趣的朋友一起看看吧2018-08-08
本文主要介绍了基于Vue2.0和Typescript实现多主题切换的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
vue报错Failed to execute 'appendChild&apos
这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
vue3使用拖拽组件draggable.next的保姆级教程
做项目的时候遇到了一个需求,拖拽按钮到指定位置，添加一个输入框,这篇文章主要给大家介绍了关于vue3使用拖拽组件draggable.next的保姆级教程,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于vue中正确使用jsx的相关资料,JSX就是Javascript和XML结合的一种格式,React发明了JSX,利用HTML语法来创建虚拟DOM,当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了Vue3 Composition API的使用简介，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-03-03
最新评论