vue使用socket与服务端进行通信的代码详解
更新时间：2023年09月24日 10:35:10 作者：谨言的鼠猫
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下
1、定义socket
var ws = new WebSocket('wss://地址');2、进行连接，同时每5秒钟发送心跳一次
ws.onopen = () => {
console.log('@open');
// params为与服务端定义好的参数
ws.send(JSON.stringify(params));
this.sendTimmer = setInterval(function () {
ws.send('Hi Server!');
}, 5000);
};3、获取服务端发送来的信息，进行处理
ws.onmessage = (event) => {
console.log('@message:', event);
try {
const data = JSON.parse(event.data);
if (data.end) {
//约定的单条消息传递结束
} else {
// 进行数据处理
}
} catch (err) {
// 数据错误处理
ws.close();
console.error(err);
}
if (event.data == '[DONE]') {
// 消息传递结束
this.sendTimmer && clearInterval(this.sendTimmer);
ws.close();
}
};4、关闭socket
ws.onclose = (event) => {
console.log('@close:', event);
this.sendTimmer && clearInterval(this.sendTimmer);
ws.close();
};5、判断socket发送错误
ws.onerror = (event) => {
console.error('error:', event);
// 进行错误类型判断，展示不同信息
ws.close();
};到此这篇关于vue使用socket与服务端进行通信的代码详解的文章就介绍到这了,更多相关vue socket服务端通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue table 甘特图vxe-gantt 实现多个表格的任务互相拖拽数据功能
vxe-gantt支持多表格任务跨表拖拽,通过设置row-drag-config.isCrossTableDrag启用功能,需确保数据主键不重复且指定keyField字段,该方案适用于需要多表数据联动的场景,实现方式简洁高效,感兴趣的朋友跟随小编一起看看吧2025-09-09
这篇文章主要介绍了vue.js如何处理数组对象中某个字段是否变为两个字段方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了在vant 中使用cell组件 定义图标该图片和位置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
React组件通信之路由传参(react-router-dom)
本文主要介绍了React组件通信之路由传参(react-router-dom)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家介绍了Vue3之元素和组件的动画切换实现示例详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
前端vue3使用SSE、EventSource携带请求头实例代码
这篇文章主要介绍了前端vue3使用SSE、EventSource携带请求头的相关资料,SSE是基于HTTP的服务器向客户端推送数据技术,实现单向实时通信,轻量级且支持跨域、自动重连,文中将实现的方法介绍的非常详细,需要的朋友可以参考下2025-06-06
这篇文章主要介绍了Vue项目如何开启gzip的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
组件是可以在它们自己的模板中调用自身的,不过它们只能通过 name 选项来做这件事,下面这篇文章主要给大家介绍了关于Vue组件化开发的必备技能之组件递归的相关资料,需要的朋友可以参考下2022-01-01
vue3组件的v-model:value与v-model的区别解析
在Vue3中,v-model和v-model:value都是用于实现双向数据绑定的语法糖,但v-model:value提供了更显式和灵活的绑定方式,允许你明确指定绑定的属性名和事件名,它们的主要区别在于默认行为、灵活性、多模型绑定和使用场景,感兴趣的朋友一起看看吧2025-02-02
本文主要介绍了vue实现iview表格添加筛选功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论